A website style guide for a small site: what fits on one page
A small site's style guide should fit on one page: one typeface and its sizes, a handful of colours with their jobs, a spacing scale, how buttons, links and forms look, and a short note on voice. Its purpose is to stop the site drifting as people add pages, not to impress anyone, so every line should answer a question someone will actually ask.
Style guide, brand guidelines or design system?
| Document | Covers | Who needs it |
|---|---|---|
| Brand guidelines | Logo use, brand colours, tone, imagery across print, social and signage | Anyone representing the brand anywhere |
| Website style guide | How those rules apply on the site: type sizes, colour roles, spacing, components, voice on the page | Whoever edits or adds pages |
| Design system | A style guide plus coded components, tokens and usage rules, maintained by a team | Organisations with several products or many contributors |
Large organisations publish all three. A café, a studio or a consultancy needs the middle one, kept short. If you already have brand guidelines, the site style guide translates them into decisions a web page needs: which grey is body text, what size an h2 is, what a disabled button looks like. For the bigger picture, see what is a design system and brand guidelines to website.
What the one page holds
Type
One family, or one pairing at most, with the weights you use. A size for each role: page title, section heading, subheading, body, small print. Line height for body text and the maximum line length. Whether headings use sentence case.
Colour
Name colours by job, not by hue: background, surface, text, muted text, border, action, error. Give each a value and a note on where it may appear. State that the action colour is for things you can click and nothing else.
Spacing and shape
A short scale, such as 4, 8, 16, 24, 40, 72 and 120 pixels, and which steps separate what: inside a card, between cards, between sections. The corner radius for each kind of element, for example square images, rounded buttons, slightly rounded cards.
Components
Buttons (primary, secondary, text link), form fields with their label, hint and error, cards, and the focus style. Show each in its normal, hover, focus and disabled states. See UI component states for what each state needs.
Voice
Three or four lines, with examples. How you address the reader, whether you use contractions, how you write prices, dates and times, words you avoid. Public guides show how much ground this can cover: the Mailchimp Content Style Guide runs from voice and tone to accessibility and translation, and the GOV.UK A to Z style guide settles small questions such as writing "10am to 11am" rather than using a dash. Borrow the decisions that matter to you.
A web style guide template
- Purpose: one sentence on who the site is for and how it should feel.
- Type: family, weights, sizes by role, line height, measure.
- Colour: six to eight named roles with values and contrast notes.
- Spacing and radius: the scale and the radius per element.
- Components: buttons, links, fields, cards, focus, each with states.
- Imagery: the kind of photos, crops and what to avoid.
- Voice: how to address readers, formats for dates and prices, banned words.
- Owner and date: who decides changes, and when it was last updated.
What to leave out
- Mood boards and inspiration. Useful before the decisions, noise after them.
- Rules nobody will break. "Don't stretch the logo" is fine in brand guidelines; on the site the logo is a file nobody resizes.
- Every possible component. Document the ones the site has. Add others when a page needs them.
- Vague adjectives. "Modern and clean" doesn't help anyone choose a colour. "Body text is near-black on off-white" does.
The style guide is only useful if it's true. When the live site and the document disagree, people follow the site, so update the document whenever a decision changes, and date it.
Style guides in Anticode
Each of Anticode's seven design systems works as a style guide the build follows: one font family, a fixed set of colour tokens for ground, surface, text, muted text, lines and the single action colour, a type scale, spacing values, and corner radius assigned by role. The Designer holds every section to it, and you can change the direction, theme, action colour and headline scale in the visual editor, or tune individual colour tokens in the code editor (Pro mode), where :root colour tokens map back to the project.
Those decisions live in the page's stylesheet and the project file rather than in a document. If a client or a colleague needs a written guide, write the voice section yourself and copy the type and colour values from the tokens.
Questions people ask
How long should a small website style guide be?
One page, or two at most. If it's longer, nobody editing the site will read it.
Do I need a style guide for a one-page website?
A short one helps as soon as a second person edits the site, or when you add pages later.
What's the difference between a style guide and a design system?
A style guide records decisions. A design system adds the coded components and tokens that put those decisions into practice, and a team to maintain them.
Sources
- Mailchimp Content Style Guide, checked
- A to Z style guide, GOV.UK publishing guidance, checked