Design System

Tokens + primitives (shadcn) aligned with Figma palette

Tokens

These use shadcn token classes. If any swatch looks off, update globals.css tokens.

Background

bg-background

Aa 123

Quick contrast check

Foreground (text sample)

Text should be readable on background

bg-background text-foreground

Aa 123

Quick contrast check

Card

bg-card

Aa 123

Quick contrast check

Card Foreground

bg-card text-card-foreground

Aa 123

Quick contrast check

Popover

bg-popover

Aa 123

Quick contrast check

Popover Foreground

bg-popover text-popover-foreground

Aa 123

Quick contrast check

Muted

bg-muted

Aa 123

Quick contrast check

Muted Foreground

bg-background text-muted-foreground

Aa 123

Quick contrast check

Accent

bg-accent

Aa 123

Quick contrast check

Accent Foreground

bg-accent text-accent-foreground

Aa 123

Quick contrast check

Primary

Primary / Accent

bg-primary text-primary-foreground

Aa 123

Quick contrast check

Secondary

Secondary

bg-secondary text-secondary-foreground

Aa 123

Quick contrast check

Destructive

Error / destructive

bg-destructive text-destructive-foreground

Aa 123

Quick contrast check

Focus ring sanity check

Click the input to confirm ring color matches your Figma accent.

Buttons

Validates your shadcn button styles + token mapping.

Inputs

Default shadcn Input states.

Default

Disabled

TextField

Single component (label + helper/error + icon slots), aligned with shadcn tokens and your palette.

We’ll never share your email.

Use at least 8 characters.

Wrong password

Quick visual regression

A small snapshot block to quickly spot theme issues.

Card

Muted foreground example

Form snippet

Destructive

Error + action