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

Step 1: Present Available Themes

Show the user the 10 available themes with their descriptions: #ThemeVibeBest For1Ocean DepthsProfessional, calming maritimeCorporate, financial, consulting2Sunset BoulevardWarm, vibrant energyCreative pitches, marketing, events3Forest CanopyNatural, grounded earth tonesEnvironmental, sustainability, wellness4Modern MinimalistClean, contemporary grayscaleTech, architecture, design showcases5Golden HourRich, warm autumnalHospitality, lifestyle, artisan brands6Arctic FrostCool, crisp precisionHealthcare, technology, clean tech7Desert RoseSoft, sophisticated dusty tonesFashion, beauty, interior design8Tech InnovationBold, high-contrast modernStartups, software launches, AI/ML9Botanical GardenFresh, organic vibrancyFood, garden, natural products10Midnight GalaxyDramatic, cosmic depthEntertainment, 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.

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: CombinationMinimum RatioWCAG LevelBody text on background4.5:1AALarge text (18px+) on background3:1AAUI components / borders3:1AAEnhanced readability7:1AAA 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