Style Guide

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

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. The first two colors are used by the theme toggle script to set the theme color.

  • var(--color-base-dark)

  • var(--color-base-light)

  • var(--color-primary-highlight)

  • var(--color-secondary-highlight)

  • var(--color-tertiary-highlight)

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.

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

    var(--font-display)

  • Base

    Base font stack for body text. Inclusive Sans is a free, friendly and clean typeface made for enhanced legibility. oliviaking.com/inclusive-sans

    Font Families: Atkinson Hyperlegible, Inclusive Sans, 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.

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

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)