Guide

Styleguide

Color

Colour palette

  • --text-primary #1C1917 Primary text — warm stone
  • --text-secondary #57534E Secondary text — muted stone
  • --text-tertiary #78716C Tertiary text — softest stone
  • --text-on-dark #F0EDE8 Text on dark surfaces
  • --text-on-dark-secondary #A8A29E Secondary text on dark
  • --surface-primary #FFFCF9 Primary surface — page background
  • --surface-secondary #F5F0EB Secondary surface — cards
  • --surface-tertiary #EDE8E3 Tertiary surface — subtle wells
  • --surface-dark #1A1A1E Dark surface — masthead / on-dark sections
  • --surface-dark-elevated #252530 Elevated dark surface
  • --accent-primary #C23D2E Primary action / signal red
  • --accent-primary-hover #A83428 Primary action — hover
  • --accent-secondary #8B6B4A Secondary accent — warm bronze
  • --accent-tertiary #4A6B6E Tertiary accent — slate teal
  • --status-success #3D7A4A Status — success
  • --status-warning #B8860B Status — warning
  • --status-error #C23D2E Status — error
  • --status-info #4A6B6E Status — info
  • --border-light #E0DAD4 Border — light divider
  • --border-medium #C4BCB4 Border — medium
  • --border-dark #3A3A42 Border — dark divider

Typography

Typography

Headings

Heading 1 — display voice

Heading 2 — section voice

Heading 3 — subsection

Heading 4 — supporting

Heading 5 — accent
Heading 6 — utility

Editor classes

.lead — the lead paragraph. Lighter weight, larger size, used to open an article or surface a key idea.

.overline — uppercase mono label

The future is a long quiet conversation between humans and the systems they trust.

.blockquote — pulled quote with display serif

.caption — small italic text used for image captions and asides.

“A pull-quote draws the eye to a single sentence; .pull-quote centres it and breathes around it.”

“.pull-quote-accent left-aligns the quote behind an accent rule and constrains it to 75% of the column.”

Elements

General elements

Inline

A paragraph with an inline link, some bold text, a touch of italic emphasis, and an inline code span.

Buttons

Lists

  • Unordered list item — first
  • Unordered list item — second
  • Unordered list item — third
  1. Ordered list item — first
  2. Ordered list item — second
  3. Ordered list item — third

Table

Token Role
--accent-primary Primary action / signal red
--surface-dark Masthead / on-dark sections

Form inputs