The system this site is built from

• 50#F4FBF7Text on accent fills (--accent-ink)
• 300#4CBE9CHeading gradient start, dark theme
• 400#42AE8ESmall accent text, dark theme (--accent-text)
• 500#2E8B6FThe bright accent: icons, borders, glows (--accent-bright)
• 600#2C7E66Heading gradient start, light theme
• 650#1E7358Light-theme meta text — the greenest shade that still passes AA
• 700#256B56Primary button fill, ::selection, skip link (--accent-btn)
• 800#1A5F4CSmall accent text, light theme (--accent-text)
• 900#1A4D3EDeep base accent (--accent)
• 950#14402DHeading gradient end, light theme

• 50#ECF2EFDark-theme ink (--ink)
• 100#E7ECE6Light-theme bg — deliberately deeper than white so glass can show
• 200#DCE3DALight-theme deep bg (--bg-deep)
• 300#B9C4BEDark-theme descriptions (--ink-soft)
• 400#8B9891Dark-theme muted (--muted)
• 600#4E5B54Light-theme muted (--muted)
• 700#35423BLight-theme descriptions (--ink-soft)
• 900#191D1BDark-theme bg — green charcoal, not a pitch-black void
• 950#111413Dark-theme deep bg (--bg-deep)
• 975#0B140FLight-theme ink (--ink)

• ok#17C46BSuccess: submitted form, availability status
• error#FF8A7AField error — soft coral, legible on dark glass

Only solid pairs appear here, where the ratio is exact. Glass surfaces are translucent, and their stacks — glow over glass, the worst case on the site — were measured by hand, with the result recorded in a comment beside the token definition.

• The quick brown fox jumps over the lazy dog$text-xs12pxMono footnotes, indices, field errors
• The quick brown fox jumps over the lazy dog$text-sm12pxEyebrows, mono chips, captions
• The quick brown fox jumps over the lazy dog$text-base-sm16pxChips, dense UI
• The quick brown fox jumps over the lazy dog$text-base16pxText CTAs, secondary copy
• The quick brown fox jumps over the lazy dog$text-md16pxBody copy — same as body
• The quick brown fox jumps over the lazy dog$text-lg20pxSection lede
• The quick brown fox jumps over the lazy dog$text-xl20pxCard titles on mobile
• The quick brown fox jumps over the lazy dog$text-2xl28pxColumn headings
• The quick brown fox jumps over the lazy dog$text-3xl32pxAccent column headings

• Home hero (h1)clamp(40px, 5.2vw, 72px)
• Page titleclamp(36px, 5vw, 64px)
• Case-study titleclamp(28px, 4.4vw, 52px)
• Section heading (h2)clamp(28px, 3.4vw, 44px)
• Block titleclamp(24px, 2.8vw, 36px)
• Card titleclamp(20px, 2.2vw, 28px)

Line height moves with the role — 1.1 for large headings, 1.2 for the smaller ones. A single tight value breaks at card size once a title wraps: on a two-line name the descenders nearly touch the following line.

Container 1200px

Padding 28px, 16px on mobile. The --narrow modifier drops to 760px for long-form text

Section rhythm 80 / 60 px

Default and .section--tight. Tablet 68px, mobile 48px

Section head 640px

Bottom margin 40px, hairline rule, mono /0N index at the bottom right

Scroll clearance 104px

scroll-padding-top on html is the single mechanism. scroll-margin-top on sections stacks additively and is therefore banned

$bp-mobile 620px

Phone

$bp-nav 930px

“Does the primary nav fit” — a different question from “is this a tablet”

$bp-tablet 980px

Tablet

$bp-laptop 1080px

Intermediate step so 621–980 is not one undifferentiated bucket

• glass-effect

  Singleton surfaces: header, terminal, contact form, side menu

  Catchlight + white-to-evergreen wash + translucent fill; lit top and left edges; backdrop-filter: blur(20px) saturate(160%); ambient shadow, contact shadow and two inset lips.

• glass-card--no-blur

  Repeating cards in grids and carousels

  The same face without backdrop-filter and without the blurred shadow — inset lips only. That blurred shadow repeated across 15–20 cards is what cost 35 ms per frame versus 17 ms.

• glass-puck

  Icon containers repeated in grids

  A gradient, a 1px border and one small shadow. No backdrop-filter — the icon sits in the material, not on a flat tinted box.

• cursor-sheen

  Interactive cards

  A soft radial accent pool follows the pointer inside the card: 7 % in dark, 10 % in light. useCursorSheen writes the coordinates straight into style, with no React state. The card itself never moves.

Where backdrop-filter is unsupported, every recipe falls back to the opaque --surface-glass-strong — the panel stays readable, it simply stops being glass.

$dur-fast 0.2s

Micro-interactions, Framer button hover

$dur-base 0.25s

Button colours, field borders, cursor sheen

$dur-slow 0.6s

Large reveals

Press scale(0.97)

The only touch feedback there is: the native tap highlight is disabled globally because it painted a rectangle over pill buttons

Button hover y: −2

Framer Motion; tap is scale 0.96

Cards no movement

The lift and skew were removed on 13.09.2026. A card hover is its glow and the cursor sheen, nothing more

Theme switch 0.3s

Only the background travels; text colour snaps. Cross-fading both sends them through a grey-on-grey midpoint of ~1.1:1 where the text briefly vanishes

Eyebrow pulse 2.6s

A ring expands and fades on an infinite loop

Page transition 0.35s

Sections settle into the plane over 0.7s

The pressed state is scale(0.97) on all three variants: the native tap highlight is disabled globally because it painted a rectangle over a pill button and its shape cannot be styled. That makes touch feedback the component’s own job.

• <GlassCard />

  Full glass: backdrop-filter and soft shadows. For singleton surfaces.

• noBlur

  No blur and no blurred shadow, inset lips only. For grids and carousels.

• hoverLift

  Accent border and glow on hover. The card itself never moves.

The 16px text size is not decorative: below it, Safari on iOS zooms the page when the field takes focus. The focus ring stays separate from the accent border — suppressing the outline outright is not an option.