Mobile
A phone on the floor or in a truck: one column, actions within thumb reach, and nothing hidden under the system's own bars.
One column
Below 768px every layout collapses to one column with a 16px gutter. Side drawers become full-height sheets, tables become stacked rows, and nothing scrolls sideways.
Sticky bottom bar
The commit action docks at the bottom, where a thumb reaches it, on the elevated rung with a 1px top border. Its padding clears the home indicator with the safe-area inset.
Receive deliverySafe area
.bottomBar {
position: sticky;
bottom: 0;
padding: 12px 16px max(12px, env(safe-area-inset-bottom));
background: var(--bg-elevated);
border-top: 1px solid var(--border);
}Use env(safe-area-inset-bottom) inside a max(), so the bar keeps its own padding on a phone without a home indicator.
More in Foundations and concepts
Design principlesFour human commitments for software on a shop floor, and the engineering rule that keeps each one.Token architecture and tiersPrimitive, semantic and component tokens, and how one value cascades to a control.Color and the monotonic ladderSix charcoal rungs measured in L*, text contrast, and status hues that name conditions.Typography and data formatsSix sizes, the one 10px tier, and when a number takes the data face.Data visualization and charts20 chart archetypes at three sizes, timeline rules, the series colour contract, and accessible charts.Layout patterns and shell slotsThe five shell slots, drawer anatomy, and density that steps inward.