styleguide

name

styleguide

description

Create a comprehensive design language and styleguide for any project — websites, apps, blogs, presentations, marketing pages. Given a project type, brand, and audience, produces aesthetic direction, font selections with pairings, color strategy, spacing philosophy, imagery style, and tone. Use when the user asks to "create a styleguide", "define the design language", "what fonts should I use", "choose a color palette for my project", "design direction for my website", "how should my app look", "visual identity", or "brand style". References design-system for technical implementation and media-plugin for asset generation.

Styleguide

Create a comprehensive design language for any project. This is the starting point for all design work — it defines the "why" behind every visual choice.

When to Use

• User wants to create or define a visual identity for a project
• User asks "what fonts/colors should I use?"
• User is starting a new website, app, or product and needs design direction
• User wants a coherent design language across multiple deliverables
• User asks for "brand style" or "design system" guidance (strategic, not technical)

When NOT to Use

• User wants to generate actual images → use media-plugin/image-generation
• User wants to search for stock photos → use media-plugin/image-sourcing
• User wants to audit WCAG contrast → use design-system

Styleguide Creation Workflow

Step 1: Project Discovery

Gather these inputs from the user (ask if not provided):

Input	Why It Matters	Example
Project type	Determines conventions and expectations	SaaS dashboard, portfolio, e-commerce, blog, landing page
Target audience	Drives formality, complexity, aesthetics	Developers, executives, teenagers, creative professionals
Brand personality	3-5 adjectives that define the tone	Bold & innovative, Calm & trustworthy, Playful & energetic
Competitors / inspiration	What to differentiate from or aspire to	"Like Linear but warmer", "Not like every other SaaS"
Existing brand assets	Constraints to work within	Logo, brand colors, existing font choices
Deliverables	What will be designed	Website, mobile app, presentation deck, all of the above

Step 2: Aesthetic Profile Selection

Choose an aesthetic profile from references/aesthetic-profiles.md that matches the project discovery. Each profile provides default directions for typography, color, spacing, imagery, and motion.

The profile is a starting point, not a rigid template. Customize based on the specific project needs.

Step 3: Typography Strategy

Select a font pairing from references/font-pairings.md.

Define:

• Heading font — what emotion does it carry?
• Body font — is it readable at small sizes?
• Monospace (if applicable) — for code, data, or technical content
• Weight strategy — which weights will be used and where (e.g., Bold for H1, Medium for H3, Regular for body)
• Scale — reference design-system for type scale ratios (Major Third 1.250 is a safe default)

Step 4: Color Strategy

Build a palette using references/color-moods.md.

Define:

• Primary — the dominant brand color (60% of visual space)
• Secondary — supporting color (20-30%)
• Accent — for CTAs, highlights, attention (5-10%)
• Neutrals — text, backgrounds, borders (gray scale)
• Semantic — success/warning/error/info
• Dark mode strategy — invert, dim, or separate palette?

For technical implementation (palette generation, WCAG contrast checking), reference design-system.

Step 5: Imagery & Media Direction

Define the visual style for all media assets:

• Photography style — moody, bright, editorial, candid, abstract, documentary
• Illustration style — flat, 3D, hand-drawn, isometric, line art
• Icon library — Lucide (clean, consistent), Heroicons (Tailwind ecosystem), Tabler (largest selection). Use media-plugin/icon-library to fetch.
• Image sourcing — use media-plugin/image-sourcing with specific search queries
• Image generation — use media-plugin/image-generation with style-consistent prompts
• Video/motion — use media-plugin/video-generation if applicable

For prompt crafting, use the media-prompt-craft skill to translate this direction into specific prompts and queries.

Step 6: Output Styleguide Document

Produce a structured markdown document using this template:

# [Project Name] Design Language

## Aesthetic Direction
- **Profile**: [name from aesthetic-profiles.md]
- **Personality**: [3-5 adjectives]
- **Inspiration**: [reference sites/brands]
- **Key principle**: [one sentence that captures the design philosophy]

## Typography
- **Heading**: [font name] — [why this font]
- **Body**: [font name] — [why this font]
- **Monospace** (if applicable): [font name]
- **Pairing rationale**: [why these fonts work together]
- **Weight strategy**: H1=Bold(700), H2=SemiBold(600), H3=Medium(500), Body=Regular(400)
- **Scale**: [ratio] — xs(12) sm(14) base(16) lg(18) xl(20) 2xl(24) 3xl(30) 4xl(36) 5xl(48)
- **Google Fonts import**: `@import url('https://fonts.googleapis.com/css2?family=...')`

## Color System
| Role | Hex | Usage |
|------|-----|-------|
| Primary | #___ | Main brand, CTAs, links |
| Secondary | #___ | Supporting elements |
| Accent | #___ | Highlights, badges, attention |
| Neutral-900 | #___ | Primary text |
| Neutral-700 | #___ | Secondary text |
| Neutral-400 | #___ | Placeholder, disabled |
| Neutral-100 | #___ | Backgrounds, cards |
| Neutral-50 | #___ | Page background |
| Success | #___ | Positive states |
| Warning | #___ | Caution states |
| Error | #___ | Error states |

**Dark mode**: [strategy — inverted, dimmed, or separate palette]

## Imagery Direction
- **Photography**: [style + mood + example search queries for media-plugin/image-sourcing]
- *

Tips

• Always start with the audience, not the aesthetics — design for the people using it
• A styleguide should feel inevitable for THIS project, not generic
• Fewer, stronger choices beat many weak ones — commit to a direction
• Test your font pairing at actual sizes before committing — some fonts that look good at 48px fall apart at 14px
• The styleguide is a living document — update it as the project evolves