What is Style guide?

What belongs in it

• Colour tokens with their measured contrast ratios against their backgrounds
• A type scale with defined roles rather than an open list of sizes
• Spacing values as a small fixed set, not arbitrary numbers
• Component patterns — buttons, cards, forms — with their states
• Focus, hover, disabled and error states, which are the ones most often undocumented

Record the contrast ratios

Writing the measured ratio beside each colour pairing is what stops the next person darkening a background and silently breaking accessibility. It converts a fact somebody checked once into a fact the codebase remembers.

Keep it in the code

A style guide in a separate document drifts from the site within months. Design tokens defined in the stylesheet, with a page that renders the components, stay accurate because they are the same thing the site uses.

Where this is covered in depth

A definition can only go so far. The 35 types of SEO, explained without the padding covers this properly — 6 minutes, free, no email required.

Who wrote this

Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan. These definitions come from client work rather than from a content brief — where an entry describes a mistake, it is usually one found on a real site. More about how I work.