Example
Reload Mode delivers a style guide alongside each website build, documenting all design tokens so clients can maintain consistency when adding new pages.
Brands with consistent style guidelines are 3–4x more likely to achieve strong brand visibility, according to Lucidpress research on the impact of brand consistency on business performance.
What it applies to
Any brand or website where more than one person creates content or designs materials. A style guide is especially important when working with external agencies, freelancers, or a growing in-house team.
What a web-focused style guide should include
- Colour section: All brand colours with HEX codes, RGB values, and clear usage rules (primary on white, accent for CTAs, neutrals for body text).
- Typography section: Font families, weights, and the complete type scale — H1 through body and caption — with pixel sizes, line heights, and letter spacing.
- Spacing system: The spacing scale used for padding, margins, and gaps between elements (e.g., an 8px base grid: 8, 16, 24, 32, 48, 64, 96).
- Component section: Buttons in all states (default, hover, active, disabled, loading), form inputs, cards, and badges — with visual examples and usage rules.
- Imagery guidelines: Photography style, illustration rules, icon set, and what to avoid.
How to host and maintain it
- Use Zeroheight to publish a live, web-hosted style guide synced with Figma styles — updates in Figma push automatically to the published guide.
- Alternatively, build the style guide directly in Webflow as a dedicated internal page — making it a live demonstration of the system it documents.
%20(1).png)