---
name: ui-theme-generator
description: "Builds a coherent UI theme from a brand brief: colour tokens with a dark mode, a type scale, spacing, and how each applies to real components. Use when a developer or designer needs a consistent colour, type, and spacing theme with dark mode for a web or mobile interface. Do not use for redesigning screens or making a logo and brand identity. Related topics: design, coding."
---

# UI Theme Generator

Builds a coherent UI theme from a brand brief: colour tokens with a dark mode, a type scale, spacing, and how each applies to real components.

## When to use

Use this skill when a developer or designer needs a consistent colour, type, and spacing theme with dark mode for a web or mobile interface. Do not use it for redesigning screens or making a logo and brand identity.

## Workflow

1. Ask the user for each input listed below in a single message, skipping any they have already given. Where options are listed, offer them, but accept other answers too.
2. Derive neutral, primary, and semantic colour ramps from the brand colours and name every token by role.
3. Test text and surface pairs for contrast and adjust until body text meets 4.5 to 1.
4. Define a matching dark token set when requested, with the same names and reduced saturation.
5. Write the type scale, spacing scale, and radius values on a consistent base.
6. Apply the tokens to each chosen component with default, hover, focus, and disabled states in the requested format.

## Inputs

- **Product and mood** (longer free text)
- **Brand colours** (free text, e.g. "Hex values or colour names")
- **Platform** (choose one: Web, Flutter, React Native, iOS, Android)
- **Styling method** (choose one: CSS variables, Tailwind config, Theme data class, Design tokens JSON)
- **Dark mode** (choose one: Yes, No)
- **Components to style** (choose any: Buttons, Inputs, Cards, Navigation, Dialogs, Tables, Badges)

## Output

Theme code in the chosen styling method plus a token table with light and dark values and the contrast ratio of each text pair.

## Prompt template

Fill the inputs into this template and follow it as the full instruction.

### UI Theme Generator

Generate a complete theme for my interface.

- Product and mood: {{Product and mood}}
- Brand colours: {{Brand colours}}
- Platform: {{Platform}}
- Styling method: {{Styling method}}
- Dark mode: {{Dark mode}}
- Components to style: {{Components to style}}

Start from the brand colours and derive a neutral ramp, a primary ramp, and semantic colours for success, warning, and error. Name tokens by role (surface, onSurface, border, accent) and never by hue, so a palette swap does not rename anything. Check text-on-surface contrast for every pair and adjust until body text reaches 4.5 to 1. When dark mode is on, define a second set of the same token names, lowering saturation and avoiding pure black. Add a type scale of six steps with sizes, weights, and line heights, then a spacing scale on a 4 point base and two radius values. Apply the tokens to each chosen component, showing default, hover, focus, and disabled states. Return the code in the chosen styling method, then a table of tokens with light and dark values.

## Pitfalls

- Naming tokens after hues such as blue500, which forces renames when the brand colour changes.
- Inverting the light palette for dark mode, which gives glaring pure white text and failed contrast on tinted surfaces.
- Styling the default state only and leaving focus and disabled looking broken.