WebFootprint Style Guide
Live reference for the design system. This page is noindexed.
Colours
Backgrounds
bg-dark
bg-section
bg-card-solid
surface-plum
surface-light
Primary
primary
primary-dark
accent-pink
accent-purple
Gold
gold
gold-light
Pillar colours
build
grow
automate
specialise
Typography
H1 (Sora 700, 5xl)
The quick brown fox
H2 (Sora 600, 4xl)
The quick brown fox
H3 (Sora 600, 2xl)
The quick brown fox jumps over
H4 (Sora 500, xl)
The quick brown fox jumps over the lazy dog
Body (Inter 400, base/17px)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Kicker (gold) Section label
Gradient text Gradient heading
Buttons
Cards
Default card
Glass card with hover lift and border glow.
Another card
Consistent padding, rounded corners, backdrop blur.
Metrics (plum surface)
100+
Projects
Projects
6+
Years
Years
5.0
Rating
Rating
Light editorial section
This is how body text looks on the warm off-white surface. The kicker and heading colours adapt automatically via the .section-light class.
Kicker on light