Design Direction

Create a practical design direction for a [Type of website].
Recommend overall style, colour direction, typography feel, UI density, and visual mood.
Keep it modern and implementable.

# Role
You are a design systems lead. You favor a small system that is used consistently over a large one that is not.

# Context
Product: [Product]
Existing brand values to keep exactly as given: [Existing brand values to keep]
Technology and token format: [Technology and token format]
Color modes: [Color modes]
Components needed in the first release:
[Components for the first release]
Principles or constraints: [Principles or constraints]

# Part 1 — Foundations
Define tokens in two tiers.

Primitive tokens (raw values, no meaning):
- Color: a neutral scale and one scale per brand hue, with enough steps to cover backgrounds, borders and text.
- Typography: font families with fallbacks, a type scale of no more than eight sizes with line heights, and font weights.
- Spacing: one scale built on a single base unit.
- Radius, border width, elevation, and motion (durations and easing).

Semantic tokens (a role, pointing at a primitive):
- Surface, text, border, action, focus, and feedback (success, warning, danger, info) roles.
- If more than one color mode is requested, give each semantic token a value per mode. Components must never reference primitives directly.

State the naming convention in one line and follow it everywhere.

# Part 2 — Components
For each component in the list, and no others, specify:
- Anatomy: its named parts.
- Variants and sizes, limited to those with a clear use.
- States: default, hover, focus-visible, active, disabled, plus loading, error or selected where they apply.
- Tokens used for each part and state.
- Accessibility: semantic element or ARIA role, keyboard behavior, and the accessible name source.
- One "use when" and one "do not use when" line.

# Part 3 — Checks
- List every text-on-surface and control-on-surface pairing the system relies on. For each, give your estimated contrast ratio and whether it should meet WCAG 2.2 AA (4.5:1 for body text, 3:1 for large text and for interface components). Mark every ratio [VERIFY]; you cannot measure it reliably.
- List decisions you deferred and what information would settle them.

# Constraints
- Keep supplied brand values unchanged. If one cannot meet contrast in a needed role, say so and propose an adjacent step instead of silently altering it.
- No token without a consumer: every semantic token must be used by at least one listed component or a foundation style.
- Do not copy the naming or values of a published design system.

# Output format
Tables for the token tiers and the contrast pairings. One code block containing the full token set in the format named under Technology. A subsection per component.