Switch modes to see how density and environment affect every component.
The three mark sizes are separate drawings, not one drawing scaled.
Notch count drops 5 → 4 → 3 and the tail stops breaking the
edge at 16. Color comes from --brand-mark, which holds the
same hue on both surfaces and only moves a step on the ramp. Switch the
mode above and watch the mark stay orange while everything else changes.
San Marzano tomatoes, fresh mozzarella, basil, olive oil
Atlantic salmon, lemon butter, asparagus, wild rice
Card + List Row + Badge, composed. It sits outside the twelve and the
contribution rules still apply to it. Line only, so it ignores the mode
switcher and always renders density-service env-high-glare
surface-line. Six fit across a 1366px pass display.
The vertical budget is the interesting part. On the real pass display the rail gets about 620px. Header and timing take ~157px and the three stacked actions take ~237px — 41% of the ticket — leaving roughly five lines for the items. A longer ticket scrolls inside that space. Ticket height is fixed and the rail must show six, so anything you add here comes out of the item list.