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. IBM Plex Sans is a modern, elegant sans-serif font designed for digital content.

    Font Families: IBM Plex 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

14px to 16px

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

Step min 2

Step min 1

16px to 18px

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

Step min 1

Step 0

18px to 20px

var(--size-step-0)

Step 0

Step 1

20px to 24px

var(--size-step-1)

Step 1

Step 2

24px to 28px

var(--size-step-2)

Step 2

Step 3

28px to 34px

var(--size-step-3)

Step 3

Step 4

32px to 40px

var(--size-step-4)

Step 4

Step 5

38px to 48px

var(--size-step-5)

Step 5

Step 6

44px to 56px

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)