Use this when you're starting a new project, onboarding a new client, or aligning a team on visual language before building a full design system. Produces a structured style guide covering color palette, typography scale, spacing system, and component patterns from minimal brand inputs.

Process

Step 1: Gather inputs

Ask the user to provide:

1. Brand colors — primary, secondary, and accent colors (hex codes preferred, names or descriptions accepted)
2. Typography preferences — serif or sans-serif, mood (modern, classic, playful, corporate), any specific fonts already chosen
3. Target audience — who is the product for? (age range, technical sophistication, industry context)
4. Industry or domain — what space does the product operate in? (helps inform conventions and expectations)
5. Existing brand assets — optional. Logos, competitor references, mood boards, or inspiration links

If the user provides only partial inputs, ask for at minimum: one primary color, a typography mood, and the target audience. These three are the foundation.

Step 2: Build color palette

Expand the provided colors into a complete system:

Core palette:

• Primary color with 5 tints (lighter) and 4 shades (darker)
• Secondary color with 3 tints and 3 shades
• Accent color with 2 tints and 2 shades
• Provide hex values for every swatch

Semantic colors:

• Success (green family)
• Warning (amber/yellow family)
• Error/Destructive (red family)
• Info (blue family)
• Each with a default, light (background), and dark (text-on-light) variant

Neutral scale:

• 10-step neutral scale from white to near-black
• Derived from the primary color (warm or cool bias, not pure gray)

Accessibility:

• Note contrast ratios for primary text on background combinations
• Flag any combinations that fail WCAG AA (4.5:1 for normal text, 3:1 for large text)
• Suggest alternatives for any failing combinations

Dark mode:

• Inverted neutral scale
• Adjusted primary/secondary/accent for dark backgrounds
• Semantic colors adjusted for dark mode contrast

Step 3: Define typography scale

Build a complete type system:

Type scale:

• Use a modular scale (1.250 Major Third or 1.333 Perfect Fourth recommended) or custom ratios
• Define sizes from caption (smallest) through Display (largest)
• Provide values in both px and rem

Heading hierarchy:

• H1 through H6 with: font size, font weight, line height, letter spacing, color
• Recommended max-width for readability (measure)

Body text:

• Body large and body default sizes
• Recommended line height (1.5–1.75 for body text)
• Paragraph spacing

Supporting styles:

• Caption, overline, label, button text
• Font size, weight, letter spacing, and text-transform for each

Font pairing:

• Recommend a heading + body font pairing based on the stated mood
• Explain the rationale (contrast, readability, personality)
• Include fallback font stacks

Step 4: Establish spacing system

Define consistent spatial relationships:

Base unit: 4px or 8px (recommend based on complexity of the UI)

Spacing scale:

• Named tokens: xs (4px), sm (8px), md (16px), lg (24px), xl (32px), 2xl (48px), 3xl (64px)
• Or numbered scale: space-1 through space-10

Layout:

• Breakpoints: mobile (< 640px), tablet (640–1024px), desktop (> 1024px)
• Container max-widths at each breakpoint
• Column grid: 4-column mobile, 8-column tablet, 12-column desktop
• Gutter widths at each breakpoint

Component spacing:

• Padding scales for buttons, cards, inputs, modals
• Margin between sections and content blocks
• Inline spacing for icons and text

Step 5: Document component patterns

Describe foundational component patterns as design tokens and specifications — not code implementations:

Buttons:

• Primary, secondary, tertiary, destructive variants
• States: default, hover, active, focused, disabled
• Sizes: small, medium, large
• Border radius, padding, font style for each

Form elements:

• Input fields: border, padding, font, placeholder style
• Labels: position, font, required indicator
• Help text and error messages: position, color, font
• Select, checkbox, radio, toggle specs

Cards:

• Border, shadow, border-radius, padding
• Header, body, footer zones
• Interactive (hoverable) vs. static variants

Elevation and shadow:

• 3–5 elevation levels
• Shadow values for each level (offset, blur, spread, color)
• When to use each level (e.g., level 1 for cards, level 3 for modals)

Navigation patterns:

• Top bar and sidebar conventions
• Active, hover, and disabled states
• Mobile navigation approach

Step 6: Compile and format

Assemble the complete style guide as a shareable Markdown document with this structure:

# (Project Name) Style Guide

## Overview
(Brief description of the brand personality and design direction)

## Color Palette
(Full palette with hex values, organized by category)

## Typography
(Type scale, heading hierarchy, body text, supporting styles)

## Spacing & Layout
(Spacing scale, breakpoints, grid system)

## Component Patterns
(Button, form, card, elevation, navigation specs)

## Implementation Notes
(Developer-focused guidance: CSS custom properties / design token naming, responsive behavior, accessibility requirements)

Include a section header comment in the implementation notes explaining how to convert the guide into CSS custom properties or design tokens.

Uncertainty Policy

Default: STOP and ask when a topic is not listed above.

Related skills

• /design-review — review mockups against the generated style guide
• /ux-audit — assess existing product UX using the style guide as a reference
• /persona-draft — understand target users before generating the style guide

Output location

Present the style guide as formatted Markdown in the conversation. The user can copy it into their docs tool (Notion, Confluence, Google Docs) or commit it as a STYLE_GUIDE.md in the project repository.