HomeCasa Prompts

Design tokens and component specs

Define design system tokens (primitive, semantic and component) and spec components with states, variants and accessibility. Designed for ChatGPT, Claude and Gemini. It includes 5 customizable variables and you can copy it for free in one click.

Advanced · Text · Pending editorial review

Designed for:

Prompt

Act as a design systems designer with experience taking tokens from Figma to code.

Product: {{product}}.
Platforms: {{platforms}}.
Available brand identity: {{brand}}.
Priority components: {{components}}.
Accessibility target: {{a11y_level}}.

Deliver, in this order:
1. A three-tier token architecture (primitive → semantic → component) and a naming convention, with examples.
2. Primitive tokens: a color scale (9-10 steps per hue, derived from the brand), typography (a modular scale with sizes, line heights and weights), spacing (4 or 8 base), radii, shadows, opacities and motion durations.
3. Semantic tokens for light and dark themes (background, surface, text, border, action, and success, warning, error and info states), checking the contrast of every text/background pair.
4. An export in W3C Design Tokens format (JSON) and its CSS custom properties equivalent.
5. For each priority component, a spec sheet with: anatomy, variants, sizes, states (rest, hover, focus, active, disabled, loading, error), tokens consumed, keyboard behavior, ARIA attributes and don'ts.
6. Governance rules: when to create a new token, how to deprecate and how to version.

Constraints:
- Do not invent brand colors: if I have none, propose a temporary palette marked [TEMPORARY].
- State the calculated contrast ratios; if any fails, propose an alternative.
- Ask me for anything missing before defining the semantic tokens.

How to use it

  1. List the brand colors and typefaces you already have (hex values if possible).
  2. Pick a few priority components to start: button, text field, card and modal.
  3. Import the JSON into Tokens Studio for Figma or Style Dictionary to generate code.
  4. Double-check contrast ratios with an external tool before approving the palette.

Usage example

Product: banking app for freelancers · Platforms: web and mobile · Brand: blue #1E40AF and the Inter typeface · Components: button, input, card, modal.

Sample output

1. Token architecture

TierExampleUse
Primitivecolor.blue.800 = #1E40AFRaw value, never used in components
Semanticcolor.action.primary = {color.blue.800}Intent, changes per theme
Componentbutton.primary.bg = {color.action.primary}Consumed by one component only

Convention: category.property.variant.state, e.g. color.text.on-action.disabled.

3. Contrast (light theme)

Text/background pairRatioWCAG 2.2 AA
White on blue #1E40AF8.72:1✅
White on coral #F973622.74:1❌
#111827 on coral #F973626.47:1✅

Proposal: use coral only as a background with dark text, or a darkened coral for text on white (5.62:1 with #B4412F, [TEMPORARY]).

4. Export

{
  "color": {
    "blue": { "800": { "$type": "color", "$value": "#1E40AF" } },
    "action": { "primary": { "$type": "color", "$value": "{color.blue.800}" } }
  }
}
:root { --color-blue-800: #1E40AF; --color-action-primary: var(--color-blue-800); }

5. Button — states

Rest, hover, focus (visible 2 px ring), active, disabled, loading (aria-busy="true"), error…

Key facts

Category
UI/UX design · Design systems
Output type
Text
Level
Advanced
Designed for
ChatGPT, Claude and Gemini
Verified in
Pending editorial verification
Variables
Product, Platforms, Brand identity, Priority components and Accessibility target
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Why do I need semantic tokens if I already have primitives?

Primitives describe values (“blue 600”) while semantic tokens describe intent (“primary action color”). That layer lets you switch themes or rebrand without touching every component.

Which token format should I use?

The W3C Design Tokens Community Group format is the emerging standard, and tools like Tokens Studio and Style Dictionary can turn it into CSS, iOS or Android code.

What is this prompt for?

Define design system tokens (primitive, semantic and component) and spec components with states, variants and accessibility.

Which AI tools does it work with?

It is designed for ChatGPT, Claude and Gemini. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Product, Platforms, Brand identity, Priority components and Accessibility target). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is advanced: it is meant for people with experience in the topic who can evaluate and adjust the result.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts