Style Guide

All design tokens can be found in src/_data/designTokens.
This includes all baseline fonts, colors, sizes, and spacing.

Buttons

Colors

Foundational theme tones. Composed into the semantic theme variables in variables.css.

  • #495464
    var(--color-base-darkest)

  • #bbbfca
    var(--color-base-dark)

  • #dddee8
    var(--color-base-light)

  • #f4f4f2
    var(--color-base-lightest)

Gray scale generated from a single base in OKLCH space. Includes the standalone gray-250.

  • #f7f8fb
    var(--color-gray-100)

  • #e3e5e7
    var(--color-gray-200)

  • #c8cacc
    var(--color-gray-250)

  • #acaeb1
    var(--color-gray-300)

  • #7d8085
    var(--color-gray-400)

  • #606368
    var(--color-gray-500)

  • #44484d
    var(--color-gray-600)

  • #383b3f
    var(--color-gray-700)

  • #2b2e32
    var(--color-gray-800)

  • #141619
    var(--color-gray-900)

Orange scale generated from a single base in OKLCH space.

  • #ffece1
    var(--color-orange-100)

  • #ffdec3
    var(--color-orange-200)

  • #ffb78a
    var(--color-orange-300)

  • #f68f5a
    var(--color-orange-400)

  • #d0621e
    var(--color-orange-500)

  • #a73c00
    var(--color-orange-600)

  • #8c2100
    var(--color-orange-700)

  • #711a00
    var(--color-orange-800)

  • #320100
    var(--color-orange-900)

Each has a chroma-reduced subdued variant used in dark theme.

  • #644b49
    var(--color-red)

  • #614d4b
    var(--color-red-subdued)

  • #245375
    var(--color-blue)

  • #2f536e
    var(--color-blue-subdued)

  • #626449
    var(--color-green)

  • #62644e
    var(--color-green-subdued)

Custom colors

in variables.css. Some only change for dark theme.

  • --color-text

  • --color-text-accent

  • --color-bg

  • --color-bg-accent

  • --color-bg-accent-2

  • --color-accent-orange

  • --color-accent-blue

  • --color-accent-green

Gradients

  • --gradient-slate

  • --gradient-conic

  • --gradient-stripes

Fonts

  • display

    Source serif 700 with Georgia Bold as fallback

    Font Families: Source Serif, Source Serif Fallback, serif

    var(--font-display)

  • base

    Source Sans 3 VF with Arial as fallback

    Font Families: Source Sans, Source Sans Fallback, sans-serif

    var(--font-base)

  • mono

    Source Code Pro with Courier New as fallback

    Font Families: Source Code Pro, Source Code Pro Fallback, Dank Mono, Fira Code, Fira Mono, Menlo, Consolas, Monaco, monospace

    var(--font-mono)

Sizes

Fluid type and space scales were generated with Utopia.

step-min-2

13px to 16px

var(--size-step-min-2)

step-min-2

step-min-1

16px to 22px

var(--size-step-min-1)

step-min-1

step-0

19px to 28px

var(--size-step-0)

step-0

step-1

23px to 35px

var(--size-step-1)

step-1

step-2

27px to 44px

var(--size-step-2)

step-2

step-3

33px to 55px

var(--size-step-3)

step-3

step-4

40px to 68px

var(--size-step-4)

step-4

step-5

47px to 86px

var(--size-step-5)

step-5

step-6

56px to 107px

var(--size-step-6)

step-6

Spacing

Fluid type and space scales were generated with Utopia.

3xs

2px to 3px

var(--space-3xs)

2xs

3px to 5px

var(--space-2xs)

xs

5px to 7px

var(--space-xs)

s

10px to 14px

var(--space-s)

m

14px to 21px

var(--space-m)

l

19px to 31px

var(--space-l)

xl

38px to 56px

var(--space-xl)

2xl

57px to 84px

var(--space-2xl)

3xl

95px to 140px

var(--space-3xl)

xs-s

5px to 14px

var(--space-xs-s)

s-m

10px to 21px

var(--space-s-m)

m-l

14px to 31px

var(--space-m-l)

l-xl

19px to 56px

var(--space-l-xl)

l-2xl

19px to 84px

var(--space-l-2xl)

xl-2xl

38px to 84px

var(--space-xl-2xl)

2xl-3xl

57px to 140px

var(--space-2xl-3xl)