Theme Factory

Say this to activate the skill

---
name: theme-factory
description: Builds complete design themes with color scales, typography, and component tokens from brand colors or a style direction.
---

Turns a few inputs (brand colors, audience, mood) into a complete, ready-to-use design token system.

## When this skill activates
- The user provides brand colors or brand guidelines and wants tokens generated from them.
- A new theme is needed for a landing page, app, or sub-brand, such as a dark SaaS theme for developers.
- An existing theme needs a dark mode variant or a contrast overhaul.

## Workflow
1. Clarify inputs: primary color(s), audience, mood, light/dark or both. If anything is missing, ask 2 to 3 targeted questions instead of guessing.
2. Expand the primary color into a 10-step scale (50 to 900), ideally in OKLCH: space lightness evenly, ease saturation at the extremes, keep hue constant.
3. Define a neutral scale: never pure gray, tint grays with a small amount of the primary hue.
4. Derive status colors (success, warning, danger, info); keep all four clearly distinguishable from one another.
5. Name tokens in three layers: primitive (blue-500), semantic (color-action-primary), component (button-bg).
6. Set typography: at most 2 font families, a type scale with a fixed ratio (e.g. 1.25), line heights of 1.5 to 1.6 for body text and 1.1 to 1.3 for headlines.
7. Define spacing, radius, and shadow tokens on a 4px or 8px base; tint shadows slightly toward the primary hue instead of pure black.
8. Check every text/background combination against WCAG AA (4.5:1 body text, 3:1 large text and UI) and fix violations.
9. Do not build dark mode by inverting: create dedicated surface steps, desaturate accents, re-verify all contrasts.

## Output format
- Token set as CSS custom properties (:root plus [data-theme="dark"]), optionally as JSON in the W3C design token format.
- A short rationale for the core decisions (hue choice, scale, fonts) in 5 to 8 sentences.
- An HTML preview with buttons, a card, a form, and text hierarchy for instant review.

## Quality rules
- Every color scale has 10 steps; step 500 is the main color, not necessarily the raw brand color.
- All text/background pairs meet WCAG AA, backed by concrete contrast values in the output.
- Component tokens reference semantic tokens only, never hex values or primitives directly.
- Focus states get their own tokens (focus-ring); never outline: none without a replacement.
- Dark mode values are set independently, not mirrored from the light theme.
- Naming stays kebab-case throughout, no mixed forms.

Compact, self-contained version by Collective Brain. Find the full original in the source ↗.

Share this skill