Layout & posture

8px baseline grid

Radii by role

12px

buttons

8px

controls / cards

4px

compact controls

Spacing

4pxcompact radius unit

8pxbaseline grid

16pxbetween fields

24pxspecimen padding

36pxsection padding

48pxcontent padding

App shell

Subsite headers and sidebars use the official product mark. Company graffiti belongs only in the footer. Open the app shell.

242px fixed sidebar · content column capped at 1300px · 3px tri-colour header rule

Footers

Public bible, landing, journal and marketing pages use the full company band from static/marketing/footer.css. App shells use a compact dark footer inside the main column; it never runs under the sidebar. Both use company graffiti only in the footer.

Measured metrics

Element	Value
Sidebar	242px fixed (272px above 851px)
Content column	1300px maximum, 48px padding
App header	72px minimum height, 3px rule underneath
Breakpoint	850px — sidebar becomes a static stacked block, nav scrolls horizontally
Field	360px max width, 34px height, 13px text, 16px gap
Button	32px minimum height, 6px 10px padding, 12px text
Touch action	44px minimum
Border weight	1px

Interaction rules

Autosave. Saves after a short pause; feedback belongs directly beneath the field. The failure state is designed, not forgotten.

Search. Enter searches immediately. Three characters start a two-second timer. Clearing the field resets the results.

Refresh. Explicit intervals — 5 seconds, 30 seconds, 1 minute, Pause — always visible. Never a silent poll.

Destructive confirmation. One compact control arms the action; a separate click performs it. Switching on never deletes anything.