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)

  • #faf8f7
    var(--color-beige-100)

  • #e6e4e3
    var(--color-beige-200)

  • #afadad
    var(--color-beige-300)

  • #827f7e
    var(--color-beige-400)

  • #666261
    var(--color-beige-500)

  • #4a4745
    var(--color-beige-600)

  • #3d3a38
    var(--color-beige-700)

  • #302d2c
    var(--color-beige-800)

  • #181514
    var(--color-beige-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)

  • #hsl44-85percent-65percent
    var(--color-highlight-yellow)

  • #ebcb77
    var(--color-highlight-yellow-subdued)

  • #c22a0f
    var(--color-highlight-red)

  • #b3412d
    var(--color-highlight-red-subdued)

  • #f33412
    var(--color-highlight-red-alt)

  • #e15139
    var(--color-highlight-red-alt-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. Now in its third version, Literata is a distinct variable font family for digital text. Originally created as the brand typeface for Google Play Books, it exceeds the strict needs of a comfortable reading experience on any device, screen resolution, or font size.

    Font Families: Literata, serif

    var(--font-display)

  • Base

    Base font stack for body text. Source® Sans Pro, Adobe's first open source typeface family, was designed by Paul D. Hunt. It is a sans serif typeface intended to work well in user interfaces.

    Font Families: Source Sans, 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

15px to 19px

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

Step min 2

Step min 1

17px to 23px

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

Step min 1

Step 0

19px to 28px

var(--size-step-0)

Step 0

Step 1

21px to 34px

var(--size-step-1)

Step 1

Step 2

24px to 40px

var(--size-step-2)

Step 2

Step 3

27px to 48px

var(--size-step-3)

Step 3

Step 4

30px to 58px

var(--size-step-4)

Step 4

Step 5

34px to 70px

var(--size-step-5)

Step 5

Step 6

39px to 84px

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)