Design system

Style Guide


Reference for typography, fonts, colour tokens, and how to use them in sections.

Typography

Use semantic HTML with the matching class. Do not add bespoke font-size values in sections.

  • .h13.7em

    Heading one

  • .h2var(--h2) · clamp(28px, 3.5vw, 70px)

    Heading two

  • .h3var(--h3) · clamp(25px, 3vw, 2.5em)

    Heading three

  • .h4var(--h4) · clamp(24px, 2vw, 40px)

    Heading four

  • .h5var(--h5) · clamp(20px, 1.7vw, 36px)

    Heading five

  • .h6var(--h6) · uppercase mono label

    Heading six

  • .h714px

    Heading seven — small UI text

  • .h80.8em

    Heading eight

Body & utilities

  • body — var(--body) · clamp(16px, 1.1vw, 22px)
  • .smaller-text — var(--text-size-small)
  • .fractul — Fractul heading font
  • .chunky-heading — var(--hero-h1-title)
  • .bold / .medium — font-weight 600 / 500

Colours

Use CSS variables — never hard-code hex in components. Page text and background can be overridden per page via Sanity.

  • Red#e44620 · P3: color(display-p3 0.89 0.27 0.13)
  • Black#000
  • Dark grey#1c2b2b
  • Mid grey#968D88
  • Light grey#f5f5f5
  • White#fff
  • TextPage-level (default: var(--black))
  • BackgroundPage-level (default: var(--light-grey))

Display P3 red

On wide-gamut displays, --red automatically upgrades to a richer red via color(display-p3 0.89 0.27 0.13). SDR fallback is #e44620. 

@media (color-gamut: p3) {
  :root {
    --red: color(display-p3 0.89 0.27 0.13);
  }
}

How to use: reference var(--red) for accents, buttons in .dark sections, circles on bold text, borders, and fills. Do not duplicate the P3 block in components — it lives in main.css.

var(--red)Appears more vivid on P3-capable screens.

Background utilities

  • .white — white background
  • .light-grey — light grey background
  • .dark — inverts buttons; red CTA on dark sections

Fonts

Brand typefaces used across the site. Download files for offline reference or design work.

  • Monument Grotesk

    Body copy and headings

    --body-font · --heading-font

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • Fractul

    Display headings and hero type

    --fractul-font

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • FK Grotesk Mono

    Labels, captions, and .h6 uppercase text

    --mono

    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

  • Stark Sans

    Numbers and numeric UI

    --numbers

    0123456789 $1,234,567.89

  • Quentin

    Handwritten accent type

    --handwritten

    Registix turns inventory into opportunity.