The design system

Colour

Showing the live theme. Both values are listed; text pairs meet 4.5:1 and borders 3:1 in each.

• --paper

  Sunrise: #f7f3ea

  Midnight: #0e1320

  Page background in both themes. Text and marks read on it: ink, ink-muted, brand, success.

• --surface

  Sunrise: #ffffff

  Midnight: #161d2e

  Cards, form fields and raised panels that sit on paper. Same text pairs as paper.

• --ink

  Sunrise: #14181f

  Midnight: #ece8df

  Primary text on paper and surface (13.7:1 or better in both themes).

• --ink-muted

  Sunrise: #5a6270

  Midnight: #a3abba

  Secondary text, captions and helper copy on paper and surface (5.5:1 or better).

• --line

  Sunrise: #d9d3c4

  Midnight: #26304a

  Decorative hairlines and dividers only. Never the sole border of a control: it is below 3:1.

• --border-strong

  Sunrise: #8a8575

  Midnight: #6b7899

  Borders of inputs, buttons and cards that must be perceivable (3:1 or better on paper and surface in both themes).

• --brand

  Sunrise: #a52320

  Midnight: #f0694d

  Shrine red, matched to the red logo artwork. The single accent: primary buttons and links. Text and fills on paper and surface (5.4:1 or better).

• --brand-hover

  Sunrise: #861b18

  Midnight: #ff8566

  Hover and pressed state of brand fills and links. Stronger than brand in both themes.

• --on-brand

  Sunrise: #ffffff

  Midnight: #0e1320

  Text and icons on a brand or brand-hover fill (6:1 or better). Never literal white in Midnight.

• --success

  Sunrise: #0b6e7f

  Midnight: #5cc8d9

  Confirmed and sent states, always with a word or icon. Teal-blue so it is never read against red by hue alone. On paper and surface (5.3:1 or better).

• --danger

  Sunrise: #a52320 (= brand)

  Midnight: #f0694d (= brand)

  Error text and error borders. Shares the brand red on purpose; always paired with an icon and a written message, and never shown beside a brand button.

• --focus-ring

  Sunrise: #14181f (= ink)

  Midnight: #ece8df (= ink)

  Keyboard focus outline: 2px solid with a 2px gap of paper. Solid, 13:1 or better on every surface.

Type

Fraunces for headlines, Plus Jakarta Sans for interface and copy, JetBrains Mono for labels and data. Display sizes scale fluidly with the screen.

Spacing and radius

• space-14px
• space-28px
• space-312px
• space-416px
• space-524px
• space-632px
• space-748px
• space-864px
• space-996px
• space-10128px

• radius-sm4px
• radius-md8px
• radius-lg16px
• radius-pill999px

Components

The supplied logo artwork, unmodified: red on surface in Sunrise, white in Midnight.