Design system · v2.9

Design system

This site practises what I sell: it runs on its own design system. Three tiers of tokens, BEM-named components, one simple rule for corners. Every value on this page is read live from the site’s stylesheets.

Generate your brand’s tokens

Three tiers of tokens

A raw value is never used directly. It gets a role, then a component reads that role. To change the blue everywhere, you touch a single token.

--ds-ref-*

–

Reference · declared

Raw values: palette, spacing scale, radii, typefaces, durations.

--ds-sys-*

–

System · declared

What a value is for: subtle background, secondary text, media radius. The only tier that changes with the theme.

--ds-comp-*

–

Component · declared

A component’s settings, wired to roles: the primary button background on hover.

One colour, from raw token to component

--ds-ref-color-blue-600
--ds-sys-color-brand
--ds-comp-badge-color-text-brand

Colour

One brand colour, one ink, a set of neutrals. Switch the theme: only the roles change value.

Palette (reference)

ref-color-blue-600
ref-color-ink-950
ref-color-neutral-0
ref-color-neutral-100
ref-color-neutral-200
ref-color-neutral-500
ref-color-neutral-850
ref-color-rainbow-1
ref-color-rainbow-5
ref-color-rainbow-3
ref-color-rainbow-4
ref-color-rainbow-2

Roles (system)

sys-color-bg-default
sys-color-bg-subtle
sys-color-bg-surface
sys-color-bg-inverse
sys-color-text-default
sys-color-text-muted
sys-color-brand
sys-color-border-default

Typography

Two roles, no more: Ancizar Serif for headings, Syne for everything else.

Headings · font.display · Ancizar Serif

Aa Bb 128

Text · font.body · Syne

I’m the designer who reads spreadsheets and the marketer who cares about typography.

Scale

font-size-12Brand design, design system
font-size-14Brand design, design system
font-size-16Brand design, design system
font-size-18Brand design, design system
font-size-20Brand design, design system
font-size-24Brand design, design system
font-size-30Brand design
font-size-36Brand design
font-size-48Brand design
font-size-60Brand design
font-size-72Brand design
font-size-96Brand design

Spacing

A 4 px base, named by multiples of 4: space-8 is 32 px. Sections breathe on two values, 96 and 128 px.

space-14 px
space-28 px
space-312 px
space-416 px
space-624 px
space-832 px
space-1040 px
space-1248 px
space-1664 px
space-2496 px
space-32128 px

The corner rule

What you click is square, what you look at is rounded.

control · 0Buttons, badges, menus, links
surface · 0Text cards, steps, testimonials
media · 8 pxThumbnails, videos, photos
media-lg · 16 pxLarge showcase pieces
MB
roundDots, avatars, switches

Components

Named in BEM: a block, its elements, its modifiers. Each one reads only its own tokens.

.ds-button --primary · --secondary · --rainbow · --sm --md --lg
.ds-button--inverse
.ds-badge · --brand --caps · --shimmer
OngoingPhase 1Recommended-20%
.ds-card · --featured --interactive

Brand Partner™

A text card: square, because you click it.

Discover

Card

.ds-card__body · __icon · __title · __text · __cta

.ds-media · --lg
.ds-link--underline · .ds-kbd
A link that underlines on hover⌘KS
Tools · .ds-palette · .ds-system

How it is maintained

The site ships like a product: every change follows the same path, and can be rolled back.

  1. 1

    One branch per version

    Each change starts from production, isolated.

  2. 2

    A preview

    Vercel publishes a test version on every change.

  3. 3

    A sign-off

    Nothing is merged without explicit approval.

  4. 4

    A tag and a note

    Every version is numbered and described.

Rules

  • No hand-written colour inside a component.
  • A component reads only its comp tokens.
  • Utility classes handle layout, not identity.
  • Every version keeps the same page height, unless a change is intended.

Changelog

  • v2.9This page: the design system, documented and public.
  • v2.8Navigation: next project, all projects, ⌘K palette.
  • v2.7Three-tier tokens, BEM components, corner rule, system mode.
  • v2.6.2The hover photo on “Maxime” follows the cursor.
  • v2.6.1Browser language, booking link on every call to action.
  • v2.6Cookie-free analytics, no banner, sharper positioning.
  • v2.5Indexable French, share images, performance.
  • v2.4Legal notice, JavaScript-free hero, accessibility.
  • v2.0Migration from Figma Make to Next.js, design unchanged.

Your brand deserves the same foundation.

A design system is what makes an identity last: every new page, every new format starts from the same rules. Let’s talk about yours.

Book a call