LESSON 01 OF 03 · WRITTEN GUIDE
Define your design tokens
Tokens name recurring decisions so a system can reuse them. A token such as text-muted explains a role; a scattered hex value explains only a color. Start with the few decisions your interface actually repeats.
Make it practical
Define tokens for background, surface, text, muted text, accent, border, spacing, and corners. Check color contrast in the combinations you actually use.
TRY THIS PROMPT
Extract a minimal token set from this interface. Name tokens by role, show where each is used, and flag inconsistent values. Do not create unused tokens or redesign the page.
Check your work
Can you change the accent in one place? Are text and background pairs readable? Do token names explain their intended use?
Use the output as a draft. Compare it with the brief, inspect the work, and keep the decisions you can explain.