Design System Gtm

---
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, Codex, GitHub Copilot, Cursor, Gemini CLI, OpenCode, Goose, Hermes, Windsurf, Zed
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: [ui-ux-gtm, landing-pages, brand-kit]
  frameworks:
    - "Brad Frost — Atomic Design"
    - "W3C Design Tokens Community Group — Format spec"
    - "Nathan Curtis (EightShapes) — Design system documentation"
    - "Dan Mall — Design That Scales"
---

# 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.

## Authoritative Foundations
- **Brad Frost — Atomic Design** — Build from tokens and atoms up to templates so every one-pager, deck, and email stays consistent.
- **W3C Design Tokens Community Group — Format spec** — Store color, type, and spacing as named tokens in a portable format that agents and tools can read.
- **Nathan Curtis (EightShapes) — Design system documentation** — Document each component's purpose, usage rules, and do/don't examples, not just its appearance.
- **Dan Mall — Design That Scales** — Treat the system as a product with owners, contribution rules, and a release process.

## 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

- `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
This skill includes lightweight artifacts the agent can load on demand:
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