Style Guide
Every colour, size and radius in this template is a Webflow Variable, and every class below is bound to one. Change a variable once and the whole site follows.
Colors
Every colour is a variable. The theme colours point at base colours, so a whole palette swap is two or three edits.
Thirteen roles, one typeface.
Six heading levels, five body sizes, the weight and colour utilities, and the tags themselves. Every piece of text on the site uses one of these, so the type scale never drifts.
Ag
Ag
Ag
Ag
Ag
Ag
Every system on this page is one somebody uses on a Tuesday.
A sentence with a text link inside it.
- Audit what already runs
- Build the smallest useful piece
- Audit what already runs
- Build the smallest useful piece
The handover was the impressive part. Our own team changed it three times.
Section heading
Body copy inside a legal page, set from the Legals collection.
- A point in a legal list
- And another one
Buttons
Buttons are a component with three variants. Hover is a single GSAP timeline that plays in and reverses out.
Icons
All icons are Phosphor Icons, light weight, MIT licensed. They are white SVGs and take their colour from the element they sit in.
Square icon sizes. Width and height stay equal.
Sets only the height and lets the width follow the artwork.
The rounded icon tile used on the cards in this template, in its normal and large size.
Spacing and radius
Every gap, padding and corner comes from these. The steps marked as shrinking do so through variable modes, so nothing is ever set per breakpoint.
Ten steps for every gap on the site. 2XL, 3XL and 4XL shrink on smaller screens.
The container width, and the padding used by every section, card and button.
Eight corner sizes. Round is a large fixed value, so pills stay pills at any height.