3 of 6‹›

Design tokens

Consistent spacing, type and colour scales you can paste into code.

Updated Jul 26, 2026

ChatGPT ↗Claude ↗
Set up design tokens for what you're building. Feel I'm after: calm professional, playful, dense and technical. Dark mode: yes or no. Give me: a type scale in rem with what each size is for, a spacing scale, semantic colours (surface, text, border, primary, success, warning, danger) with hex codes and dark-mode counterparts, border radii, and two shadow levels. Output as CSS custom properties ready to paste. Check the text-on-surface combinations meet WCAG AA and tell me any that don't.

Stop losing good prompts. Sign up free / log in

What to try next

Popular elsewhere in the library.

Data & analysis

Clean up a messy spreadsheet

Turn inconsistent, half-finished data into a table you can trust.

View →
Writing & editing

Article from a rough idea

Turn one sentence into a structured, publishable draft.

View →

More in Design & images

Image prompt engineer

Turn a vague picture in your head into a detailed generation prompt.

View →

Interface critique

★

A design lead's review of your screen, with fixes in priority order.

View →

Brand identity direction

★

Two coherent visual directions for a new brand, with reasoning.

View →