Create a simple brand style guide
Document the logo, colour pairings, typography, image choices and tone your team needs, using a complete fictional brand example.
A small style guide should remove recurring decisions. Which logo goes on a dark background? Which colour can be used for body text? How do you describe a service without promising more than the business provides?
Start with rules for the materials you make often. Give each rule an example and a reason. Keep the file owner and version visible so a helpful new instruction does not become a second unofficial guide.
Define what the guide covers
Separate fixed identity details from flexible layout choices. The business name and approved wordmark should stay consistent. A quotation and a social post need different amounts of information and need not share an identical layout.
Use the following original mini-guide as a model. Alder & Grain is a fictional furniture repair workshop. The choices demonstrate a workable system; they are not a claim of trademark clearance or a universal style for repair businesses.
Example: Alder & Grain, version 1
Name and logo
Write the name as Alder & Grain, with the ampersand. Use the approved dark wordmark on a light surface and the light version on a dark surface. Leave clear space around the wordmark equal to at least the height of its capital A in this example. That is this identity's chosen spacing rule, not an industry requirement.
Keep the proportions unchanged. Do not add shadows, enclose the mark in an unapproved shape or place it over a busy photograph. At a small size, use the version without a descriptive line if the line cannot be read. Check the actual output rather than relying on a mock-up viewed at an enlarged scale.
Colours and permitted pairings
| Role | Screen colour | Use in this example |
|---|---|---|
| Deep green | #243D32 |
Main text, headings and the dark wordmark |
| Warm paper | #F4F0E7 |
Main background and light text on deep green |
| Clay | #AD4F32 |
Small accents and graphic details; check text use separately |
| White | #FFFFFF |
A neutral document background |
Use deep green on warm paper for ordinary reading. Do not infer that every possible combination of these colours is suitable for text. Check the actual foreground/background pair, including link, hover and disabled states.
WCAG's minimum text-contrast guidance sets a 4.5:1 ratio for ordinary text and 3:1 for qualifying large text, with defined exceptions. The logo exception is not a reason to make nearby body copy faint. Colour contrast is one accessibility consideration, not a complete assessment.
Type and hierarchy
For this teaching identity, use a Georgia-led serif stack for prominent headings and an Arial-led sans-serif stack for body copy. These choices demonstrate the relationship between a distinctive heading and a restrained reading face. Available fonts and their appearance vary by device; the website needs suitable fallbacks.
For web pages, use real text for headings and paragraphs. Keep heading levels meaningful, set a comfortable reading width and test enlarged text. Do not turn an entire paragraph into a branded image merely to preserve its appearance.
If a production project needs a supplied font file, confirm the right licence and delivery method. Naming a typeface in this example does not grant a licence to distribute it.
Voice and terminology
| Situation | Use | Reason |
|---|---|---|
| Explaining the first step | “Send clear photos before arranging an inspection.” | States a practical action. |
| Describing the decision | “We confirm the proposed work and price in writing before you approve the repair.” | Makes the approval point visible. |
| Explaining a limit | “We repair wooden dining-chair joints and minor wooden-table faults. We do not offer upholstery.” | Helps an unsuitable enquiry stop early. |
| Avoiding an unsupported promise | Replace “Every piece restored to perfection” with the actual assessed scope. | A visual identity should not carry an unverified guarantee. |
Use “inspection” for the workshop assessment and “quotation” for the proposed price and scope. Explain any specialist term when it first appears. The clear-copy editing guide gives a fuller editing process.
Images and their descriptions
Choose photographs that show the relevant object and repair detail, with permission to use them. Keep lighting and backgrounds consistent enough that visitors can see what is being explained. An illustrative image must be labelled when it could be mistaken for real work.
The W3C images tutorial distinguishes informative, functional and decorative images. Describe useful information in an informative image; use an empty text alternative for purely decorative material. Do not repeat a decorative photograph's filename as its description.
Add examples where mistakes happen
A rule becomes easier to follow when its consequences are visible. For Alder & Grain, include a website header, one paragraph of service copy and a quotation heading. Check them in colour and monochrome. Show the approved version alongside an explanation of what goes wrong when the mark is stretched or the service limits are omitted.
The brand-handover example brings these choices together in an original visual specimen and asset record.
Maintain one approved guide
Store a dated version with the current logo files. Record the editor responsible for updates, the change made and which materials need to be revised. A new print supplier may need a print-specific addendum without changing the website's colour definitions.
Before adopting the guide, test the common uses with the people who will make them. W3C's Easy Checks can help with an initial web review, but passing those checks does not establish complete accessibility. Keep findings and follow-up actions in the handover checklist.
The source notes
Sources and further reading
- W3C: minimum text contrast Checked 4 November 2026
- W3C: choosing text alternatives for images Checked 4 November 2026
- W3C: writing for web accessibility Checked 4 November 2026
- W3C: a first review of web accessibility Checked 4 November 2026