Style Guide

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

Buttons

Colors

Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print. neutral and vibrant colors are converted to color palettes, fixed colors are kept as they are

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

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

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

  • #808080
    var(--color-gray-400)

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

  • #484848
    var(--color-gray-600)

  • #3a3a3a
    var(--color-gray-700)

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

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

  • #dd4462
    var(--color-pink)

  • #ce5769
    var(--color-pink-subdued)

  • #4467dd
    var(--color-blue)

  • #4d6cc8
    var(--color-blue-subdued)

  • #fbbe25
    var(--color-gold)

  • #f1c15b
    var(--color-gold-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-primary

  • --color-secondary

  • --color-tertiary

Gradients

  • --gradient-rainbow

  • --gradient-conic

  • --gradient-stripes

Fonts

  • Display

    Display font stack for headings and large text. Redhat Display is made for headlines and big statements, are low contrast and spaced tightly, with a large x-height and open counters.

    Font Families: Redhat, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif

    var(--font-display)

  • Base

    Base font stack for body text. Atkinson Hyperlegible, named after the founder of the Braille Institute, has been developed specifically to increase legibility for readers with low vision, and to improve comprehension.

    Font Families: Atkinson Hyperlegible, system-ui, sans-serif

    var(--font-base)

  • Mono

    Monospace font for code and preformatted text.

    Font Families: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace

    var(--font-mono)

Sizes

A minimum and maximum text size size allows you to pick the right size from a ratio, depending on the context size. The min and max sizes are in pixels and should be converted to appropiate sizes, per context. 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

Consistent spacing sizes, based on a ratio, with min and max sizes. This allows you to set spacing based on the context size. For example, min for mobile and max for desktop browsers.
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 28px

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

38px to 84px

var(--space-l-2xl)

XL - 2XL

57px to 140px

var(--space-xl-2xl)

2XL - 3xl

95px to 224px

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