STYLE GUIDE
Trace Design Tokens
One slate ground, one action colour, and status colours used only where something is genuinely a state. Typography is Archivo, with IBM Plex Mono for micro labels.
STYLE GUIDE
Trace Design Tokens
One slate ground, one action colour, and status colours used only where something is genuinely a state. Typography is Archivo, with IBM Plex Mono for micro labels.
Colors
GROUND
Base
#F1F2F4 · page background
Card
#FFFFFF · cards, forms, menus
Well
#E2E5E9 · inputs, chips, image wells
Line
#C6CBD2 · borders, dividers
Inverted
#16191D · footer, dark panels
ACTION & TEXT
Action
#2D3239 · buttons, accents, ticks
Text
#101114 · headings and strong copy
Text muted
#5A6472 · body copy
Text soft
#707C8F · meta, captions
On dark
#A9B1BC · body copy on #16191D
SLATE RAMP
Slate 400
#8D97A5
Slate 500
#707C8F
Slate 600
#5A6472
Slate 700
#434B56
Slate 800
#2D3239
STATUS — ONLY FOR REAL STATES
Critical
#A33228 · alerts, errors
Critical wash
#FADAD6 · behind critical text
Success
#1B6E45 · resolved, verified
Success wash
#D9F0E4 · behind success text
Warning wash
#FBE7C9 with #8A5514 text
Typefaces
Aa
Archivo
Headings, body and UI. Weights 400 / 500 / 600 / 700.
Aa
IBM Plex Mono
Eyebrows, meta labels and code. Weights 400 / 500.
Headings
This is H1
Font: Archivo
Size: H1 · 62px
Weight: Medium · 500
Line height: 108
Letter spacing: X Small · -1.5px
Size: H1 · 62px
Weight: Medium · 500
Line height: 108
Letter spacing: X Small · -1.5px
This is H2
Font: Archivo
Size: H2 · 42px
Weight: Medium · 500
Line height: 115
Size: H2 · 42px
Weight: Medium · 500
Line height: 115
This is H3
Font: Archivo
Size: H3 · 31px
Weight: Medium · 500
Line height: 122
Size: H3 · 31px
Weight: Medium · 500
Line height: 122
This is H4
Font: Archivo
Size: H4 · 24px
Weight: Medium · 500
Line height: 132
Size: H4 · 24px
Weight: Medium · 500
Line height: 132
This is H5
Font: Archivo
Size: H5 · 21px
Weight: Medium · 500
Line height: 135
Size: H5 · 21px
Weight: Medium · 500
Line height: 135
This is H6
Font: Archivo
Size: H6 · 18px
Weight: Medium · 500
Line height: 140
Size: H6 · 18px
Weight: Medium · 500
Line height: 140
Text styles
Paragraph Large — Every metric shift traced to its cause. Used for hero subtitles and section intros.
Font: Archivo
Size: Paragraph Large · 19px
Weight: Normal · 400
Line height: 160
Color: Gray Body
Size: Paragraph Large · 19px
Weight: Normal · 400
Line height: 160
Color: Gray Body
Paragraph — Product, marketing, and revenue events in one model. The default body text inside cards and lists.
Font: Archivo
Size: Paragraph · 15px
Weight: Normal · 400
Line height: 165
Color: Gray Body
Size: Paragraph · 15px
Weight: Normal · 400
Line height: 165
Color: Gray Body
Text Small — 6 min read · deployed 2h ago. Meta rows, captions and timestamps.
Font: Archivo
Size: Text Small · 13px
Weight: Normal · 400
Line height: 160
Color: Gray Mid
Size: Text Small · 13px
Weight: Normal · 400
Line height: 160
Color: Gray Mid
EYEBROW LABEL — HOW IT WORKS
Font: IBM Plex Mono
Size: Eyebrow Label · 11px
Weight: Medium · 500
Letter spacing: Huge · 2px
Transform: uppercase
Size: Eyebrow Label · 11px
Weight: Medium · 500
Letter spacing: Huge · 2px
Transform: uppercase
“Quote Large — answered in ten seconds what used to take a full sprint.”
Font: Archivo
Size: Quote Large · 46px
Weight: Normal · 400
Line height: 142
Size: Quote Large · 46px
Weight: Normal · 400
Line height: 142
Text Huge — CTA headline
Font: Archivo
Size: 50px
Weight: 500
Line height: 1.12
Letter spacing: -1px
Size: 50px
Weight: 500
Line height: 1.12
Letter spacing: -1px
Display Large — section headline
Font: Archivo
Size: 38px
Weight: 500
Line height: 1.25
Size: 38px
Weight: 500
Line height: 1.25
Text Medium — footer tagline and longer supporting copy.
Font: Archivo
Size: 16px
Weight: 400
Line height: 1.7
Color: Gray Body
Size: 16px
Weight: 400
Line height: 1.7
Color: Gray Body
.svg)
