Geometry and elevation
Square by default, radius as an allowlist, and elevation by navy shadow.
Shape, after the 2026-09-20 cutover
Of the four earlier rules, two stay, one hardens and one is replaced. It is said below rule by rule, with the one it retired marked.
The radius scale
- Pill · 999px
- button, search, filter, chip, segmented
- Small · 4px
- ⌘K, checkbox, bubble tail
- Small · 6px
- navigation row
- Card · 16px
- filled box on the island
- Island · 16px
- the content plane
- Bubble · 16px
- with the tail corner at 4
Radius stops being zero and becomes a list of three
Everything you press goes pill (999 px): buttons, search, filters, chips, the segmented control and the selection bar. Small things stay at 4–6 px: the ⌘K shortcut, the checkbox, a navigation row. Card, island and chat bubble go to 16 px, with the bubble tail at 4.
The allowlist does not disappear, its contents change: still three entries, and curving something new still means adding it. What falls is the "0 by default" — with the island at 16, a square button inside it looks glued on.
↺ Replaced: "Square by default: radius is an allowlist"
One island per screen
The live rule says a component is not a bordered rectangle inside another one. The proposal raises it a floor: the whole screen has a single island, and the divisions inside it are columns split by a minimal line, not panels.
Never stacked islands, never dividing boxes, never content cut in half. Columns and separations, yes. What sits on top is a filled box with a soft shadow and no hairline — the fill and the line are never used together.
✓ Confirms: "No boxes inside boxes"
The filled box replaces the bordered box
In the proposal an object on the island carries a subtle fill, a 4% line of light on top, a short shadow and a long one downwards. No hairline: the fill already separates it. Using both is exactly the box-inside-a-box the live rule forbids.
The shadow stops being navy and becomes black, but it only falls downwards. A diffuse shadow all around, over a near-black ground, is a smudge and not height: the founder saw it in round 2 and rejected it.
↺ Replaced: "Elevation is a navy shadow, not a border"
The values
- radius-pill
- 999px · everything you press
- radius-xs
- 4px · ⌘K, checkbox, bubble tail
- radius-nav
- 6px · navigation row
- radius-card / island
- 16px
- Island margin
- 8px against the ground
- radius-button
- landing scope · globals.css of apps/www
- Island shadow
- hairline of light + fall downwards
- Box shadow
- light on top 4% + 0 1 2 / 0 12 28
- Hairline
- white 4% · black 4.5% — only between rows
What did not change
The four shapes of the system
Shape is semantic, not decorative. Action is square. State is a pill. Presence is a circle. The identity portrait goes back to square by default and is recognised by its image, not by a control geometry.
Square by default: radius is an allowlist
There is no default radius to tune: surface and control tokens are 0. Curving something new means adding it to this list, and the list has two entries by design.
A button’s clarity under the cursor comes neither from shape nor from movement: it comes from the shadow focusing behind it, defined in 09 · Motion.
- State pills and chipsrounded-full · 999px
- Presence: sphere, initials, dotscircle · 50%
- Identity portraitsquare · see 18 Identity
- Landing button--sds-radius-button · landing scope
- Everything else0 — buttons included
The input is a line, not a box
Typing happens on a single line under the text — never inside a bordered rectangle. On hover the line asserts itself; on focus it turns blue and 2px. That is all the signal an input needs.
The line uses the control border token, the only border in the system — and now it measures one dimension, not four.
Rest
Search lead…
Hover — put the cursor here
Search lead…
Focus
Constructora An
No boxes inside boxes
A component is never a bordered rectangle containing another bordered rectangle. Every level of outlined nesting adds noise and takes away cleanliness.
Composition is flat: one field by colour or shadow, and inside it typography, rows and controls — no intermediate outlines. Hairlines between rows are typography, not boxes, and they stay.
Not this
Qualified lead
ContactThis
Qualified lead
ContactElevation is a navy shadow, not a border
Two heights are enough: elevated for cards and work fields, floating for menus, popovers and dialogs. The shadows carry the family navy, never neutral black — that is why they feel natural on cold paper.
In dark the projection is barely visible, so elevation changes engine: the surface step separates, and the shadow token carries a subtle light on top — as if light grazed the raised surface. No borders, no rings; the markup does not change.
If a surface needs a border to be distinguished, it is short on colour contrast or long on nesting. Not even the input carries a box: typing happens on a single line.
The values
- radius-control
- 0
- radius-panel / dialog
- 0
- radius-round
- 999px · pills and presence
- shadow-elevated
- 0 1 2 / 0 12 32 · navy 5–9%
- shadow-floating
- 0 2 4 / 0 20 48 · navy 7–13%
- Field borders
- none — colour or shadow