Theme Factory Skill

Overview

A curated collection of professional font and color themes with cohesive palettes and complementary typeface pairings suited for diverse contexts. Apply to slides, documents, reports, and HTML pages.

When to Use

Applying consistent styling to presentations or documents
Starting a new project and need a cohesive color scheme
Creating branded materials without existing guidelines
Generating HTML reports with professional appearance
Quick theming for prototypes or demos

Quick Start

Display themes - Show all 10 themes with visual swatches
Select theme - User picks one or requests custom generation
Confirm choice - Verify before applying
Apply theme - Inject colors and fonts into artifact

/* Quick apply: Tech Innovation theme */
:root {
  --primary: #0d0221;
  --secondary: #1a0533;
  --accent: #7c3aed;
  --highlight: #a78bfa;
  --text: #f5f3ff;
}
body {
  font-family: 'Space Grotesk', sans-serif;
  background: var(--primary);
  color: var(--text);
}

Available Themes (10 Total)

1. Ocean Depths

Deep blues and teals with aquatic undertones.

:root {
  --primary: #0a1628;
  --secondary: #1a365d;
  --accent: #38b2ac;
  --highlight: #4fd1c5;
  --text: #e6fffa;
}
/* Fonts: Outfit (headings), Lora (body) */

2. Sunset Boulevard

Warm oranges, corals, and golden hues.

:root {
  --primary: #2d1b0e;
  --secondary: #744210;
  --accent: #ed8936;
  --highlight: #fbd38d;
  --text: #fffaf0;
}
/* Fonts: Josefin Sans (headings), Source Serif Pro (body) */

3. Forest Canopy

Natural greens and earth tones.

:root {
  --primary: #1a2f1a;
  --secondary: #2f4f2f;
  --accent: #48bb78;
  --highlight: #9ae6b4;
  --text: #f0fff4;
}
/* Fonts: Montserrat (headings), Merriweather (body) */

4. Modern Minimalist

Clean blacks, whites, and grays.

:root {
  --primary: #1a1a1a;
  --secondary: #333333;
  --accent: #666666;
  --highlight: #f5f5f5;
  --text: #ffffff;
}
/* Fonts: Inter (headings), System UI (body) */

5. Golden Hour

Luxurious golds, bronzes, and creams.

:root {
  --primary: #2c1810;
  --secondary: #5c3d2e;
  --accent: #d69e2e;
  --highlight: #f6e05e;
  --text: #fffff0;
}
/* Fonts: Playfair Display (headings), Crimson Text (body) */

6. Arctic Frost

Cool whites, silvers, and ice blues.

:root {
  --primary: #0f172a;
  --secondary: #1e293b;
  --accent: #60a5fa;
  --highlight: #e0f2fe;
  --text: #f8fafc;
}
/* Fonts: Poppins (headings), Open Sans (body) */

7. Desert Rose

Soft pinks, terracotta, and sand.

:root {
  --primary: #3d2c29;
  --secondary: #8b5a4a;
  --accent: #ed8796;
  --highlight: #fce7f3;
  --text: #fdf2f8;
}
/* Fonts: Cormorant Garamond (headings), Nunito (body) */

8. Tech Innovation

Electric blues, purples, and neons.

:root {
  --primary: #0d0221;
  --secondary: #1a0533;
  --accent: #7c3aed;
  --highlight: #a78bfa;
  --text: #f5f3ff;
}
/* Fonts: Space Grotesk (headings), JetBrains Mono (body) */

9. Botanical Garden

Rich greens with floral accents.

:root {
  --primary: #14401d;
  --secondary: #1e5631;
  --accent: #76b947;
  --highlight: #a4de8c;
  --text: #ecfccb;
}
/* Fonts: DM Serif Display (headings), Libre Baskerville (body) */

10. Midnight Galaxy

Deep purples, cosmic blues, and starlight.

:root {
  --primary: #0f0f23;
  --secondary: #1a1a3e;
  --accent: #9333ea;
  --highlight: #c084fc;
  --text: #faf5ff;
}
/* Fonts: Syncopate (headings), Raleway (body) */

Usage Workflow

Step 1: Display Theme Showcase

Present all 10 themes with visual swatches.

Step 2: Request User Selection

Ask which theme matches their needs, or offer custom generation.

Step 3: Confirm Choice

Verify the selection before applying.

Step 4: Apply Theme

Apply colors and fonts to the artifact.

Applying Themes

HTML/CSS

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet">

<style>
  :root {
    --primary: #0d0221;
    --secondary: #1a0533;
    --accent: #7c3aed;
    --highlight: #a78bfa;
    --text: #f5f3ff;
  }

  body {
    background: var(--primary);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
  }

  h1, h2, h3 {
    font-family: 'Space Grotesk', sans-serif;
    color: var(--accent);
  }
</style>

PowerPoint (python-pptx)

from pptx.dml.color import RGBColor

# Tech Innovation theme
THEME = {
    'primary': RGBColor(0x0d, 0x02, 0x21),
    'secondary': RGBColor(0x1a, 0x05, 0x33),
    'accent': RGBColor(0x7c, 0x3a, 0xed),
    'highlight': RGBColor(0xa7, 0x8b, 0xfa),
    'text': RGBColor(0xf5, 0xf3, 0xff),
}

# Apply to shapes
shape.fill.solid()
shape.fill.fore_color.rgb = THEME['primary']

Excel (openpyxl)

from openpyxl.styles import PatternFill, Font

# Tech Innovation theme
header_fill = PatternFill(start_color="7c3aed", fill_type="solid")
header_font = Font(name="Space Grotesk", color="f5f3ff", bold=True)

# Apply to cells
for cell in ws[1]:
    cell.fill = header_fill
    cell.font = header_font

Custom Theme Generation

When existing themes don't fit:

Request Details

Purpose (presentation, report, website)
Mood (professional, playful, elegant)
Brand colors (if any)
Industry context

Generate Custom

/* Custom theme based on user input */
:root {
  --primary: /* derived from context */;
  --secondary: /* complementary shade */;
  --accent: /* attention-grabbing contrast */;
  --highlight: /* lighter accent variant */;
  --text: /* readable on primary */;
}

Font Selection

Headings: Match tone (modern, classic, technical)
Body: Ensure readability and complement headings
Fallbacks: Always include system fonts

Quick Reference

Theme	Mood	Best For
Ocean Depths	Professional, calm	Corporate, healthcare
Sunset Boulevard	Warm, inviting	Hospitality, food
Forest Canopy	Natural, sustainable	Environment, wellness
Modern Minimalist	Clean, neutral	Any industry
Golden Hour	Luxurious, premium	Finance, luxury brands
Arctic Frost	Cool, tech-forward	SaaS, analytics
Desert Rose	Soft, approachable	Beauty, lifestyle
Tech Innovation	Cutting-edge, bold	Startups, tech
Botanical Garden	Fresh, organic	Food, wellness
Midnight Galaxy	Creative, mysterious	Entertainment, gaming

Execution Checklist

Presented theme options to user
Confirmed theme selection
Loaded appropriate Google Fonts
Applied CSS variables to document
Verified contrast ratios meet accessibility
Tested in both light and dark contexts
Documented theme choice for future reference

Error Handling

Common Issues

Issue: Fonts not loading

Cause: Missing Google Fonts import or network issue
Solution: Verify import URL, add fallback fonts in font-family

Issue: Colors look washed out

Cause: Theme designed for dark mode used on light background
Solution: Swap primary/text colors or choose light-mode theme

Issue: Poor contrast ratio

Cause: Using accent color for body text
Solution: Use text color for body, accent only for highlights

Issue: Theme doesn't match brand

Cause: Using preset without customization
Solution: Generate custom theme with brand colors as inputs

Metrics

Metric	Target	How to Measure
Color Contrast (text)	>= 4.5:1	WebAIM Contrast Checker
Color Contrast (large text)	>= 3:1	WebAIM Contrast Checker
Font Load Time	< 500ms	Network DevTools
Theme Consistency	100%	Manual audit

Related Skills

frontend-design - Custom UI development
brand-guidelines - Full brand systems
canvas-design - Visual art creation

Version History

2.0.0 (2026-01-02): Upgraded to v2 template - added Quick Start, When to Use, Execution Checklist, Error Handling, Metrics sections
1.0.0 (2024-10-15): Initial release with 10 curated themes, HTML/CSS, PowerPoint, Excel integration, custom generation

theme-factory