Forklift operators use MANOS on touch screens, often wearing gloves. CDS buttons are sized for a bare fingertip (44px). Browser zoom is not an option: we don’t control those devices, and zoom shrinks the layout until a kiosk behaves like a tablet. So CDS has to offer a larger mode itself.
There are two techniques, and one choice about where to apply them. All are shown at ×1.5.
Scale everything
What it does
Every size in CDS comes from a token: text, spacing, corner radius. One switch multiplies them all by 1.5. Buttons, icons, fields, gaps and the touch area grow with them; borders stay 1px.
What you see
The same screen, everything bigger. Layout and breakpoints stay those of the real screen, unlike browser zoom, which turns a 1440 kiosk into a 960 tablet.
Trade-off
What you see is what you can tap, and neighbouring buttons stay apart. In exchange a screen holds fewer rows, and wide tables wrap or scroll sooner.
Bigger text, invisible targets
What it does
Each text style is swapped for the one two steps larger in the designed type scale. Separately, the invisible touch area every button already has grows from 44 to 66px. Nothing else moves.
What you see
The same layout and density with larger text. Buttons look the same size but also accept taps just outside their edge.
Trade-off
Keeps every row on screen. But buttons still look small, so a gloved hand aims at a small target, and where buttons sit close the invisible areas overlap: a tap between them can hit the wrong one.
Whole page or one area
What it does
Either technique can switch on for the whole page or for one container. Shown here for “scale everything”.
What you see
Big controls where hands work, such as the operator form, while the data table beside it stays dense.
Trade-off
Gets the best of both on one screen. It costs a slightly bigger stylesheet, and every screen needs someone to decide which areas scale.
Recommendation
Scale everything, built so it can be switched on for one area. It is the only option where the size a gloved hand sees is the size it can tap, and neighbouring buttons stay apart. Scoping it to the areas hands work in keeps data screens dense. Its open design questions have working defaults; “bigger text” has two that must be settled first. It stays available for later, if reading from a distance becomes the request.
Scrolling one screen scrolls all four.
Baseline
CDS as it ships today.
Scale everything
Every token × 1.5. Look at the row buttons and how many rows fit.
Bigger text, invisible targets
Text two steps up; buttons unchanged. Turn on “Show hit areas” and look at the row buttons.
Scale everything, form only
Only the operator form scales. The table stays as it is.
Baseline
Scale everything
Bigger text, invisible targets
Scale everything, form only
What it costs
CDS builds
—
An opt-in stylesheet generated by the token build, and tokens for 11 sizes that are off the spacing scale today.
An opt-in stylesheet that remaps the type scale, and a one-line hook in the touch-target utility.
The “scale everything” stylesheet in a form that works on any container.
Stylesheet (gzip)
13.2 KB of tokens
+0.7 KB
+0.5 KB
+2.1 KB
A consuming team
—
Loads one stylesheet and sets data-density on <html>. Checks its layouts still fit with fewer rows.
Loads one stylesheet and sets data-density on <html>. Keeps a wide enough gap between buttons that sit close.
Loads one stylesheet and sets data-density on the containers that should scale.
Visual tests
—
Every component needs a coarse snapshot: the suite roughly doubles.
Every snapshot with text changes.
Only the components teams actually scale.
Open for design
—
Which sizes must not scale (today: borders hold, corners scale), and tokens for the 11 off-scale sizes.
The three largest heading sizes collapse into one. On Lexus, body-5 / body-6 also become identical.
As “scale everything”.
What it measures
Hit area, table row button
—
—
—
—
Row buttons’ hit areas overlap
—
—
—
—
Hit area, form button
—
—
—
—
Table rows per screen
—
—
—
—
Nine-column table
—
—
—
—
Hit area is what a finger lands on: the larger of the visible button and its invisible touch area. 44px is the WCAG 2.5.5 minimum; about 76px suits gloves.