| name | your-brand |
| description | Your team's brand system — colors, typography, voice, logo rules, and the
surface treatments that make every artifact look like the same studio shipped
it. Use whenever generating UI, landing pages, ads, decks, emails, animations,
release notes, or any artifact that will be seen by a customer or stakeholder.
|
| allowed-tools | ["Read","Write","Edit","Glob","Grep"] |
Rule: visual + voice system
This file is a template. Fill in every [TODO]. Delete this notice when done.
Reference this skill from CLAUDE.md so Claude loads it on every session.
Goal
To give Claude one source of truth for how your brand looks and sounds, so every artifact it produces — a release note, a landing page, a slide, a tweet — comes out looking like the same studio shipped it. Without this skill, Claude defaults to mesh gradients and Tailwind indigo. With it, your design system wins.
At a glance
| Element | Spec |
|---|
| Primary color | [TODO #xxxxxx] |
| Secondary / accent | [TODO] |
| Logo | [TODO file path] — [TODO when to invert] |
| Headline type | [TODO size / weight / letter-spacing / color] |
| Body type | [TODO size / line-height / color] |
| Voice | [TODO one sentence — e.g. "Short, declarative, period-ending."] |
Color system
Primary
primary [TODO] — the brand color. Use sparingly.primarySoft [TODO] — tinted backgrounds, focus rings.
Neutrals
text [TODO] — body, headlines.textMuted [TODO] — supporting copy.textSoft [TODO] — captions, metadata.border [TODO] — dividers, card borders.
Status (use only for meaning, not branding)
success [TODO] · info [TODO] · warning [TODO] · error [TODO]
Rules
- Don't introduce a new shade of the primary. If the existing tone doesn't work, change the surface around it.
- Don't use status colors for branding.
- Don't use true black. Use
text (a near-black like #18181b).
Typography
System stacks unless you have a tested webfont reason otherwise.
- Sans:
-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif
- Mono:
"SF Mono", "JetBrains Mono", Menlo, monospace
Type scale
| Role | Size | Weight | Letter-spacing | Line-height | Color |
|---|
| Hero headline | [TODO] | [TODO] | [TODO] | [TODO] | text |
| Page H1 | [TODO] | [TODO] | normal | [TODO] | text |
| Section H2 | [TODO] | [TODO] | normal | [TODO] | text |
| Body | [TODO] | [TODO] | normal | [TODO] | textMuted |
| Eyebrow | [TODO] ALL CAPS | [TODO] | [TODO] | 1 | primary |
| Code | [TODO] | [TODO] | normal | inherit | text (mono) |
Mono use
Only for: code blocks, terminal output, IDs, URLs, agent handles, file paths.
Logo
- Source asset:
[TODO file path]
- On dark surfaces:
[TODO invert / use alt asset / never on dark]
- Minimum clear space:
[TODO]
- What never to do:
[TODO — e.g. recolor, stretch, combine with wordmark]
Voice
In one sentence
[TODO — e.g. "Plainspoken and concrete. Like an engineer confident in what they built, not a marketer trying to convince you."]
Principles
- Specific nouns over abstract claims. List the three things, not "every feature".
- Active verbs. "Ships" beats "facilitates".
- Period-end declarative sentences. No questions in marketing.
- Plain words. Choose the word a colleague would use in a demo.
Real example headlines (your voice)
[TODO — paste 5 real headlines from shipped work. These are the reference.]
Words to avoid
| Don't say | Say instead |
|---|
| Unlock, empower, leverage | Use, give, let |
| Seamless, frictionless | (describe what happens) |
| Revolutionary, next-generation | (cut) |
| Ecosystem, platform, solution | The actual product noun |
| Robust, scalable, enterprise-grade | (specific capability) |
Cards & surfaces
[TODO — describe how your cards look: border, radius, shadow, padding. Include one block of CSS or a tiny tsx snippet.]
Iconography
[TODO — emoji policy, SVG line weight, when to use the brand logo as an icon.]
Process
- Receive the request (a piece of UI, a release note, a deck slide, etc.).
- Ask which surface this lives on (
marketing site, in-app, email, social, internal doc).
- Apply the rules above. When in doubt, fewer colors, smaller shadows, plainer copy.
- Before delivering, run the checklist below.
Checklist before shipping
Final instructions
- Never improvise on color, type, or voice. If a request can't fit the spec, ask the user before extending.
- The voice section is non-negotiable. The visual spec accommodates new surfaces; the voice carries across all of them.
- When the user pushes back on output, note the rule that was missing. Add it to this skill the same day.
Attribution
Inspired by Runtime's brand skill (source) and the Notion Brand Design Template. Approach to design-system-as-skill from Owen Williams (Stripe) on How I AI.
