Theme Factory Skill

Toolkit for styling frontend artifacts with curated themes — 10 pre-set themes with colors/fonts, or generate custom themes on-the-fly.

Source: anthropics/skills

This skill provides a curated collection of professional font and color themes. Each theme includes a cohesive color palette with hex codes, complementary font pairings, and a distinct visual identity. Apply these themes to any frontend artifact: landing pages, dashboards, slide decks, reports, documentation.

How to Apply a Theme

1. Choose a theme from the list below (or create a custom one)
2. Apply the theme's color palette using CSS variables
3. Set the typography (headers + body fonts)
4. Ensure proper contrast and readability
5. Maintain the theme's visual identity across all components

Theme 1: Ocean Depths

Professional and calming maritime theme.

Colors:

• Deep Navy: #1a2332 — primary background
• Teal: #2d8b8b — accent highlights
• Seafoam: #a8dadc — secondary accent
• Cream: #f1faee — text and light backgrounds

Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)

Best for: Corporate, financial, consulting, trust-building content.

Theme 2: Modern Minimalist

Clean and contemporary grayscale for maximum versatility.

Colors:

• Charcoal: #36454f — primary dark
• Slate Gray: #708090 — accents
• Light Gray: #d3d3d3 — backgrounds, dividers
• White: #ffffff — text, clean backgrounds

Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)

Best for: Tech, architecture, design showcases, data visualization.

Theme 3: Sunset Boulevard

Warm and vibrant, inspired by golden hour sunsets.

Colors:

• Burnt Orange: #e76f51 — primary accent
• Coral: #f4a261 — secondary warm accent
• Warm Sand: #e9c46a — highlighting, backgrounds
• Deep Purple: #264653 — dark contrast, text

Typography: DejaVu Serif Bold (headers), DejaVu Sans (body)

Best for: Creative pitches, marketing, lifestyle brands, events.

Theme 4: Forest Canopy

Natural and grounded earth tones from dense forest environments.

Colors:

• Forest Green: #2d4a2b — primary dark green
• Sage: #7d8471 — muted green accent
• Olive: #a4ac86 — light accent
• Ivory: #faf9f6 — backgrounds, text

Typography: FreeSerif Bold (headers), FreeSans (body)

Best for: Environmental, sustainability, wellness, organic products.

Theme 5: Golden Hour

Rich and warm autumnal palette, inviting and sophisticated.

Colors:

• Mustard Yellow: #f4a900 — bold primary accent
• Terracotta: #c1666b — warm secondary
• Warm Beige: #d4b896 — neutral backgrounds
• Chocolate Brown: #4a403a — dark text, anchors

Typography: FreeSans Bold (headers), FreeSans (body)

Best for: Hospitality, restaurants, artisan products, fall campaigns.

Theme 6: Arctic Frost

Cool and crisp winter-inspired — clarity, precision, professionalism.

Colors:

• Ice Blue: #d4e4f7 — light backgrounds, highlights
• Steel Blue: #4a6fa5 — primary accent
• Silver: #c0c0c0 — metallic accents
• Crisp White: #fafafa — clean backgrounds

Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)

Best for: Healthcare, clean tech, pharmaceuticals, winter sports.

Theme 7: Desert Rose

Soft and sophisticated dusty tones for elegant presentations.

Colors:

• Dusty Rose: #d4a5a5 — soft primary
• Clay: #b87d6d — earthy accent
• Sand: #e8d5c4 — warm neutral backgrounds
• Deep Burgundy: #5d2e46 — rich dark contrast

Typography: FreeSans Bold (headers), FreeSans (body)

Best for: Fashion, beauty, wedding planning, interior design, boutique.

Theme 8: Tech Innovation

Bold and modern, high-contrast for cutting-edge tech.

Colors:

• Electric Blue: #0066ff — vibrant primary accent
• Neon Cyan: #00ffff — bright highlights
• Dark Gray: #1e1e1e — deep backgrounds
• White: #ffffff — clean text, contrast

Typography: DejaVu Sans Bold (headers), DejaVu Sans (body)

Best for: Tech startups, software launches, AI/ML, digital transformation.

Theme 9: Botanical Garden

Fresh and organic, vibrant garden-inspired colors.

Colors:

• Fern Green: #4a7c59 — rich natural green
• Marigold: #f9a620 — bright floral accent
• Terracotta: #b7472a — earthy warm tone
• Cream: #f5f3ed — soft neutral backgrounds

Typography: DejaVu Serif Bold (headers), DejaVu Sans (body)

Best for: Garden centers, food, farm-to-table, botanical brands.

Theme 10: Midnight Galaxy

Dramatic and cosmic with deep purples and mystical tones.

Colors:

• Deep Purple: #2b1e3e — rich dark base
• Cosmic Blue: #4a4e8f — mystical mid-tone
• Lavender: #a490c2 — soft accent
• Silver: #e6e6fa — light highlights, text

Typography: FreeSans Bold (headers), FreeSans (body)

Best for: Entertainment, gaming, nightlife, luxury brands, creative agencies.

Creating Custom Themes

When none of the pre-set themes fit, create a custom theme:

1. Pick a descriptive name that captures the color/font mood
2. Choose 4 colors: primary background, primary accent, secondary accent, text/contrast
3. Select complementary header + body font pairing
4. Define the "best for" context
5. Apply using the same CSS variable pattern as above

CSS Variable Pattern

:root {
  --color-bg: #1a2332;
  --color-accent: #2d8b8b;
  --color-secondary: #a8dadc;
  --color-text: #f1faee;
  --font-heading: 'DejaVu Sans Bold', sans-serif;
  --font-body: 'DejaVu Sans', sans-serif;
}

Integration Notes

• Pairs with frontend-design-skill — use Theme Factory for systematic color/font selection, then apply the design principles from the design skill for layout, motion, and spatial composition
• Pairs with react-project-starter, nextjs-project-starter, vuejs-project-starter — apply theme as CSS variables in the framework's global styles
• For Tailwind CSS projects: extend the theme in tailwind.config.ts with the selected palette colors