Eight colours,
one palette.
Every colour in the template is a variable — change it once and every page follows.
Background
#0F0F0F
Page background
color/background
Card
#1C1C1C
Cards and alternate sections
color/card
Border
#2E2E2E
Dividers and outlines
color/border
Cream
#F5F0E8
Warm highlight
color/cream
White
#FFFFFF
Headings and primary text
color/white
Body text
#A3A09A
Paragraphs and labels
color/body-text
Accent
#FF6B4A
Brand colour, buttons, highlights
color/accent
Accent hover
#E85535
Hover state of the accent
color/accent-hover
Two fonts,
one voice.
Instrument Serif carries the personality. Inter keeps everything else clear and quiet.
Display and headings
Instrument Serif
Used for every heading, number and display line.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Body and interface
Inter
Used for paragraphs, buttons, labels and forms.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Small parts,
built to repeat.
Buttons, badges, forms and cards — each one is a component or class you can reuse anywhere.
Buttons
Primary for the main action, Secondary for everything else. Hover shifts to the accent-hover colour.
Badges
Label badges introduce a section. Tag badges describe an item.