Ethan McNamara

Design

The system

The Signal Design System, read out of its own token file at build time. Every value on this page is parsed from tokens.css; every contrast number is computed from those values, in both WCAG 2 and APCA. Nothing here is transcribed.

tokens.css v2.1.0 111 tokens 3 tiers

Colour

Three tiers: primitives that name a hue, semantics that name a job, and component tokens that name a part. Only the middle tier is used in product code.

Semantic

  • --paper #ffffff
  • --paper-soft #fafafa
  • --paper-deep #f4f4f5
  • --ink #111111 18.88:1
  • --ink-soft #3f3f46 10.44:1
  • --ink-faint #71717a 4.83:1
  • --ink-ghost #d4d4d8 1.48:1
  • --accent #4f46e5 6.29:1
  • --accent-hover #4338ca 7.90:1
  • --hairline rgba(17, 17, 17, 0.10)

Indigo

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • soft

Zinc

  • 50
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
  • 950

Contrast, computed

WCAG 2 ratio and APCA lightness contrast for each text token on its paper, in both themes. AA body text needs 4.5:1; APCA wants roughly Lc 75 for small text and Lc 60 for large.

ThemeTokenOnWCAG 2APCA LcVerdict
Light --ink --paper 18.88:1 105.4 Passes AA for body
Light --ink-soft --paper 10.44:1 94.3 Passes AA for body
Light --ink-faint --paper 4.83:1 73.5 Passes AA for body
Light --accent --paper 6.29:1 80.5 Passes AA for body
Dark --ink --paper 17.43:1 100.3 Passes AA for body
Dark --ink-soft --paper 12.96:1 80.3 Passes AA for body
Dark --ink-faint --paper 7.48:1 51.4 Passes AA for body
Dark --accent --paper 3.05:1 21.0 Large text only

Type

Geist for the interface, Geist Mono for anything a machine produced. The ramp below is set at the token's own size, live.

  • Aa Signal Studio 0123 --text-display · clamp(2.75rem, 1.8rem + 4.2vw, 5.5rem)
  • Aa Signal Studio 0123 --text-title · clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem)
  • Aa Signal Studio 0123 --text-section · clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem)
  • Aa Signal Studio 0123 --text-heading · 1.25rem
  • Aa Signal Studio 0123 --text-body-lg · 1.0625rem
  • Aa Signal Studio 0123 --text-body · 0.9375rem
  • Aa Signal Studio 0123 --text-body-sm · 0.8125rem
  • Aa Signal Studio 0123 --text-caption · 0.75rem
  • Aa Signal Studio 0123 --text-label · 0.6875rem

Space

A base-four scale. Every gap in the product is one of these 12 values.

  • --space-1 4px
  • --space-2 8px
  • --space-3 12px
  • --space-4 16px
  • --space-5 20px
  • --space-6 24px
  • --space-7 32px
  • --space-8 40px
  • --space-9 48px
  • --space-10 64px
  • --space-11 80px
  • --space-12 96px

Shape

  • --radius-sm 4px
  • --radius-md 6px
  • --radius-lg 10px
  • --radius-pill 999px

Motion

Four durations and two curves. The site you are reading uses the same values — see the motion room for each one playing.

TokenValueUsed for
--ease-out cubic-bezier(0.23, 1, 0.32, 1) Anything entering or leaving
--ease-in-out cubic-bezier(0.77, 0, 0.175, 1) Anything moving across the screen
--motion-instant 80ms Press feedback and anything the keyboard triggers
--motion-fast 140ms Hover, small reveals
--motion-base 220ms State arrival — the default
--motion-slow 400ms Sheets and drawers only
--ease-standard cubic-bezier(0.23, 1, 0.32, 1) —

Provenance

Where this came from

The token file is the Signal Design System's own, at v2.1.0, copied without modification. A build check compares it byte for byte against the canonical copy in the design-system repository, so this page cannot drift from the product.

This website has a second, separate token set for its own chrome — different colours, three type families instead of two, no accent at all. That separation is deliberate: the work should look like the work, and the frame around it should not compete. Where you see indigo on this site, you are looking at Signal, not at me.