What this prompt does
This prompt scaffolds a production-ready design token system from five brand inputs: name, product type, personality, primary color, and target audience. The template generates tokens across eight categories — color palettes with a configurable shade count, typography, spacing, border radius, shadows with dark mode variants, breakpoints, animations, and a z-index layering system.
The multi-format output requirement is baked into the template itself. Depending on how you set [output_count], a single run can produce CSS custom properties, a Tailwind extend block, a Style Dictionary-compatible JSON file, and TypeScript type definitions — all from the same source of truth. That means the same token values flow into your stylesheet, your component library config, your Figma plugin, and your TypeScript codebase without manual transcription. The WCAG AA contrast matrix requirement is explicit in the template, so the model surfaces accessibility failures before they reach production rather than leaving them as a follow-up audit.
When to use it
- Starting a new SaaS product and need a token foundation before touching any components.
- Auditing an existing brand and rebuilding its token layer to properly support dark mode.
- Onboarding a design-engineer pairing where Figma tokens and Tailwind config must stay synchronized.
- Bootstrapping a white-label product shipping to multiple clients with different brand personalities.
- Generating a baseline token set to feed into Style Dictionary for a multi-platform (web + mobile) design system.
- Creating a contrast matrix to present to a client as part of an accessibility compliance deliverable.
Example output
For a brand named Kori (B2B SaaS, professional-calm personality, primary #38D39F, 9 shades), the Style Dictionary v3-format JSON output looks like this:
{
"color": {
"primary": {
"100": { "value": "#c8f5e6" },
"500": { "value": "#38D39F" },
"900": { "value": "#0a4033" }
},
"semantic": {
"success": { "value": "{color.primary.500}" },
"error": { "value": "#e53e3e" }
}
},
"shadow": {
"md": {
"light": { "value": "0 4px 12px rgba(0,0,0,0.08)" },
"dark": { "value": "0 4px 12px rgba(0,0,0,0.40)" }
}
}
}
If you are on Style Dictionary v4, ask the model to use DTCG format instead: keys become $value and $type, and shadow composite tokens use offsetX/offsetY rather than x/y. The CSS output maps every key to a custom property under :root, with a separate block for dark mode overrides using whichever selector strategy you specify. The contrast matrix flags any pair below 4.5:1 for normal text and 3:1 for large text inline, keyed to the shade pairs it checked.
Pro tips
- Set
[shade_count]to 11 (50-950) for a Tailwind-native palette. If you're targeting an OpenProps or Material 3 scale instead, 10 shades maps cleanly. Pick one convention before generating — mixing them breaks Tokens Studio imports because each plugin expects a consistent key structure. - Be explicit with
[font_stack]. "System UI" produces very different spacing rhythm than "Inter + DM Serif Display". If your brand uses a variable font, say so — the model will includefont-variation-settingstokens rather than static weight values. - The WCAG matrix quality depends on shade count. With fewer than 7 shades, the model often cannot find a compliant pair for both large and small text. Request at least 9 shades whenever accessibility is a deliverable; the matrix will then call out which shade numbers to use for body copy versus UI labels.
- Pair this with a Style Dictionary config prompt as a follow-up. The JSON output maps directly to Style Dictionary's input format. A second prompt that generates the
config.jsontransform pipeline — specifying your platforms, transforms, and output paths — saves an hour of documentation reading and eliminates the guesswork around format registration. - Scope
[brand_personality]tightly. "Professional and calm" generates very different animation easing curves and shadow opacity than "energetic and playful." Vague inputs like "modern" produce generic defaults. The personality string directly shapes the animation duration and easing tokens, so imprecision there propagates into every transition in your component library.
