Build or audit a comprehensive brand style guide

by rampstackco · MIT license · ★ 901 on GitHub · updated Sep 15

Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts. Use this skill whenever the user wants to create brand…

---
name: brand-style-guide
description: "Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts. Use this skill whenever the user wants to create brand guidelines, document an existing brand, build a brand book, audit an existing style guide for completeness, or produce the artifact that other teams will reference for years. Triggers on style guide, brand guidelines, brand book, brand standards, brand manual, style sheet, brand documentation, brand reference. Also triggers when the brand identity is finished and needs to be documented for handoff to designers, developers, vendors, or future team members."
category: brand
catalog_summary: "The canonical reference document for the full brand system"
display_order: 3
---

# Brand Style Guide

Document the brand system so other people can use it without ambiguity. This is the artifact that lives longest. Designers, developers, agencies, and vendors will reference it for years. Build it like a reference manual, not a presentation.

This skill assumes the brand identity is designed (run `brand-identity` first if not). The output of this skill is the canonical reference document.

---

## When to use

Overview

Document the brand system so other people can use it without ambiguity. This is the artifact that lives longest. Designers, developers, agencies, and vendors will reference it for years. Build it like a reference manual, not a presentation.

Manual install (npx, ZIP)

Claude Codenpx skills add rampstackco/claude-skills --skill brand-style-guide -g -a claude-code

Claude Code (manual)

mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/rampstackco/claude-skills/tar.gz/3d4510a94a76 \
  | tar -xz -C ~/.claude/skills --strip-components=2 claude-skills-3d4510a94a76/skills/brand-style-guide

Windows (PowerShell)

New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/c8a38808b4fdb53340ae/brand-style-guide.zip" -OutFile "$env:TEMP\brand-style-guide.zip"; Expand-Archive "$env:TEMP\brand-style-guide.zip" -DestinationPath "$HOME\.claude\skills" -Force

Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md8.2 KB
references/2 files · 15.2 KB

Read the files here

rampstackco/3d4510a3 files

SKILL.md8.2 KB

SKILL.md

Show the full text203 lines

brand-style-guide/SKILL.md203 lines · 8.2 KB

PreviewCode

Outline

RawView on GitHub

Brand Style Guide

This skill assumes the brand identity is designed (run brand-identity first if not). The output of this skill is the canonical reference document.

When to use

Creating brand guidelines for a finished identity
Documenting an existing brand that has no formal guide
Auditing an existing style guide for gaps or inconsistencies
Building a brand book to hand to vendors, partners, or new team members
Updating a guide after a major brand evolution

When NOT to use

The brand identity is not yet designed (use brand-identity)
Brand voice work specifically (use brand-voice for the voice doc, then integrate)
Building UI components (use design-standards or design-system)

Required inputs

Finished brand identity (logo, colors, typography, imagery direction, motion principles)
Brand voice and tone documentation (or sufficient inputs to write a voice section)
Application examples that show the brand in real contexts
Decisions on what is mandatory vs flexible vs forbidden

The framework: 8 sections

A complete style guide has eight sections. Most guides skip 2 or 3 of them and create downstream confusion. Build all 8 from the start.

1. Story

The narrative behind the brand. Why it exists, what it stands for, what it rejects.

Origin / founding story
Mission and vision
Values (3 to 5, with what each means in practice)
Positioning statement
Audience (with the level of specificity from the brief)
What we are not (the things we explicitly reject)

2. Logo system

Every variant of every mark, with rules.

Primary logo (with construction grid showing relationships)
Wordmark
Symbol / glyph
Lockup variations (horizontal, stacked, etc.)
Monogram (if part of system)
Clear space rules (minimum spacing around logo)
Minimum sizes (smallest acceptable size for print and digital)
Acceptable color treatments (full color, single color, knock-out, reverse)
Forbidden treatments (stretching, rotating, recoloring, drop shadows, gradients - whatever is forbidden)
File formats and where to find them

3. Color

The full color system with rules.

Primary palette (signature colors)
Secondary palette
Neutrals scale
Semantic colors (success, warning, error, info)
Light mode and dark mode variants
Per color: hex, RGB, HSL, CMYK, Pantone (if print-relevant)
Contrast ratios documented
Allowed pairings
Forbidden pairings
Usage hierarchy (primary first, secondary supporting, neutrals dominant)

4. Typography

The full type system.

Display typeface (with sample sizes)
Body typeface (with sample sizes)
Monospace (if applicable)
Type scale (specific sizes used)
Weight and style usage (which weights for which contexts)
Line height ratios
Letter spacing standards
Web fallback stacks
Open-source alternatives for licensing-restricted contexts
Forbidden treatments (all caps overuse, fake italics, etc.)

5. Imagery and illustration

What pictures look like in this brand.

Photography direction with example library
Illustration style with example library
Iconography system with the full icon set (or rules for adding to it)
Forbidden imagery (stock photo cliches, specific things never to show)
Photo treatment rules (color treatment, crops, composition)

6. Voice and tone

How the brand sounds. (Pulled from brand-voice work if done separately.)

Voice attributes (3 to 5 adjectives with "we are X, not Y" framing)
Tone shifts by context (onboarding, error, marketing, support, legal)
Vocabulary preferences (words we use, words we avoid)
Grammar and style rules
Examples (good and bad copy side by side)

7. Applications

The brand applied to real contexts.

Web (homepage, product pages, blog template)
Email (template, signature, transactional)
Social (post templates, profile imagery, story formats)
Print (business cards, letterhead, print ads)
Packaging (if applicable)
Signage (if applicable)
Internal documents (slides, reports, proposals)
Each with examples showing what good looks like

8. Dos and don'ts

The boundaries, illustrated.

Logo dos and don'ts (visual examples of correct and incorrect use)
Color dos and don'ts (combinations to use, combinations to avoid)
Type dos and don'ts (treatments to use, treatments to avoid)
Composition dos and don'ts (layout patterns that work, ones that do not)
Voice dos and don'ts (phrases that fit, phrases that do not)

The dos and don'ts section is what people actually reference in practice. Make it the easiest section to scan.

Workflow

Inventory the inputs. What identity work is finished? What voice work is finished? What is missing?
Confirm the format. Is this a PDF, a web page, a Notion doc, a printed book, or all of the above? Different formats have different production requirements.
Section by section, draft. Use the template in references/style-guide-template.md.
Stress-test with real examples. For every rule, find a real application example. Rules without examples get ignored.
Get review from the people who will use it. Designers, developers, marketers. They will surface gaps.
Version control. Style guides evolve. Date the doc. Note what changed in each version.
Publish in the format the team will actually open. A 200-page PDF that lives on a shared drive is dead weight. A web page or Figma file with a clear URL gets used.

Failure patterns

Skipping the "what we are not" sections. Without rejection rules, anything becomes acceptable.
Document with no examples. Rules without visual examples are abstract and ignored.
Document with only examples. Examples without rules cannot be applied to new situations.
Static PDF that no one opens. Ship the guide in the format the team uses daily (web page, Figma, Notion, etc.).
No version history. When the brand evolves, no one knows which rules changed or when.
Aspirational rules. Rules the brand does not actually follow get treated as suggestions. Document what is actually true, not what is wished.
Treating "dos and don'ts" as filler. This section is what people use most. Invest in it.

Output format

Default output is a multi-section markdown document or a structured set of files, plus a presentation-ready version (web page, PDF, or Figma) for sharing with stakeholders.

Recommended structure:

brand/
  style-guide.md          (the canonical document)
  story.md                (or as a section)
  logo/
    construction.md
    files/                (SVG, PNG, etc.)
  colors.md
  typography.md
  imagery/
    photography.md
    illustration.md
    icons/
      icons.md
      files/
  voice.md
  applications/
    web.md
    email.md
    social.md
    print.md
  dos-and-donts.md

For consumer-facing presentation, build a web page version that imports from these source files. The source files are canonical. The presentation is a view of them.

Reference files

references/style-guide-template.md - Fillable section-by-section template.
references/maintenance-playbook.md - How to keep the guide current after launch.

1	---
2	name: brand-style-guide
3	description: "Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts. Use this skill whenever the user wants to create brand guidelines, document an existing brand, build a brand book, audit an existing style guide for completeness, or produce the artifact that other teams will reference for years. Triggers on style guide, brand guidelines, brand book, brand standards, brand manual, style sheet, brand documentation, brand reference. Also triggers when the brand identity is finished and needs to be documented for handoff to designers, developers, vendors, or future team members."
4	category: brand
5	catalog_summary: "The canonical reference document for the full brand system"
6	display_order: 3
7	---
8
9	# Brand Style Guide
10
11	Document the brand system so other people can use it without ambiguity. This is the artifact that lives longest. Designers, developers, agencies, and vendors will reference it for years. Build it like a reference manual, not a presentation.
12
13	This skill assumes the brand identity is designed (run `brand-identity` first if not). The output of this skill is the canonical reference document.
14
15	---
16
17	## When to use
18
19	- Creating brand guidelines for a finished identity
20	- Documenting an existing brand that has no formal guide
21	- Auditing an existing style guide for gaps or inconsistencies
22	- Building a brand book to hand to vendors, partners, or new team members
23	- Updating a guide after a major brand evolution
24
25	## When NOT to use
26
27	- The brand identity is not yet designed (use `brand-identity`)
28	- Brand voice work specifically (use `brand-voice` for the voice doc, then integrate)
29	- Building UI components (use `design-standards` or `design-system`)
30
31	---
32
33	## Required inputs
34
35	- Finished brand identity (logo, colors, typography, imagery direction, motion principles)
36	- Brand voice and tone documentation (or sufficient inputs to write a voice section)
37	- Application examples that show the brand in real contexts
38	- Decisions on what is mandatory vs flexible vs forbidden
39
40	---
41
42	## The framework: 8 sections
43
44	A complete style guide has eight sections. Most guides skip 2 or 3 of them and create downstream confusion. Build all 8 from the start.
45
46	### 1. Story
47	The narrative behind the brand. Why it exists, what it stands for, what it rejects.
48
49	- Origin / founding story
50	- Mission and vision
51	- Values (3 to 5, with what each means in practice)
52	- Positioning statement
53	- Audience (with the level of specificity from the brief)
54	- What we are not (the things we explicitly reject)
55
56	### 2. Logo system
57	Every variant of every mark, with rules.
58
59	- Primary logo (with construction grid showing relationships)
60	- Wordmark
61	- Symbol / glyph
62	- Lockup variations (horizontal, stacked, etc.)
63	- Monogram (if part of system)
64	- Clear space rules (minimum spacing around logo)
65	- Minimum sizes (smallest acceptable size for print and digital)
66	- Acceptable color treatments (full color, single color, knock-out, reverse)
67	- Forbidden treatments (stretching, rotating, recoloring, drop shadows, gradients - whatever is forbidden)
68	- File formats and where to find them
69
70	### 3. Color
71	The full color system with rules.
72
73	- Primary palette (signature colors)
74	- Secondary palette
75	- Neutrals scale
76	- Semantic colors (success, warning, error, info)
77	- Light mode and dark mode variants
78	- Per color: hex, RGB, HSL, CMYK, Pantone (if print-relevant)
79	- Contrast ratios documented
80	- Allowed pairings
81	- Forbidden pairings
82	- Usage hierarchy (primary first, secondary supporting, neutrals dominant)
83
84	### 4. Typography
85	The full type system.
86
87	- Display typeface (with sample sizes)
88	- Body typeface (with sample sizes)
89	- Monospace (if applicable)
90	- Type scale (specific sizes used)
91	- Weight and style usage (which weights for which contexts)
92	- Line height ratios
93	- Letter spacing standards
94	- Web fallback stacks
95	- Open-source alternatives for licensing-restricted contexts
96	- Forbidden treatments (all caps overuse, fake italics, etc.)
97
98	### 5. Imagery and illustration
99	What pictures look like in this brand.
100
101	- Photography direction with example library
102	- Illustration style with example library
103	- Iconography system with the full icon set (or rules for adding to it)
104	- Forbidden imagery (stock photo cliches, specific things never to show)
105	- Photo treatment rules (color treatment, crops, composition)
106
107	### 6. Voice and tone
108	How the brand sounds. (Pulled from `brand-voice` work if done separately.)
109
110	- Voice attributes (3 to 5 adjectives with "we are X, not Y" framing)
111	- Tone shifts by context (onboarding, error, marketing, support, legal)
112	- Vocabulary preferences (words we use, words we avoid)
113	- Grammar and style rules
114	- Examples (good and bad copy side by side)
115
116	### 7. Applications
117	The brand applied to real contexts.
118
119	- Web (homepage, product pages, blog template)
120	- Email (template, signature, transactional)
121	- Social (post templates, profile imagery, story formats)
122	- Print (business cards, letterhead, print ads)
123	- Packaging (if applicable)
124	- Signage (if applicable)
125	- Internal documents (slides, reports, proposals)
126	- Each with examples showing what good looks like
127
128	### 8. Dos and don'ts
129	The boundaries, illustrated.
130
131	- Logo dos and don'ts (visual examples of correct and incorrect use)
132	- Color dos and don'ts (combinations to use, combinations to avoid)
133	- Type dos and don'ts (treatments to use, treatments to avoid)
134	- Composition dos and don'ts (layout patterns that work, ones that do not)
135	- Voice dos and don'ts (phrases that fit, phrases that do not)
136
137	The dos and don'ts section is what people actually reference in practice. Make it the easiest section to scan.
138
139	---
140
141	## Workflow
142
143	1. Inventory the inputs. What identity work is finished? What voice work is finished? What is missing?
144	2. Confirm the format. Is this a PDF, a web page, a Notion doc, a printed book, or all of the above? Different formats have different production requirements.
145	3. Section by section, draft. Use the template in [`references/style-guide-template.md`](references/style-guide-template.md).
146	4. Stress-test with real examples. For every rule, find a real application example. Rules without examples get ignored.
147	5. Get review from the people who will use it. Designers, developers, marketers. They will surface gaps.
148	6. Version control. Style guides evolve. Date the doc. Note what changed in each version.
149	7. Publish in the format the team will actually open. A 200-page PDF that lives on a shared drive is dead weight. A web page or Figma file with a clear URL gets used.
150
151	---
152
153	## Failure patterns
154
155	- Skipping the "what we are not" sections. Without rejection rules, anything becomes acceptable.
156	- Document with no examples. Rules without visual examples are abstract and ignored.
157	- Document with only examples. Examples without rules cannot be applied to new situations.
158	- Static PDF that no one opens. Ship the guide in the format the team uses daily (web page, Figma, Notion, etc.).
159	- No version history. When the brand evolves, no one knows which rules changed or when.
160	- Aspirational rules. Rules the brand does not actually follow get treated as suggestions. Document what is actually true, not what is wished.
161	- Treating "dos and don'ts" as filler. This section is what people use most. Invest in it.
162
163	---
164
165	## Output format
166
167	Default output is a multi-section markdown document or a structured set of files, plus a presentation-ready version (web page, PDF, or Figma) for sharing with stakeholders.
168
169	Recommended structure:
170
171	```
172	brand/
173	style-guide.md (the canonical document)
174	story.md (or as a section)
175	logo/
176	construction.md
177	files/ (SVG, PNG, etc.)
178	colors.md
179	typography.md
180	imagery/
181	photography.md
182	illustration.md
183	icons/
184	icons.md
185	files/
186	voice.md
187	applications/
188	web.md
189	email.md
190	social.md
191	print.md
192	dos-and-donts.md
193	```
194
195	For consumer-facing presentation, build a web page version that imports from these source files. The source files are canonical. The presentation is a view of them.
196
197	---
198
199	## Reference files
200
201	- [`references/style-guide-template.md`](references/style-guide-template.md) - Fillable section-by-section template.
202	- [`references/maintenance-playbook.md`](references/maintenance-playbook.md) - How to keep the guide current after launch.
203

View all files on GitHub →

Details

Updated: Sep 15, 2026
License: MIT
Stars on the repo: ★ 901
Checked: Sep 24, 2026
Source: rampstackco/claude-skills ↗
Creator: rampstackco · 60 listings

View creator

Made with brand-style-guide

Brand style guide — Showcase grid filtered by Tone equals Provocative and Sensory equals Resonant, showing eight matching brand cards with… (from the rampstackco/claude-skills README)

by rampstackco

Brand style guide — Showcase grid with all four axis filters set to Provocative, Editorial Restrained, Coach, and Resonant, showing zero… (from the rampstackco/claude-skills README)

by rampstackco

Brand style guide — RampStack architecture diagram. A central navy hub card shows the RampStack mark with the subtitle 'Stack-agnostic… (from the rampstackco/claude-skills README)

by rampstackco