{"skill":{"slug":"theme-factory","displayName":"Theme Factory","summary":"Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.","description":"---\nname: theme-factory\nmodel: fast\ndescription: Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.\n---\n\n# Theme Factory\n\nApply consistent, professional styling to any artifact using curated themes with color palettes and font pairings.\n\n---\n\n## When to Use\n\n- Styling slide decks, reports, or documents with a cohesive visual identity\n- Applying color palettes and font pairings to HTML pages or landing pages\n- Choosing a pre-built theme for quick professional styling\n- Creating a custom theme when none of the presets fit\n\n---\n\n## How to Use\n\n### Step 1: Present Available Themes\n\nShow the user the 10 available themes with their descriptions:\n\n| # | Theme | Vibe | Best For |\n|---|-------|------|----------|\n| 1 | Ocean Depths | Professional, calming maritime | Corporate, financial, consulting |\n| 2 | Sunset Boulevard | Warm, vibrant energy | Creative pitches, marketing, events |\n| 3 | Forest Canopy | Natural, grounded earth tones | Environmental, sustainability, wellness |\n| 4 | Modern Minimalist | Clean, contemporary grayscale | Tech, architecture, design showcases |\n| 5 | Golden Hour | Rich, warm autumnal | Hospitality, lifestyle, artisan brands |\n| 6 | Arctic Frost | Cool, crisp precision | Healthcare, technology, clean tech |\n| 7 | Desert Rose | Soft, sophisticated dusty tones | Fashion, beauty, interior design |\n| 8 | Tech Innovation | Bold, high-contrast modern | Startups, software launches, AI/ML |\n| 9 | Botanical Garden | Fresh, organic vibrancy | Food, garden, natural products |\n| 10 | Midnight Galaxy | Dramatic, cosmic depth | Entertainment, gaming, luxury brands |\n\n### Step 2: Get User Selection\n\nAsk which theme to apply. Wait for explicit confirmation before proceeding.\n\n### Step 3: Apply the Theme\n\n1. Read the selected theme file from `themes/` directory\n2. Apply colors and fonts consistently throughout the artifact\n3. Ensure proper contrast and readability\n4. Maintain the theme's visual identity across all pages/slides\n\n---\n\n## Theme File Structure\n\nEach theme in `themes/` follows this format:\n\n```markdown\n# Theme Name\n\nDescription of the visual mood and inspiration.\n\n## Color Palette\n- **Primary Dark**: `#hex` — Usage description\n- **Accent**: `#hex` — Usage description\n- **Secondary**: `#hex` — Usage description\n- **Light/Background**: `#hex` — Usage description\n\n## Typography\n- **Headers**: Font family\n- **Body Text**: Font family\n\n## Best Used For\nContext and audience descriptions.\n```\n\n---\n\n## Applying Themes to Different Artifacts\n\n### Slide Decks\n\n- **Background**: Use the primary dark color for title slides, light color for content slides\n- **Headers**: Apply the header font in the accent color\n- **Body text**: Use the body font in the primary dark color on light backgrounds\n- **Accents**: Use accent/secondary colors for charts, highlights, dividers\n\n### HTML / Landing Pages\n\n```css\n:root {\n  --theme-primary: #hex;     /* From theme's primary dark */\n  --theme-accent: #hex;      /* From theme's accent color */\n  --theme-secondary: #hex;   /* From theme's secondary */\n  --theme-bg: #hex;          /* From theme's light/background */\n  --theme-font-heading: \"Theme Header Font\", sans-serif;\n  --theme-font-body: \"Theme Body Font\", sans-serif;\n}\n```\n\n### Documents / Reports\n\n- **Cover page**: Primary dark background with light text\n- **Section headers**: Accent color with header font\n- **Body**: Body font on light background\n- **Charts/tables**: Use accent and secondary for data series\n- **Callout boxes**: Secondary color as background with primary text\n\n---\n\n## Creating a Custom Theme\n\nWhen no preset fits, generate a custom theme:\n\n1. **Gather input** — Ask about the brand, audience, mood, and context\n2. **Select palette** — Choose 4 colors that form a cohesive palette:\n   - One dark anchor color (backgrounds, text)\n   - One primary accent (emphasis, CTAs)\n   - One secondary accent (supporting elements)\n   - One light/neutral (backgrounds, whitespace)\n3. **Pair fonts** — Choose complementary heading and body fonts:\n   - Heading: distinctive, personality-driven\n   - Body: readable, clean\n4. **Validate contrast** — Ensure WCAG AA compliance for text on backgrounds\n5. **Name the theme** — Give it an evocative name describing the visual feeling\n6. **Document** — Write a theme file matching the standard format\n7. **Review** — Show the theme for approval before applying\n\n### Palette Harmony Rules\n\n- **Complementary**: Colors opposite on the wheel (high contrast)\n- **Analogous**: Colors adjacent on the wheel (harmonious)\n- **Triadic**: Three evenly spaced colors (vibrant but balanced)\n- **Split-complementary**: Base + two colors adjacent to its complement (versatile)\n\n---\n\n## Contrast Guidelines\n\nEnsure readability when applying any theme:\n\n| Combination | Minimum Ratio | WCAG Level |\n|-------------|--------------|------------|\n| Body text on background | 4.5:1 | AA |\n| Large text (18px+) on background | 3:1 | AA |\n| UI components / borders | 3:1 | AA |\n| Enhanced readability | 7:1 | AAA |\n\nTest accent colors against both light and dark backgrounds before finalizing.\n\n---\n\n## Available Themes\n\nAll theme definitions are in the `themes/` directory:\n\n- [themes/ocean-depths.md](themes/ocean-depths.md)\n- [themes/sunset-boulevard.md](themes/sunset-boulevard.md)\n- [themes/forest-canopy.md](themes/forest-canopy.md)\n- [themes/modern-minimalist.md](themes/modern-minimalist.md)\n- [themes/golden-hour.md](themes/golden-hour.md)\n- [themes/arctic-frost.md](themes/arctic-frost.md)\n- [themes/desert-rose.md](themes/desert-rose.md)\n- [themes/tech-innovation.md](themes/tech-innovation.md)\n- [themes/botanical-garden.md](themes/botanical-garden.md)\n- [themes/midnight-galaxy.md](themes/midnight-galaxy.md)\n\n---\n\n## NEVER Do\n\n- **Apply a theme without confirmation** — always get explicit user selection\n- **Mix colors from different themes** — each theme is a cohesive unit\n- **Ignore contrast ratios** — readability trumps aesthetics\n- **Use accent colors for large text blocks** — accents are for emphasis only\n- **Skip font pairing** — headers and body fonts must complement each other\n- **Hardcode theme values** — use CSS variables for easy theme switching\n\n---\n\n## Related Skills\n\n- [design-system-patterns](../design-system-patterns/) — Token architecture and theming infrastructure\n- [distinctive-design-systems](../distinctive-design-systems/) — Aesthetic documentation and unique visual identity\n","tags":{"latest":"1.0.0"},"stats":{"comments":0,"downloads":3371,"installsAllTime":156,"installsCurrent":155,"stars":1,"versions":1},"createdAt":1770726265692,"updatedAt":1778486478500},"latestVersion":{"version":"1.0.0","createdAt":1770726265692,"changelog":"Initial release of Theme Factory: a collection of professional color and typography themes for styling various artifacts.\n\n- Provides 10 curated themes with defined color palettes and font pairings.\n- Step-by-step workflow for theme selection, application, and custom theme creation.\n- Detailed usage instructions for applying themes to slides, HTML pages, and documents.\n- Enforces WCAG accessibility and harmony rules for palette and typography selection.\n- Lists best practices and explicit “never do” guidelines for consistent, accessible styling.","license":null},"metadata":null,"owner":{"handle":"wpank","userId":"s17bjjbnm7xjckd29e1h2641ks8849md","displayName":"wpank","image":"https://avatars.githubusercontent.com/u/9498646?v=4"},"moderation":null}