Foundations

Font families

Both are variable fonts loaded once at the top of the document, with metric-adjusted fallbacks (Outfit Fallback, Noto Sans Fallback) to avoid layout shift.

Type scale

Twelve steps from --font-size-xs at 0.75 rem to --font-size-8xl at 5.5 rem. Heading recipes pick from this scale, sometimes wrapped in clamp() for fluid behaviour at hero scale.

Headings

Display, section, subsection, and footer roles, ordered from biggest to smallest. Most live in Outfit; the footer heading is the only one in Noto Sans because it labels a column rather than introducing a section. Highlight sits in this group too — a gradient text fill applied to a span or em inside a heading.

Body

Four roles of paragraph text: large for hero subtitles and intros, base for default paragraphs, a dedicated article body for long-form blog content, and meta for dates and captions. All Noto Sans, regular weight. Both size and line-height vary deliberately by context so each block reads at the right pace.

Labels

Two compact label roles — the kicker that sits beside headings (Outfit, uppercase) and the form label beside inputs (Noto Sans, sentence case).

Brand

Blue carries primary action and trust; green signals momentum and the Lumi product line. Each has lighter and darker companions for hover, depth, and emphasis.

Neutral ramp

Eleven steps from --color-grey-50 (almost-black panels) up to --color-grey-900 and --color-white (off-white text). The numbers reflect lightness, so in the dark theme high numbers are bright and low numbers are deep — the opposite of a Tailwind-style ramp.

Surfaces

Three semantic surfaces describe vertical depth: the page itself, raised solid panels, and the translucent header that floats over content as you scroll.

Text

Three named text colours cover the typographic hierarchy. Each is a semantic alias of a neutral step, so the ramp and the text tokens always read in lockstep.

Glass

Translucent panel tokens. Backgrounds are alpha-tinted versions of --color-grey-50; borders are alpha-tinted --color-grey-400. Always pair with backdrop-filter: blur(var(--glass-blur)) so the colour behind picks up texture. The chips below sit on a striped backdrop so the transparency reads.

Plus --glass-blur at 1rem — the partner value for every glass background. See Animations › Transitions for the duration tokens that animate the hover state on these surfaces.

Gradients

Two named gradients carry the brand. The static accent is the default headline highlight; the shimmer variant loops every four seconds across product-page heroes.

See Typography › Headings for both gradients applied to the Highlight roles.

Effects

A small set of single-purpose colour tokens that don't fit the brand or neutral ramps but earn their keep across the site.

The scale

The first six steps move in 0.25 rem increments for fine UI gaps; from --space-8 upward the gaps double in size to suit section padding and large layout rhythm. --space-2, --space-3, and --space-4 account for ~60 % of all uses across the production CSS.

Section rhythm

The .section utility wraps every major band of content. Vertical padding scales by viewport so sections breathe at desktop without dwarfing mobile content.

Source: src/css/global/layout.css. Anything that visually behaves as a section — the body of a landing band, a solution-page band, the contact form — should reach for .section rather than re-deriving these values.

Container

The .container utility caps the readable width and provides horizontal gutters that scale with the viewport. Maximum width is fixed at 80 rem; gutters track the section rhythm one step behind.

A handful of consumers cap their inner column tighter than the global container — .blog-post__content and .articles__intro at 48 rem for prose, .about-team__intro at 44 rem — for reading comfort. Those are local overrides on top of the global container, not separate breakpoints.

The scale

All six tokens shown at the same square size so the corner curvature reads at a glance. --radius-full is a sentinel value (9999 px) that produces a circle on a square or a pill on a wider element.

Where they're used

Each token has a clear role in the system. The mid-scale tokens (lg, xl, 2xl) carry most of the surface chrome on the site; the rest are precise UI primitives.

• --radius-sm Inline-code chips, recipe pills, copy buttons, blog tags — the smallest UI surfaces. Just enough rounding to feel deliberate.
• --radius-md Code blocks (.ds-code), small inset panels, the design-system TOC sublink. A neutral mid-step that rarely appears on production cards.
• --radius-lg The default button radius (.btn) and the default card-band radius — .cta-banner, .solutions__card, .surface-card samples in this very design system. The most-used corner on the site.
• --radius-xl Form inputs (.contact-form__input), and the design-system specimen chrome itself (.ds-family, .ds-role, .ds-swatch). Soft enough to feel friendly without losing rectangularity.
• --radius-2xl The hero radius for premium glass cards: .team-card, .contact-form-wrap, .final-cta__card, the about-page leadership portrait, the bid-enrichment / auto-tagging feature panels. Pillowy and brand-forward.
• --radius-full Pills, badges, avatar masks, and the radial pulse rings around the final-CTA button. Use for anything whose shape is the message.

Elevation

Each chip below sits on the same body-coloured stage so the shadow's spread, opacity, and blur read as they do in production. The ramp is non-linear: md doubles sm, lg nearly triples it, xl doubles lg.

Where they're used

Shadows mark interaction state, not resting elevation. Cards rest flat (border + glass) and lift only on hover; the glow is reserved for the primary action.

• --shadow-sm Single consumer: the API-demo header pill above the live demo. Rare elsewhere.
• --shadow-md Hover lift on small interactive cards: .card-grid__card, the classification-API feature cells, the contextual-audiences panels, the about-page contact pill. Also stacks under --shadow-glow on focused contact-form inputs and bid-enrichment hover states.
• --shadow-lg Hover lift on the larger glass cards — .team-card, the about-page leadership portrait, the bid-enrichment / auto-tagging feature panels, the achievements grid. The default "this card is being reached for" elevation.
• --shadow-xl Defined but unused in production. Removal candidate — flagged for a future sync: commit.
• --shadow-glow Brand-blue halo reserved for the primary action. Applied on hover to .btn--solid, .btn--outline, .btn--glass, the final-CTA button, and on focus to contact-form inputs (stacked with --shadow-md). Signals "this is the thing to click."

The vocabulary

Each sample shows the border applied at the same size on a body-coloured stage. Roles cluster around three intents: edge (glass ring), division (dashed dividers), and emphasis (brand-tinted, accent-left, top-stripe).