System
Style guide
The colour tokens, text styles and components this template is built from. Edit a style once and every page follows.
Colour
Ink
#0A0A0A
Surface
#141414
Line
#262523
Paper
#ECEAE5
Muted
#8F8B85
Silver
#CFCCC6
Hairline
rgba(236,234,229,0.09)
Tint Faint
rgba(236,234,229,0.025)
Tint
rgba(236,234,229,0.02)
Field
rgba(236,234,229,0.03)
Border
rgba(236,234,229,0.12)
Border Field
rgba(236,234,229,0.14)
Border Strong
rgba(236,234,229,0.18)
Border Bright
rgba(236,234,229,0.22)
Border Max
rgba(236,234,229,0.25)
Silver 90
rgba(207,204,198,0.9)
Silver 50
rgba(207,204,198,0.5)
Glass
rgba(10,10,10,0.72)
Card Glass
rgba(20,20,20,0.85)
Raised
#181817
Deep
#101010
Transparent
rgba(0,0,0,0)
Type
Display · Cormorant Garamond 400
Close the month in quiet.
Display Serif · Cormorant Garamond 300
Close the month in quiet.
H2 · Cormorant Garamond 400
Close the month in quiet.
H2 Serif · Cormorant Garamond 300
Close the month in quiet.
H3 · Inter Display 500
Reconciliation, revenue schedules and the close checklist in one place.
Body L · Inter 400
Reconciliation, revenue schedules and the close checklist in one place.
Body · Inter 400
Reconciliation, revenue schedules and the close checklist in one place.
Label Mono · Geist Mono 400
Reconciliation, revenue schedules and the close checklist in one place.
UI Text · Inter 400
Reconciliation, revenue schedules and the close checklist in one place.
Price · Inter Display 500
Reconciliation, revenue schedules and the close checklist in one place.
Nav Link · Inter 400
Reconciliation, revenue schedules and the close checklist in one place.
Button · Inter 500
Reconciliation, revenue schedules and the close checklist in one place.
Brand · Inter Display 600
Reconciliation, revenue schedules and the close checklist in one place.
Article H2 · Inter 500
Close the month in quiet.
Components
Button / Submit has Default, Hover, Pressed, Pending, Success and Error states. Forms switch states automatically.