A simple design style guide for your site

Most membership sites start out looking consistent, because one person built them in one go. Then the site grows. A new course page is added in a hurry, a freelancer builds a landing page, a volunteer sets up the events area, and each makes small design decisions on the spot: a slightly different blue, a new button shape, a bigger heading, a fresh style of image. None of these choices is wrong on its own. Together, after a year or two, they make the site feel patched together.

A design style guide prevents that drift. It is simply a written record of the visual decisions you have already made, so nobody has to make them again. It does not need to be a thick manual. For most membership sites, a single page covering colors, text, buttons and a few page patterns is enough.

What a simple style guide covers

A design style guide is different from a content style guide, which covers voice, spelling and terminology; create a simple style guide for your membership content handles that side. The design guide covers how things look and behave:

• Colors, each with a named job
• Text styles: fonts, heading sizes, body text size and link style
• Buttons: primary, secondary and text links, with when to use each
• Spacing: a small set of standard gaps between elements
• Images: shapes, proportions and style for thumbnails, headers and photos
• Icons: which set, what size and what each one means
• Common components: cards, callout boxes, forms and alerts
• Page patterns: the standard layout for a lesson, an article, an event and a landing page

Build it from what you already have

You do not need to design anything new to create a style guide. Start with an audit of what exists:

1. Open ten representative pages: home, pricing, a lesson, an article, an event, the member home page, a form, a landing page and a couple of older pages.
2. Take screenshots and put them side by side.
3. For each type of element, list the variations you find. You might discover four shades of your main color, three button styles and five heading sizes.
4. Choose the best version of each, based on readability and how well it fits with the rest.
5. Write the winners down, and mark the others to be replaced as you update pages.

This audit is often the most useful part of the exercise, because it shows exactly where the inconsistencies are.

Write entries that make decisions

A style guide is only useful if it answers questions. “Use brand colors” decides nothing; “Use the teal for primary buttons only” decides a lot. Each entry should say what the element is, how it looks and when to use it, with a firm rule wherever people might be tempted to improvise.

Colors need particular care. Give each one a job and check that text colors pass the contrast guidance in color and contrast for readable pages. Buttons deserve their own rules about hierarchy and wording, following buttons and calls to action that people click.

A worked example: a kayak touring club

Fenella runs a membership for sea kayakers, with route guides, skills videos and organized trips. After a few years, her site had grown untidy. Here is an extract from her one-page style guide:

Colors. Deep sea blue: headings and the primary button, nothing else. Sand: page backgrounds on public pages only. Charcoal: all body text. Coral: warnings and safety notes only, always with the word “Safety” or “Warning.”

Text. One font family. Body text 18 pixels, left aligned. Three heading levels only; never skip a level. Links underlined in body text.

Buttons. Primary: solid deep sea blue, white label, one per screen. Secondary: blue outline. All labels start with a verb.

Images. Real photos of members on the water, never stock. Guide thumbnails are landscape, with the route name in the lower left on a solid panel. No text on busy photos.

Callouts. Two types only: a sand-colored “Tip” box and a coral-bordered “Safety” box. No more than two per page.

Route guide pattern. Title, a line with distance, difficulty and tidal notes, map, then sections for launch, route, hazards and landing, ending with a button to book a guided trip.

Anyone building a new page for the club, including a freelancer who has never seen the site, can now make it match in minutes.

Define page patterns, not just parts

The most valuable entries are often the page patterns. A pattern describes the standard order of elements for a type of page, so that every lesson, article or event follows the same structure. Members learn the pattern once and can find things on every page of that type. Most membership sites need patterns for:

• A lesson
• An article or guide
• An event listing and an event detail page
• A landing page for a campaign
• A help article

Where your platform supports templates, turn each pattern into a template so the structure is built in rather than remembered.

Keep the guide alive

A style guide goes stale if nobody owns it. Give one person responsibility for it. When someone needs something the guide does not cover, such as a new type of callout, they add it to the guide rather than inventing it on a single page. Share the guide with every freelancer, contributor and volunteer who touches the site, and review it whenever you redesign or change your theme.

Your first steps

1. Screenshot ten representative pages and list the variations of each element.
2. Choose one version of each color, text style, button and image shape.
3. Write each choice as a rule, with when to use it.
4. Describe the standard layout for your three most common page types.
5. Put it all on one page and share it with everyone who builds pages.
6. Update old pages to match, starting with the most visited.