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)#fbf8f6
var(--color-deep-chocolate-100)#e8e4e1
var(--color-deep-chocolate-200)#b1adab
var(--color-deep-chocolate-300)#857f7b
var(--color-deep-chocolate-400)#69615e
var(--color-deep-chocolate-500)#4e4641
var(--color-deep-chocolate-600)#403935
var(--color-deep-chocolate-700)#322c29
var(--color-deep-chocolate-800)#1a1512
var(--color-deep-chocolate-900)#f9f8f8
var(--color-cream-100)#e5e4e4
var(--color-cream-200)#aeaead
var(--color-cream-300)#81807f
var(--color-cream-400)#646362
var(--color-cream-500)#484746
var(--color-cream-600)#3b3a39
var(--color-cream-700)#2e2e2d
var(--color-cream-800)#161615
var(--color-cream-900)#eff3ef
var(--color-sage-green-100)#e6eee5
var(--color-sage-green-200)#c8d5c7
var(--color-sage-green-300)#a4b3a3
var(--color-sage-green-400)#7c8b7b
var(--color-sage-green-500)#596858
var(--color-sage-green-600)#435242
var(--color-sage-green-700)#354134
var(--color-sage-green-800)#121811
var(--color-sage-green-900)#f3f0fa
var(--color-dusty-purple-100)#eee7ff
var(--color-dusty-purple-200)#d6c9f2
var(--color-dusty-purple-300)#b4a5d2
var(--color-dusty-purple-400)#8d7cac
var(--color-dusty-purple-500)#695a87
var(--color-dusty-purple-600)#53436f
var(--color-dusty-purple-700)#423559
var(--color-dusty-purple-800)#191126
var(--color-dusty-purple-900)#722f37
var(--color-rich-burgundy)#6b353a
var(--color-rich-burgundy-subdued)#d4a574
var(--color-golden-yellow)#cda781
var(--color-golden-yellow-subdued)#3d2817
var(--color-dark-brown-text)#3a291c
var(--color-dark-brown-text-subdued)#f8f6f3
var(--color-light-cream-text)
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) |