Subdial · Design System · v2026.04

Premium.
Precise.
Engineered.

The working system behind the Subdial web app. Tokens, primitives, patterns, and surfaces — used as written.

Components Tokens
Version
2026.04
Scope
Web · Cloudflare · Astro
Primitives
3
Patterns
1
Surfaces
12
Signal
#FD5903
01 / Type

Display for authority. Body for clarity. Mono for data.

02 / Colour

Warm neutrals. One signal. No accent inflation.

03 / Surface

Glass on motion. Ink on commerce. Mist between.

Brand

Restraint, applied.

Surfaces stay quiet so listings, prices, and references read first. Glass and motion are reserved for hero, membership, and dark editorial moments. Account, dashboard, and commerce surfaces hold still — colour and CTA do the work.

Home Hero video · search · brand chips · SD50 readout. Buy Search · filters · listing grid · sort. Sell Scrambling headline · Trustpilot · two routes.

Typography

Type.

Three families. Defined roles. Display for authority, body for clarity, mono for references and data.

Display

Hanken Grotesk

--sd-font-display

Body

Epilogue

--sd-font-body

Mono

DM Mono

--sd-font-mono
  1. --sd-text-d1 700 · clamp(3rem, 7vw, 7.5rem)

    Premium

  2. --sd-text-d2 700 · clamp(2rem, 4vw, 5rem)

    Precise

  3. --sd-text-d3 600 · clamp(1.5rem, 2.5vw, 3rem)

    Engineered

  4. --sd-text-h1 600 · 1.75rem

    Section heading

  5. --sd-text-h2 600 · 1.375rem

    Sub-section

  6. --sd-text-body 400 · 1rem

    A working specification for the Subdial web app.

  7. --sd-text-sm 400 · 0.875rem

    Small body / helper text.

  8. --sd-text-mono 400 · 0.875rem

    REF/126610LN · 41MM · FULL SET

  9. --sd-text-label 500 · 0.6875rem

    AVAILABLE NOW

Colour

Colour.

Nine tokens. One signal. Click any swatch to copy its hex.

Tokens

Spacing, geometry, motion.

4 px base. Twelve spacing steps. Five radii. One easing. Use the named tokens — never raw values.

Spacing

12 steps · 4 → 128 px
  • --sd-space-1 4px
  • --sd-space-2 8px
  • --sd-space-3 12px
  • --sd-space-4 16px
  • --sd-space-6 24px
  • --sd-space-8 32px
  • --sd-space-10 40px
  • --sd-space-12 48px
  • --sd-space-16 64px
  • --sd-space-20 80px
  • --sd-space-24 96px
  • --sd-space-32 128px

Radius

5 steps · 2 → ∞ px
  • --sd-radius-sm 2px · Inputs, chips.
  • --sd-radius-md 4px · Tags, micro-surfaces.
  • --sd-radius-lg 8px · Cards, panels.
  • --sd-radius-xl 20px · Hero panels, image wells.
  • --sd-radius-full 9999px · Buttons, pills.

Motion

cubic-bezier(0.2, 0, 0, 1)
  • --sd-transition-fast 120ms · Hover, focus, copy ack.
  • --sd-transition-base 200ms · Default. Buttons, fields, panels.
  • --sd-transition-slow 350ms · Image scale, surface enter.

Components

Components.

Live primitives, patterns, and app components. Names match imports.

Primitive Button

variant · primary, secondary, tertiary, text, text-signal, glass, login, register
size · sm, md, lg

Glass action Button variant="glass-w-icon-dark"
Primitives Field · PhoneField
We'll only contact you about this listing.
+44
Reference required.

States · default · helper · error · disabled · mono

Component WatchCard
Component BrandedLoader

Booking your collection

One moment — we're confirming your booking.

Securing your slot with the carrier. This usually takes a few seconds.

  • Securing your offer
  • Booking your collection
  • Finalising the details

eyebrow · title · body · steps[] · compact
Used for booking submission + agreement signing.

Component BrandedLoader compact
  • Drafting your agreement
  • Preparing the signature panel
  • Almost there

compact — smaller mark + tighter spacing for dialogs (no title; the modal header supplies it).

Library

Library.

Tier, name, path, signature. Use them as written.

  • Primitive Button src/ui/primitives/Button.astro variant · size · href
  • Primitive Field src/ui/primitives/Field.astro as · type · label · helper · error · disabled · mono
  • Pattern PhoneField src/ui/patterns/PhoneField.astro id · name · value
  • Component WatchCard src/components/WatchCard.astro listing · badge · saveable · saved · href
  • Component ShaderWallpaper src/components/ShaderWallpaper.astro class · slot
  • Component BrandedLoader src/components/booking/BrandedLoader.tsx eyebrow · title · body · steps · compact