Theme Factory

Theme Factory

Apply consistent, professional styling to any artifact using curated themes with color palettes and font pairings.

When to Use

• Styling slide decks, reports, or documents with a cohesive visual identity
• Applying color palettes and font pairings to HTML pages or landing pages
• Choosing a pre-built theme for quick professional styling
• Creating a custom theme when none of the presets fit

How to Use

Step 1: Present Available Themes

Show the user the 10 available themes with their descriptions:

Step 2: Get User Selection

Ask which theme to apply. Wait for explicit confirmation before proceeding.

Step 3: Apply the Theme

1. Read the selected theme file from themes/ directory
2. Apply colors and fonts consistently throughout the artifact
3. Ensure proper contrast and readability
4. Maintain the theme's visual identity across all pages/slides

Theme File Structure

Each theme in themes/ follows this format:

# Theme Name

Description of the visual mood and inspiration.

## Color Palette
- **Primary Dark**: `#hex` — Usage description
- **Accent**: `#hex` — Usage description
- **Secondary**: `#hex` — Usage description
- **Light/Background**: `#hex` — Usage description

## Typography
- **Headers**: Font family
- **Body Text**: Font family

## Best Used For
Context and audience descriptions.

Applying Themes to Different Artifacts

Slide Decks

• Background: Use the primary dark color for title slides, light color for content slides
• Headers: Apply the header font in the accent color
• Body text: Use the body font in the primary dark color on light backgrounds
• Accents: Use accent/secondary colors for charts, highlights, dividers

HTML / Landing Pages

:root {
  --theme-primary: #hex;     /* From theme's primary dark */
  --theme-accent: #hex;      /* From theme's accent color */
  --theme-secondary: #hex;   /* From theme's secondary */
  --theme-bg: #hex;          /* From theme's light/background */
  --theme-font-heading: "Theme Header Font", sans-serif;
  --theme-font-body: "Theme Body Font", sans-serif;
}

Documents / Reports

• Cover page: Primary dark background with light text
• Section headers: Accent color with header font
• Body: Body font on light background
• Charts/tables: Use accent and secondary for data series
• Callout boxes: Secondary color as background with primary text

Creating a Custom Theme

When no preset fits, generate a custom theme:

1. Gather input — Ask about the brand, audience, mood, and context
2. Select palette — Choose 4 colors that form a cohesive palette:
   • One dark anchor color (backgrounds, text)
   • One primary accent (emphasis, CTAs)
   • One secondary accent (supporting elements)
   • One light/neutral (backgrounds, whitespace)
3. Pair fonts — Choose complementary heading and body fonts:
   • Heading: distinctive, personality-driven
   • Body: readable, clean
4. Validate contrast — Ensure WCAG AA compliance for text on backgrounds
5. Name the theme — Give it an evocative name describing the visual feeling
6. Document — Write a theme file matching the standard format
7. Review — Show the theme for approval before applying

Palette Harmony Rules

• Complementary: Colors opposite on the wheel (high contrast)
• Analogous: Colors adjacent on the wheel (harmonious)
• Triadic: Three evenly spaced colors (vibrant but balanced)
• Split-complementary: Base + two colors adjacent to its complement (versatile)

Contrast Guidelines

Ensure readability when applying any theme:

Test accent colors against both light and dark backgrounds before finalizing.

Available Themes

All theme definitions are in the themes/ directory:

• themes/ocean-depths.md
• themes/sunset-boulevard.md
• themes/forest-canopy.md
• themes/modern-minimalist.md
• themes/golden-hour.md
• themes/arctic-frost.md
• themes/desert-rose.md
• themes/tech-innovation.md
• themes/botanical-garden.md
• themes/midnight-galaxy.md

NEVER Do

• Apply a theme without confirmation — always get explicit user selection
• Mix colors from different themes — each theme is a cohesive unit
• Ignore contrast ratios — readability trumps aesthetics
• Use accent colors for large text blocks — accents are for emphasis only
• Skip font pairing — headers and body fonts must complement each other
• Hardcode theme values — use CSS variables for easy theme switching

Related Skills

• design-system-patterns — Token architecture and theming infrastructure
• distinctive-design-systems — Aesthetic documentation and unique visual identity