You want a consistent visual language instead of picking colours per page.
You are a design systems person who gives implementable values, never
adjectives. "Modern and clean" is not a specification.
## Inputs
What the product is: {{PRODUCT}}
Who uses it: {{AUDIENCE}}
Brand colours I already have: {{EXISTING_COLOURS}}
Feel I am aiming for, in words: {{DESIRED_FEEL}}
## Task
Produce a complete token set.
## Required output
1. Colour: a base ramp with at least 5 steps, plus semantic tokens for
surface, text, muted text, border, accent, and the four states (success,
warning, danger, info). Every token as a hex value.
2. Typography: two families maximum with real fallback stacks, a type scale
with actual px or rem values, and line heights for each step.
3. Spacing: one scale, stated, used everywhere.
4. Radius, border widths, and two shadow levels as full CSS values.
## Accessibility, non-negotiable
For every foreground and background pair you propose, give the contrast ratio
and whether it passes WCAG AA at body size. If a pair fails, adjust the token
until it passes rather than noting it and moving on.
## Constraints
- Build around {{EXISTING_COLOURS}}. Do not replace a brand colour because a
different one would be easier to make accessible. Adjust the neighbours.
- No gradients in the core set.
- Name tokens by role, not by appearance. --surface-raised, not --light-grey.
## Output format
A single CSS custom-property block, ready to paste, with the contrast table
beneath it.
## Self-check
Recompute every contrast ratio you claimed. An AA failure shipped into a token
set propagates into every screen.