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.
-
var(--color-dark)
#161717 -
var(--color-grey-dark)
#525252 -
var(--color-grey)
#d4d4d4 -
var(--color-grey-light)
#f5f5f5 -
var(--color-light)
#FFFFFF -
var(--color-pink)
#C766A1 -
var(--color-blush)
#F07392 -
var(--color-salmon)
#FF8B7F -
var(--color-tangerine)
#F49762 -
var(--color-golden)
#FFD164 -
var(--color-apple)
#A1D47B -
var(--color-caribbean)
#00C9A9 -
var(--color-aqua)
#0084A3 -
var(--color-blue)
#0083CB -
var(--color-lavender)
#966FC4 -
var(--color-pink-light)
#F9F0F6 -
var(--color-blush-light)
#FEF1F4 -
var(--color-salmon-light)
#FFF3F2 -
var(--color-tangerine-light)
#FEF5EF -
var(--color-golden-light)
#FFFAF0 -
var(--color-apple-light)
#F6FBF2 -
var(--color-caribbean-light)
#E6FAF6 -
var(--color-aqua-light)
#E6F3F6 -
var(--color-blue-light)
#E6F3FA -
var(--color-lavender-light)
#F5F1F9
Custom colors
in variables.css. Some only change for dark theme.
-
--color-text -
--color-bg -
--color-accent -
--color-success -
--color-alert -
--color-warning -
--color-info
Fonts
-
Base
System fonts for body copy and globally set text.
Font Families: Geologica, Inter, Roboto, Helvetica Neue, Arial, sans-serif
var(--font-base) -
Mono
Monospace font for code and preformatted text.
Font Families: RobotoMono, 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. For example, for web, the should be converted to REM units (pixelSize / baseSize). Some steps are not considered in this design.. Fluid type and space scales were generated with Utopia.
Step min 1 |
13px to 15px var(--size-step-min-1)
|
Step min 1 |
|---|---|---|
Step 0 |
16px to 19px var(--size-step-0)
|
Step 0 |
Step 1 |
19px to 24px var(--size-step-1)
|
Step 1 |
Step 2 |
23px to 30px var(--size-step-2)
|
Step 2 |
Step 3 |
28px to 37px var(--size-step-3)
|
Step 3 |
Step 6 |
48px to 72px var(--size-step-6)
|
Step 6 |
Step 9 |
83px to 142px var(--size-step-9)
|
Step 9 |
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 |
8px to 10px var(--space-2xs)
|
|
|---|---|---|
XS |
12px to 15px var(--space-xs)
|
|
S |
16px to 20px var(--space-s)
|
|
M |
32px to 40px var(--space-m)
|
|
L |
48px to 60px var(--space-l)
|
|
XL |
80px to 100px var(--space-xl)
|
|
2XL |
128px to 160px var(--space-2xl)
|
|
3XL |
208px to 260px var(--space-3xl)
|
|
XS - S |
12px to 20px var(--space-xs-s)
|
|
S - M |
16px to 40px var(--space-s-m)
|
|
S - L |
16px to 60px var(--space-s-l)
|
|
M - L |
32px to 60px var(--space-m-l)
|
|
L - XL |
48px to 100px var(--space-l-xl)
|
|
L - 2xl |
48px to 150px var(--space-l-2xl)
|
|
XL - 2XL |
48px to 80px var(--space-xl-2xl)
|
|
2XL - 3XL |
64px to 120px var(--space-2xl-3xl)
|