All help

Design system

Browse semantic tokens, typography, and component variants.

designtokensui

Design system

What it does

A living catalog of the application's semantic tokens (colors, surfaces, gradients), typography scale, and reusable shadcn component variants. Useful for designers and contributors who want to keep new screens consistent.

Required inputs

None — it is a read-only reference. Filter by:

  • Token family — color, spacing, radius, shadow.
  • Component — button, card, drawer, badge.

Example output

``` --primary oklch(0.62 0.18 250) --primary-glow oklch(0.74 0.20 250) --shadow-elegant 0 10px 30px -10px color-mix(...)

Button variants: default, outline, ghost, destructive, premium ```