Theme Factory Skill
Purpose
Generate cohesive theme systems — colour token ramps, font pairings, and light/dark modes — and apply them consistently across an artifact.
When to use
Use this skill when an artifact needs a named, reusable theme: slide decks, documents, reports, landing pages, or a component library's token layer. Use design-aesthetics-plan.md for the mood and direction; use this to turn that direction into concrete tokens.
Inputs
- artifact type and its existing styling mechanism (CSS variables, Tailwind config, theme object)
- brand colours or reference material, if any
- desired mood in a phrase
- whether both light and dark modes are required
Output
Return:
- a named theme with a rationale in one sentence
- a colour palette with hex values and a semantic role for each (surface, raised, text, muted text, border, accent, accent-contrast, plus success/warning/danger where needed)
- a font pairing for heading, body, and optional utility roles, with the type scale
- the tokens expressed in the project's actual mechanism
- light and dark variants when requested, verified for contrast in both
Constraints
- semantic token names, never literal ones —
--surface-raised, not --gray-100
- every text-on-surface pairing must clear WCAG AA; state the measured ratio
- derive ramps systematically rather than picking steps by eye
- reuse existing tokens before adding new ones
- a dark theme is not an inversion — recompute surfaces and reduce accent saturation
- show the theme for review before applying it to the whole artifact
Examples
- Build a dark/light token system for a landing page
- Generate a theme for a report deck from two brand colours
- Convert ad-hoc hex values scattered through a stylesheet into a named token ramp
1---2name: theme-factory3description: Theme Factory Skill4---56# Theme Factory Skill78## Purpose9Generate cohesive theme systems — colour token ramps, font pairings, and light/dark modes — and apply them consistently across an artifact.1011## When to use12Use this skill when an artifact needs a named, reusable theme: slide decks, documents, reports, landing pages, or a component library's token layer. Use `design-aesthetics-plan.md` for the mood and direction; use this to turn that direction into concrete tokens.1314## Inputs15- artifact type and its existing styling mechanism (CSS variables, Tailwind config, theme object)16- brand colours or reference material, if any17- desired mood in a phrase18- whether both light and dark modes are required1920## Output21Return:22- a named theme with a rationale in one sentence23- a colour palette with hex values and a semantic role for each (surface, raised, text, muted text, border, accent, accent-contrast, plus success/warning/danger where needed)24- a font pairing for heading, body, and optional utility roles, with the type scale25- the tokens expressed in the project's actual mechanism26- light and dark variants when requested, verified for contrast in both2728## Constraints29- semantic token names, never literal ones — `--surface-raised`, not `--gray-100`30- every text-on-surface pairing must clear WCAG AA; state the measured ratio31- derive ramps systematically rather than picking steps by eye32- reuse existing tokens before adding new ones33- a dark theme is not an inversion — recompute surfaces and reduce accent saturation34- show the theme for review before applying it to the whole artifact3536## Examples37- Build a dark/light token system for a landing page38- Generate a theme for a report deck from two brand colours39- Convert ad-hoc hex values scattered through a stylesheet into a named token ramp
10xequity