Design Tokens
Color palette
and system.
Every value is tuned for comfortable reading and WCAG AA compliance. Click any swatch to copy its hex.
01
Foundation
Ergonomic near-black and off-white foundations — high contrast without the eye strain of pure extremes.
#1C2E26
Main Darker
#233A2F
Main Dark
#82BD02
Primary Color
#FAFAFA
Neutral
Type System
Typography & Scale
Two typefaces, one cohesive system. All sizes in REM, based on a 16px root. Hover any row to copy values.
Aa
DM Sans
600
Aa
Inter
400
500
600
Headings — DM Sans
| Element | Size (REM / PX) | Weight / Height | Tracking | Extras | |
|---|---|---|---|---|---|
| Lorem ipsum dolor sit amet consectetur. Tortor. | <h1> |
clamp(2.25rem, 1.7308rem + 2.3077vw, 3.75rem); 36px → 60px | 600 / 1.02 | 0 | |
| Lorem ipsum dolor sit amet consectetur. Tortor. | <h2> |
clamp(1.875rem, 1.5505rem + 1.4423vw, 2.8125rem); 30px → 45px | 600 / 1.1 | 0.02em | |
| Lorem ipsum dolor sit amet consectetur. Tortor. Library | <h3> |
clamp(1.625rem, 1.4519rem + 0.7692vw, 2.125rem); 26px → 34px | 500 / 1.15 | 0 | |
| Lorem ipsum dolor sit amet consectetur. Tortor. | <h4> |
clamp(1.375rem, 1.2019rem + 0.7692vw, 1.875rem); 22px → 30px | 600 / 1.3 | 0 | |
| Lorem ipsum dolor sit amet consectetur. Tortor. | <h5> |
clamp(1.1875rem, 1.101rem + 0.3846vw, 1.4375rem); 19px → 23px | 600 / 1.2 | 0 | |
| Lorem ipsum dolor sit amet consectetur. Tortor. | <h6> |
clamp(1rem, 0.9567rem + 0.1923vw, 1.125rem); 16px → 18px | 700 / 1.25 | 0.15em | uppercase |
Body Text — Inter 400
| Element | Size (REM/PX) | Weight / Height | Tracking | |
|---|---|---|---|---|
| Lorem ipsum dolor sit amet consectetur. Tortor. | Body Large |
clamp(1.125rem, 1.0817rem + 0.1923vw, 1.25rem); 18px – 20px | 400 / 1.7 | normal |
| Lorem ipsum dolor sit amet consectetur. Tortor. | Body |
clamp(1rem, 0.9784rem + 0.0962vw, 1.0625rem); 16px → 17px | 400 | |
| Lorem ipsum dolor sit amet consectetur. Tortor. | Body Small |
clamp(0.875rem, 0.8534rem + 0.0962vw, 0.9375rem); 14px → 15px | 400 |
