Eight-point grid.
Hairlines before shadows.
Section padding tiers by role. Three container widths. Corners mostly sharp. Five-step shadow ladder used sparingly. The Hairline-First Rule keeps the surface quiet.
Seven steps. Use them, only them.
If a gap is not a multiple of 8, it is a defect. Inline elements (icon-to-text, label-to-input) may use 4px and 12px as exceptions.
A section's padding tells you what kind of section it is.
Anchor
Hero, manifesto. The deepest tier. The breath at the top of the page.
Climax
Reveal, citation, new-search. Deep but not anchor.
Connect
Bridge, outcomes. The transition between two louder sections.
Chrome
Audit, access, footer. The thinnest. Information at low ceremony.
Three widths. Pick by content, not whim.
Form
Long-form essays, login forms, the access page. Reading width that respects the eye.
Reading
The default. Hero, manifesto, audit grid, library marquee. Almost everything.
Wide
Used only for the dashboard, the citation map, full-bleed peacock band.
Solid surfaces only. No exceptions.
Paper
The light surface. Journal, essays, admin chrome.
Ink
The dark surface. Landing, manifesto, drenched bands.
Peacock band
The only saturated full-bleed. Refusals marquee, the Bridge.
No gradient backgrounds. No mesh. No 3D blobs. No full-bleed photography on landing. Imagery sits inside the Magritte frame, never as a ground.
Corners are mostly sharp.
Marketing surface
0px on cards, the Magritte frame, fields. Sharp corners signal editorial intent.
Product surface
6px on cards (--r-md), 999px on buttons (--r-pill). Slight softening for keyboard ergonomics.
Hairline-first. Five shadows for when a hairline isn't enough.
Resting cards
Hover
Popover / palette
Signature lift on ink
Magritte only
The Hairline-First Rule
Reach for a hairline before a shadow. A shadow answers "is this floating?" A hairline answers "is this grouped?" The brand groups more often than it floats.
Hairlines do the structural work.
On paper
Cell separators in editorial grids are gap: 1px; background: var(--br-rule). The gap is the rule.
On ink
Side-stripes > 1px are banned. Coloured left-borders on cards are one of the most-flagged AI-slop tells.
Glassmorphism, by default, is off.
backdrop-filter: blur has exactly two legitimate uses:
01 · The Floating CTA pill
Bottom-floating "request access" pill on the landing page. Uses backdrop-filter: blur(20px) saturate(180%) over a 70% paper background.
02 · The TopMark Journal chip
"In the Journal · No. III" chip in the sticky top-bar. Same blur token.
Never on hero cards, modals, sidebars, product chrome. Translucent text on ink uses the fixed opacity tokens (--br-ink-text-2/3/4). Never hand-pick rgba.