Style guide

The type, color and spacing every section is built from, read from the tokens themselves.

Type scale

Satoshi, one family, set at regular and medium; a bold (700) exists only for small text that medium cannot make read as bold: emphasis in copy, or the weight-bold utility. Nib Pro appears only as the accent inside a heading. Every size is set in pixels at a 320 and a 1440 viewport and interpolates between them. The right-hand number is the size on your screen right now.

  1. Heading

    Style
    display
    Range
    64–90
    Now

  2. Heading

    Style
    h1
    Range
    40–64
    Now

  3. Heading

    Style
    h2
    Range
    32–48
    Now

  4. Heading

    Style
    h3
    Range
    28–32
    Now

  5. Heading

    Style
    h4
    Range
    22–24
    Now

  6. Heading

    Style
    h5
    Range
    20–22
    Now

  7. Heading

    Style
    h6
    Range
    18–20
    Now

  8. Body text comes in three sizes. Each carries its own line height, letter spacing and margins, so a paragraph reads the same wherever it lands.

    Style
    large
    Range
    18–20
    Now

    Main is the default. It is what the body is set in, and what every component inherits unless a variant says otherwise.

    Style
    main
    Range
    16–18
    Now

    Small is for labels, captions and the lines beside a control. It never drops below fourteen pixels, so it stays readable.

    Style
    small
    Range
    14–16
    Now

Color

A component asks for a role, and the theme it sits in answers. Mint is the brand surface; Antler Red is the button and nothing else.

  • light-100#ffffff
  • light-200#f9f7f5
  • light-300#f0ebe6
  • light-400#e1d7ce
  • dark-600#2f4f52
  • dark-700#203a3d
  • dark-800#112629
  • dark-900#0c1f21
  • brand-500#baded8
  • brand-700#1d6f78
  • cta-500#ed4746
  • black#1c1a1a
  • maroon#46061d

Spacing

Eight steps, each a range like the type: the small end at a 320 viewport, the large at 1440.

  • space-16–8
  • space-210–12
  • space-314–16
  • space-420–24
  • space-528–32
  • space-632–40
  • space-736–48
  • space-840–64

Radius

Small for controls, main for surfaces, round for pills.

  • radius-small0.25rem
  • radius-main0.5rem
  • radius-round100vw

Components

Built from the tokens above and nothing else. Change a token and every one of these follows.

Chips
Updates

Card

Every card is one component

Cover, stacked or plain, it is the same card with a different variant.

See every variant

Themes

Three themes, each one a class. The block below is the same markup three times over. Nothing inside it changes; the theme it sits in answers every color it asks for.

  • Theme light

    Warm off-white rather than pure white, so photography and the red button both sit on it.

    • background
    • background-2
    • background-3
    • text
    • border

  • Theme dark

    Three teal-black surfaces step up from the page towards the reader. Fund sites open and close on it.

    • background
    • background-2
    • background-3
    • text
    • border

  • Theme brand

    Mint as a light surface with black text. The button stays Antler Red, so it still stands out.

    • background
    • background-2
    • background-3
    • text
    • border