Turn brand choices into design tokens
Translate a visual direction into a small, usable token system for consistent interfaces.
Make it yours.
A little context makes a better starting point.
Kept on your device. Prompts run in the AI tool you choose.
Map the foundations
Begin with what the product needs: backgrounds, text, actions, borders, and feedback. Existing package tokens should remain the source of truth.
Help me define a small design token system for A portfolio and learning library for a creative technology studio. Brand direction: Restrained black and warm white, bright yellow accents, confident editorial typography. First ask for my existing UI package, theme variables, and any fixed brand values. Reuse those values when present. Propose semantic roles for background, surface, text, muted text, border, accent, focus, success, and error. Separate raw values from semantic names. Explain the purpose of each role and flag any missing decisions.
Before you move on
The complete guide.
Read every step, prompt, and review check in one place. The examples use the context below; use the interactive workflow above to make them your own.
Example context
- Product or website
- A portfolio and learning library for a creative technology studio
- Brand direction
- Restrained black and warm white, bright yellow accents, confident editorial typography
1. Map the foundations
Begin with what the product needs: backgrounds, text, actions, borders, and feedback. Existing package tokens should remain the source of truth.
Example prompt Help me define a small design token system for A portfolio and learning library for a creative technology studio. Brand direction: Restrained black and warm white, bright yellow accents, confident editorial typography. First ask for my existing UI package, theme variables, and any fixed brand values. Reuse those values when present. Propose semantic roles for background, surface, text, muted text, border, accent, focus, success, and error. Separate raw values from semantic names. Explain the purpose of each role and flag any missing decisions.
Review checklist
- Inspect existing package tokens first
- Name tokens by their purpose
- Include focus and feedback states
2. Make the system usable
Add only the scales needed for your first components. Test small values in context before expanding the system.
Example prompt Using the agreed tokens for A portfolio and learning library for a creative technology studio, propose CSS custom properties for a compact type scale, spacing, corner radii, and motion durations. Follow the naming conventions of the existing UI package. Include examples for a button, article card, and text input. Preserve this brand direction: Restrained black and warm white, bright yellow accents, confident editorial typography. Label all new values as proposals. Include a reduced-motion treatment and a visible keyboard focus state.
Review checklist
- Try the tokens in three real components
- Check both compact and spacious layouts
- Document intentional exceptions
3. Test before adopting
A palette is not a system until it works across actual content, states, and devices.
Example prompt Create a review checklist for the proposed design tokens for A portfolio and learning library for a creative technology studio. Cover text contrast, focus visibility, form errors, long headings, mobile spacing, disabled states, and reduced motion. Identify the exact foreground/background pairs that need contrast measurement. Do not certify accessibility without measured results. Suggest the smallest fixes that preserve this direction: Restrained black and warm white, bright yellow accents, confident editorial typography. Finish with a short token usage guide for a new contributor.
Review checklist
- Measure contrast for real color pairs
- Use keyboard navigation through examples
- Check long content at narrow widths
What you’re working toward.
A documented token proposal and a practical checklist for testing it in real components.