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:
| # | Theme | Vibe | Best For |
|---|
| --- | ------- | ------ | ---------- |
| 1 | Ocean Depths | Professional, calming maritime | Corporate, financial, consulting |
| 2 | Sunset Boulevard | Warm, vibrant energy | Creative pitches, marketing, events |
| 3 | Forest Canopy | Natural, grounded earth tones | Environmental, sustainability, wellness |
| 4 | Modern Minimalist | Clean, contemporary grayscale | Tech, architecture, design showcases |
| 5 | Golden Hour | Rich, warm autumnal | Hospitality, lifestyle, artisan brands |
| 6 | Arctic Frost | Cool, crisp precision | Healthcare, technology, clean tech |
| 7 | Desert Rose | Soft, sophisticated dusty tones | Fashion, beauty, interior design |
| 8 | Tech Innovation | Bold, high-contrast modern | Startups, software launches, AI/ML |
| 9 | Botanical Garden | Fresh, organic vibrancy | Food, garden, natural products |
| 10 | Midnight Galaxy | Dramatic, cosmic depth | Entertainment, gaming, luxury brands |
Step 2: Get User Selection
Ask which theme to apply. Wait for explicit confirmation before proceeding.
Step 3: Apply the Theme
- Read the selected theme file from
themes/ directory - Apply colors and fonts consistently throughout the artifact
- Ensure proper contrast and readability
- 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:
- Gather input — Ask about the brand, audience, mood, and context
- 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)
- Pair fonts — Choose complementary heading and body fonts:
- Heading: distinctive, personality-driven
- Body: readable, clean
- Validate contrast — Ensure WCAG AA compliance for text on backgrounds
- Name the theme — Give it an evocative name describing the visual feeling
- Document — Write a theme file matching the standard format
- 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:
| Combination | Minimum Ratio | WCAG Level |
|---|
| ------------- | -------------- | ------------ |
| Body text on background | 4.5:1 | AA |
| Large text (18px+) on background | 3:1 | AA |
| UI components / borders | 3:1 | AA |
| Enhanced readability | 7:1 | AAA |
Test accent colors against both light and dark backgrounds before finalizing.
Available Themes
All theme definitions are in the themes/ directory:
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