design-system-gtm · v2.0.0 · 2026-06-08 · sha256 10e7bec16f37f317
design-system-gtm v2.0.0A
Immutable. This exact content is served forever at /api/v1/blob/10e7bec16f37f317.
---
name: design-system-gtm
description: >-
Define brand-context for AI agents — visual identity systems, voice/tone
guides, color palettes with hex/RGB/HSL, typography systems with font stacks
and type scales, logo usage rules, asset templates, and brand guardrails.
Use when creating a design system for AI-generated GTM content, ensuring
brand consistency across agent outputs, or implementing Google DESIGN.md
specification. Includes Claude Code design patterns via claude-design skill.
license: MIT
compatibility: Claude Code, Cursor, Codex, Hermes, Windsurf, OpenCode, Gemini CLI, Copilot, Zed, VS Code, Goose
metadata:
version: "2.0.0"
author: LeadMagic
category: design
tags: [design-system, brand, visual-identity, voice-tone, design-tokens, css-variables, claude-design]
related_skills: [claude-design, popular-web-designs, design-system-builder, brand-kit, ui-ux-gtm, effective-ui-design]
frameworks:
- "Google DESIGN.md Specification"
- "Stitch 9-Section Brand Format"
- "Brad Frost — Atomic Design"
- "Nathan Curtis — Design System Monorepo Architecture"
- "Dan Mall — Design System Governance"
---
# Design System for GTM
## Overview
When AI agents generate sales collateral, pitch decks, one-pagers, social
graphics, and emails, they need a brand system to reference. Without it,
every output has different colors, different fonts, different voice — and
your brand erodes across every customer touchpoint. This skill defines a
complete AI-consumable design system with visual identity, voice/tone,
templates, and guardrails. Designed to be read by both humans and AI agents.
## Frameworks Referenced
This skill is grounded in named GTM frameworks, public methodologies, and vendor documentation where relevant:
- **Google DESIGN.md Specification** — used as the named operating framework for this playbook.
- **Stitch 9-Section Brand Format** — used as the named operating framework for this playbook.
- **Brad Frost — Atomic Design** — used as the named operating framework for this playbook.
- **Nathan Curtis — Design System Monorepo Architecture** — used as the named operating framework for this playbook.
- **Dan Mall — Design System Governance** — used as the named operating framework for this playbook.
- **--** — used as the named operating framework for this playbook.
- **-color-primary: #0066FF;** — used as the named operating framework for this playbook.
- **-color-primary-dark: #0044CC;** — used as the named operating framework for this playbook.
- **-color-primary-light: #3388FF;** — used as the named operating framework for this playbook.
- **-color-accent: #FF6600;** — used as the named operating framework for this playbook.
- **-color-ink: #1A1A2E;** — used as the named operating framework for this playbook.
- **-color-muted: #6B7280;** — used as the named operating framework for this playbook.
- **-color-surface: #FFFFFF;** — used as the named operating framework for this playbook.
- **-color-bg: #F9FAFB;** — used as the named operating framework for this playbook.
- **-color-border: #E5E7EB;** — used as the named operating framework for this playbook.
- **-color-success: #10B981;** — used as the named operating framework for this playbook.
- **-color-warning: #F59E0B;** — used as the named operating framework for this playbook.
- **-color-danger: #EF4444;** — used as the named operating framework for this playbook.
- **Buttons, inputs: 8px** — used as the named operating framework for this playbook.
- **Cards: 12px** — used as the named operating framework for this playbook.
- **Modals: 16px** — used as the named operating framework for this playbook.
- **Card: 0 1px 3px rgba(0,0,0,0.08)** — used as the named operating framework for this playbook.
- **Elevated: 0 4px 12px rgba(0,0,0,0.1)** — used as the named operating framework for this playbook.
- **Modal: 0 8px 32px rgba(0,0,0,0.12)** — used as the named operating framework for this playbook.
- **Revolutionary," "high-impact," "disruptive" (vague, overused)** — used as the named operating framework for this playbook.
- **Best-in-class," "industry-leading" (meaningless without data)** — used as the named operating framework for this playbook.
- **Synergize," "leverage" (as a verb), "holistic" (jargon)** — used as the named operating framework for this playbook.
- **We're excited to announce" (nobody cares if you're excited)** — used as the named operating framework for this playbook.
- **Passive voice: "Results were achieved" → "We achieved results** — used as the named operating framework for this playbook.
- **Active voice always. "We built" not "It was built.** — used as the named operating framework for this playbook.
- **Present tense. "The platform processes" not "The platform will process.** — used as the named operating framework for this playbook.
- **Short sentences. Under 25 words when possible.** — used as the named operating framework for this playbook.
- **Bullets over paragraphs in decks and one-pagers.** — used as the named operating framework for this playbook.
- **16:9 aspect ratio** — used as the named operating framework for this playbook.
- **Header: Inter 36px, primary color, left-aligned** — used as the named operating framework for this playbook.
- **Body: Inter 18px, ink color** — used as the named operating framework for this playbook.
- **Footer: company logo (bottom-right), slide number (bottom-left), 12px muted** — used as the named operating framework for this playbook.
- **Data slides: charts in primary + accent palette, no decorative elements** — used as the named operating framework for this playbook.
- **A4/US Letter** — used as the named operating framework for this playbook.
- **Header: logo + product name** — used as the named operating framework for this playbook.
- **Hero: value prop (H2), one-line description, hero image** — used as the named operating framework for this playbook.
- **Body: 3-column feature grid** — used as the named operating framework for this playbook.
- **Social proof: 3 customer logos + 1 testimonial** — used as the named operating framework for this playbook.
- **CTA: prominent button/contact info** — used as the named operating framework for this playbook.
- **Footer: company info, legal** — used as the named operating framework for this playbook.
- **Primary + neutral palette (limit to 5 data colors)** — used as the named operating framework for this playbook.
- **No 3D charts, no pie charts (use bar/line/scatter)** — used as the named operating framework for this playbook.
- **Direct labels (no legends when possible)** — used as the named operating framework for this playbook.
- **Source line: "Source: [name], [date]" in 10px muted** — used as the named operating framework for this playbook.
- **Social graphics using brand colors, typography, and voice** — used as the named operating framework for this playbook.
- **Email copy following tone guidelines** — used as the named operating framework for this playbook.
- **Blog post drafts (human reviews before publishing)** — used as the named operating framework for this playbook.
- **Data visualizations in brand style** — used as the named operating framework for this playbook.
- **Landing page sections following template** — used as the named operating framework for this playbook.
- **Customer-facing decks (check data accuracy)** — used as the named operating framework for this playbook.
- **Pricing pages (legal/commercial review)** — used as the named operating framework for this playbook.
- **Press releases (legal review)** — used as the named operating framework for this playbook.
- **Customer quotes/testimonials (customer approval)** — used as the named operating framework for this playbook.
- **Any content referencing specific customers** — used as the named operating framework for this playbook.
- **Competitive claims without cited sources** — used as the named operating framework for this playbook.
- **Revenue/growth numbers not publicly disclosed** — used as the named operating framework for this playbook.
- **Customer names without explicit permission** — used as the named operating framework for this playbook.
- **Guarantees or promises ("100% deliverability")** — used as the named operating framework for this playbook.
- **Any content that implies endorsement by a named authority** — used as the named operating framework for this playbook.
- **[ ] All colors have hex, RGB, and HSL values** — used as the named operating framework for this playbook.
- **[ ] CSS variable block is copy-pasteable into any project** — used as the named operating framework for this playbook.
- **[ ] Typography includes Google Fonts import URL and font stack** — used as the named operating framework for this playbook.
- **[ ] Voice attributes are specific and testable ("direct" > "professional")** — used as the named operating framework for this playbook.
- **[ ] Banned words list exists (10+ entries)** — used as the named operating framework for this playbook.
- **[ ] Tone guide covers at least 5 contexts** — used as the named operating framework for this playbook.
- **[ ] Asset templates include specific dimensions and specs** — used as the named operating framework for this playbook.
- **[ ] Guardrails have 3 clear tiers (always acceptable / review / never)** — used as the named operating framework for this playbook.
- **[ ] AI agent usage instructions included (how to reference, what to load)** — used as the named operating framework for this playbook.
- **[ ] File is version-controlled and linked from README** — used as the named operating framework for this playbook.
- **`claude-design` — Design process for one-off HTML artifacts** — used as the named operating framework for this playbook.
- **`popular-web-designs` — 54 known-brand design systems for visual vocabulary** — used as the named operating framework for this playbook.
- **`design-system-builder` — Build complete design systems from references** — used as the named operating framework for this playbook.
- **`brand-kit` — Logo design, color palette, typography, asset templates** — used as the named operating framework for this playbook.
- **`ui-ux-gtm` — Landing pages, forms, signup flows, dashboards** — used as the named operating framework for this playbook.
- **`effective-ui-design` — Professional UI design guidelines** — used as the named operating framework for this playbook.
## When to Use
Trigger phrases: "create a design system for our AI-generated content", "define
our brand for agents", "build a brand guide for sales materials", "ensure
consistent voice across AI outputs", "DESIGN.md specification", "design tokens
for agents", "AI brand system", "brand context for Claude"
## Step-by-Step Process
### Phase 1: Visual Identity System
**Color Palette — must include hex, RGB, and HSL:**
```
PRIMARY PALETTE
Primary: #0066FF rgb(0,102,255) hsl(216,100%,50%)
Primary Dark: #0044CC rgb(0,68,204) hsl(220,100%,40%)
Primary Light: #3388FF rgb(51,136,255) hsl(216,100%,60%)
SECONDARY / ACCENT
Accent: #FF6600 rgb(255,102,0) hsl(24,100%,50%)
NEUTRALS
Ink (text): #1A1A2E rgb(26,26,46) hsl(240,28%,14%)
Muted Text: #6B7280 rgb(107,114,128) hsl(220,9%,46%)
Surface: #FFFFFF
Background: #F9FAFB
Border: #E5E7EB
SEMANTIC
Success: #10B981 rgb(16,185,129) hsl(160,84%,39%)
Warning: #F59E0B rgb(245,158,11) hsl(37,92%,50%)
Danger: #EF4444 rgb(239,68,68) hsl(0,80%,60%)
Info: #3B82F6 rgb(59,130,246) hsl(217,91%,60%)
```
**CSS Variable Output (for agents generating HTML/CSS):**
```css
:root {
--color-primary: #0066FF;
--color-primary-dark: #0044CC;
--color-primary-light: #3388FF;
--color-accent: #FF6600;
--color-ink: #1A1A2E;
--color-muted: #6B7280;
--color-surface: #FFFFFF;
--color-bg: #F9FAFB;
--color-border: #E5E7EB;
--color-success: #10B981;
--color-warning: #F59E0B;
--color-danger: #EF4444;
}
```
**Typography System:**
```
HEADINGS: Inter (Google Fonts)
H1: 48px / 1.1 line-height / 700 weight / letter-spacing: -0.02em
H2: 36px / 1.2 / 600 / -0.01em
H3: 24px / 1.3 / 600 / 0
H4: 20px / 1.3 / 600 / 0
BODY: Inter
Body L: 18px / 1.6 / 400
Body: 16px / 1.6 / 400
Body S: 14px / 1.5 / 400
Caption: 12px / 1.5 / 400
MONOSPACE (code, data): JetBrains Mono
Code: 14px / 1.5 / 400
CSS:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
```
**Spacing Scale (8px base):**
4, 8, 12, 16, 24, 32, 48, 64, 96, 128
**Border Radius:**
- Buttons, inputs: 8px
- Cards: 12px
- Modals: 16px
**Shadows:**
- Card: 0 1px 3px rgba(0,0,0,0.08)
- Elevated: 0 4px 12px rgba(0,0,0,0.1)
- Modal: 0 8px 32px rgba(0,0,0,0.12)
### Phase 2: Voice and Tone Guide
**Brand Voice Attributes (5 — be specific, not vague):**
1. **Direct** — no hedging, no "we believe," no "it could be argued." Say the thing.
2. **Data-backed** — every claim has a number or source. "Most teams" → "73% of teams."
3. **Opinionated** — take positions. "We recommend X, not Y" not "There are several approaches."
4. **Concrete** — "47% reply rate" not "industry-leading engagement."
5. **Confident but not arrogant** — "Here's what works" not "We're revolutionizing."
**Tone by Context:**
| Context | Tone | Example |
|---|---|---|
| Sales deck | Confident, data-heavy | "Teams using our platform see 47% reply rates within 30 days." |
| Case study | Narrative, specific | "Acme Corp was losing $2.3M/year to churn. Here's how they fixed it." |
| Email nurture | Helpful, low-pressure | "I noticed you downloaded our ROI calculator. Here are 3 ways customers use it." |
| Error messages | Clear, apologetic, helpful | "That didn't work. Here's why and how to fix it." |
| Social media | Punchy, shareable | "Stop guessing your ICP. Start scoring it." |
**Banned Words and Phrases:**
- "Revolutionary," "high-impact," "disruptive" (vague, overused)
- "Best-in-class," "industry-leading" (meaningless without data)
- "Synergize," "leverage" (as a verb), "holistic" (jargon)
- "We're excited to announce" (nobody cares if you're excited)
- Passive voice: "Results were achieved" → "We achieved results"
**Preferred Language Patterns:**
- Active voice always. "We built" not "It was built."
- Present tense. "The platform processes" not "The platform will process."
- Short sentences. Under 25 words when possible.
- Bullets over paragraphs in decks and one-pagers.
### Phase 3: Asset Templates
**Slide Master Template:**
- 16:9 aspect ratio
- Header: Inter 36px, primary color, left-aligned
- Body: Inter 18px, ink color
- Footer: company logo (bottom-right), slide number (bottom-left), 12px muted
- Data slides: charts in primary + accent palette, no decorative elements
**One-Pager Template:**
- A4/US Letter
- Header: logo + product name
- Hero: value prop (H2), one-line description, hero image
- Body: 3-column feature grid
- Social proof: 3 customer logos + 1 testimonial
- CTA: prominent button/contact info
- Footer: company info, legal
**Email Signature:**
```
[First Name] [Last Name]
[Title] | [Company Name]
[Phone] | [Website]
[Calendly link]
[Company logo — 80px wide]
```
**Data Visualization Style:**
- Primary + neutral palette (limit to 5 data colors)
- No 3D charts, no pie charts (use bar/line/scatter)
- Direct labels (no legends when possible)
- Source line: "Source: [name], [date]" in 10px muted
### Phase 4: Brand Guardrails
**Always Acceptable (AI can generate without review):**
- Social graphics using brand colors, typography, and voice
- Email copy following tone guidelines
- Blog post drafts (human reviews before publishing)
- Data visualizations in brand style
- Landing page sections following template
**Requires Human Review:**
- Customer-facing decks (check data accuracy)
- Pricing pages (legal/commercial review)
- Press releases (legal review)
- Customer quotes/testimonials (customer approval)
- Any content referencing specific customers
**Never Allowed:**
- Competitive claims without cited sources
- Revenue/growth numbers not publicly disclosed
- Customer names without explicit permission
- Guarantees or promises ("100% deliverability")
- Any content that implies endorsement by a named authority
### Integration with Claude Code Design
When using Claude Code to generate branded assets, load this skill alongside
`claude-design` and `popular-web-designs`:
```
1. claude-design → drives the design process and artifact creation
2. design-system-gtm (this skill) → provides brand tokens and rules
3. popular-web-designs → provides visual vocabulary from known brands
```
The agent should output CSS variables matching this design system's tokens
and follow the voice/tone guidelines for any copy it generates.
## Output Format
```
DESIGN SYSTEM — [Company Name]
File: DESIGN.md (version controlled in repo)
Sections:
1. Brand Overview (2-3 sentence positioning)
2. Visual Identity (colors, typography, spacing, radii, shadows)
3. CSS Variable Output (copy-paste ready)
4. Voice and Tone (attributes, per-context, banned words)
5. Asset Templates (slide, one-pager, email, social, data viz)
6. Brand Guardrails (acceptable / review / never)
7. AI Agent Usage (how agents should reference this system)
```
## Implementation Checklist
- [ ] All colors have hex, RGB, and HSL values
- [ ] CSS variable block is copy-pasteable into any project
- [ ] Typography includes Google Fonts import URL and font stack
- [ ] Voice attributes are specific and testable ("direct" > "professional")
- [ ] Banned words list exists (10+ entries)
- [ ] Tone guide covers at least 5 contexts
- [ ] Asset templates include specific dimensions and specs
- [ ] Guardrails have 3 clear tiers (always acceptable / review / never)
- [ ] AI agent usage instructions included (how to reference, what to load)
- [ ] File is version-controlled and linked from README
## Quality Check
Before delivering, verify:
- [ ] Output matches the user's stated request
- [ ] Named frameworks or sources are reflected in the recommendation
- [ ] The deliverable is specific enough for an agent to execute
- [ ] Any assumptions, risks, or dependencies are explicit
- [ ] No unsupported claims, invented facts, or private/internal references are included
## Common Pitfalls
1. **Vague voice guidelines.** "Professional and friendly" is useless. Agents
need specific, testable attributes: "Short sentences. Active voice.
No passive constructions. Data before adjectives." Fix: For each voice
attribute, provide 3 examples of "this, not that."
2. **RGB without hex.** AI agents reference hex codes for HTML/CSS generation.
Including RGB is good. Including only RGB is not. Fix: Hex is the primary
color format for agents. RGB and HSL are supplementary.
3. **No CSS variable output.** Agents generating HTML need copy-pasteable CSS.
Wading through a color palette table to extract hex codes produces errors.
Fix: Include a `:root {}` CSS block with all design tokens.
4. **Ignoring dark mode.** Many agent-generated artifacts (dashboards,
presentations) look different in dark mode. Fix: Include dark mode color
variants or document that the brand is light-mode-only.
5. **No guardrails.** Without explicit rules, agents will improvise — and
sometimes generate content that's off-brand, legally risky, or factually
wrong. Fix: Clear tiered guardrails: acceptable, review, never.
6. **Design system as PDF.** If your design system is a Figma file or PDF,
AI agents can't read it. Fix: DESIGN.md in markdown, version controlled,
linked from all agent configuration files.
## Execution Artifacts
This skill includes lightweight artifacts the agent can load on demand:
- `references/framework-notes.md` — named frameworks, citation anchors, and operating assumptions
- `templates/output-template.md` — copy-paste deliverable structure for the user
- `scripts/check-output.py` — local checklist validator for required sections
Use the artifacts when the user asks for an implementation-ready deliverable, a repeatable workflow, or a quality check rather than generic advice.
## Related Skills
- `claude-design` — Design process for one-off HTML artifacts
- `popular-web-designs` — 54 known-brand design systems for visual vocabulary
- `design-system-builder` — Build complete design systems from references
- `brand-kit` — Logo design, color palette, typography, asset templates
- `ui-ux-gtm` — Landing pages, forms, signup flows, dashboards
- `effective-ui-design` — Professional UI design guidelines