Design System Token Set

You want a consistent visual language instead of picking colours per page.

The prompt · Any model
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.

All prompts