Dial in the spacing scale and corner-radius system on the locked palette and type. Spacing is two layers: a raw numeric scale, plus semantic aliases (inset/stack/inline/layout) that point at it — the "layout vs. element spacing" question resolved as naming, not a second scaler. Radius includes the asymmetric-corner move from the mark lab, promoted to a real radius.asymmetric scale you can toggle onto real components — not just the logo tile — to decide where it earns its keep.
Preview
Spacing scale
Named steps, linear off a base unit — spacing isn't modular like type, it's built from a shared grid unit. Bars are proportional to px value.
Spacing in a component
Card padding = inset.md · title/body gap = stack.sm · gap between cards = layout.sm. Three different alias categories, same raw scale underneath. The first card also carries the signature radius, if applied to cards.
Spacing and radius are judged here the same way color and type were — in a real component, on the real background, not as bare numbers on a ruler.
A second card at the same tokens, without the signature radius, so the two read side by side.
Grid gutter
A layout.* alias driving a grid gap — the macro tier, and the one that may go fluid (see panel 2) instead of staying fixed like inset/stack/inline.
Radius across component types
Buttons, tags and thumbnails stay symmetric for predictable click targets. The panel shows the signature radius when applied.
A base unit times a fixed set of named multipliers (3xs…4xl). Move the base to change density everywhere at once.
Computed scale (px)
Not a second scaler — each alias just points at one step of the raw scale above. Repoint an alias to retune every component using it, without touching the scale's math. This is the layer that answers "should layout and element spacing be different": they're not a different system, they're different names for positions on the same one.
inset — component padding
Chip/tag → card/button → spacious panel.
stack — vertical rhythm
Title/body → block-to-block → major section break.
inline — horizontal rhythm
Icon/label → tag row → toolbar item.
layout — macro / page level
Card row gutter → section-to-section → page-level break. The only tier allowed to go fluid.
Fluid layout gutters (clamp on resize)
layout.* compresses toward a floor via clamp() while inset/stack/inline stay put, because component padding shouldn't renegotiate itself on every breakpoint — only the macro gutters should.Four symmetric steps; full is always a pill (9999px), not tuned here.
Computed scale (px)
The bracket tile's "round TR+BL, sharp TL+BR" move, promoted to a full sm/md/lg/xl scale that mirrors radius.scale exactly — pick an asymmetric size the same way you'd pick a regular one. Corner style (which diagonal rounds) is one global choice; size is per-use. Pure CSS — border-radius takes four independent corners, no SVG trick needed outside the mark itself.
Computed asymmetric scale
Which corners round? (global)
First stack card
Radius-row panel
Mark-tile echo size
usage note: cards, panels, hero art, and the mark only. Toggling a target's signature off drops it back to the regular symmetric radius at the same size, so only the corner style changes.Which layout.* size drives the 3-column gap above.