Home / Skills / Web & UI Design / Theme Factory
Web & UI Design

Theme Factory

AnthropicApache-2.0Skill language: English
License verifiedNo scripts
DemoReal run · claude-sonnet-5-5 · October 2026
I am building a landing page for a boutique wedding planner. Apply the Desert Rose theme and give me a :root CSS block with the theme colors and the font stacks for headings and body.
Skill: theme-factory
Read: themes/desert-rose.md

Here's the Desert Rose :root block, using the palette and fonts from the theme file:

:root {
  /* Desert Rose palette */
  --color-dusty-rose: #d4a5a5;   /* soft primary */
  --color-clay: #b87d6d;         /* earthy accent */
  --color-sand: #e8d5c4;         /* warm neutral background */
  --color-burgundy: #5d2e46;     /* rich dark contrast */

  /* Semantic roles */
  --color-bg: var(--color-sand);
  --color-surface: #f4eae0;      /* lighter tint of sand for cards */
  --color-text: var(--color-burgundy);
  --color-primary: var(--color-dusty-rose);
  --color-accent: var(--color-clay);

  /* Typography (theme specifies FreeSans; fallbacks cover machines without it) */
  --font-heading: "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "FreeSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading-weight: 700;
  --font-body-weight: 400;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}
  • Contrast: Burgundy text on sand reads well. Dusty rose and clay on sand are too low-contrast for body text, so use them for buttons, borders, and decorative fills. For text on a clay or rose button, use burgundy, or white only at large sizes.
  • Fonts: FreeSans isn't installed on most visitors' devices, so most people will see the Helvetica/Arial fallback. That keeps the look close to the theme. For a more romantic feel, you could swap --font-heading for a serif such as Cormorant Garamond. That would depart from the theme spec, so I haven't done it.
  • Added values: --color-surface (#f4eae0) and the semantic aliases aren't part of the theme. I added them for cards and easier reuse.

Real run, output shown verbatim.

What it does

Provides a curated set of professional color palettes and font pairings that can be applied to any artifact: slide decks, documents, reports and HTML landing pages. If none of the presets fit, it can generate a new theme.

The 10 themes

Ocean Depths, Sunset Boulevard, Forest Canopy, Modern Minimalist, Golden Hour, Arctic Frost, Desert Rose, Tech Innovation, Botanical Garden and Midnight Galaxy. Each theme has four hex colors, a heading font and a body font, plus notes on what it suits.

How it works

  1. Show the bundled theme-showcase.pdf so you can see all themes.
  2. Ask which theme to use and wait for your confirmation.
  3. Read that theme's file and apply its colors and fonts consistently.
Notes & risks

Theme files plus a PDF showcase. We checked the PDF for embedded scripts and found none. No network access. The themes name fonts such as DejaVu and FreeSans that may not be installed on every machine, so a fallback font may be used.