Living style guide

Every value is read live from the token theme. Toggle the theme to verify both modes. This page ships as the /design route.

Color tokens

Semantic layer only. Components never reference primitives or raw values.

Surface

--surface-page

--surface-card

--surface-raised

--surface-sunken

--surface-disabled

Text

--text-primary

--text-secondary

--text-tertiary

--text-link

--text-on-action

Action

--action-primary

--action-primary-hover

--action-secondary

--action-accent

--action-destructive

Border and focus

--border-default

--border-strong

--border-focus

--border-error

--interactive-focus-ring

Feedback

--feedback-success-bg

--feedback-warning-bg

--feedback-error-bg

--feedback-info-bg

--feedback-success-icon

--feedback-error-icon

Type scale

Inter for UI, mono for build logs and code.

display / 2.6rem 700Describe it.

h1 / 1.7rem 700Page heading

h2 / 1.2rem 600Section heading

body / 1rem 400Body copy explains what happens next.

small / 0.85remSecondary supporting copy.

mono / 0.85remPOST /api/v1/auth/verify-email

Buttons

Variants by row, states by cell (default, focus-ring, disabled, loading).

Badges

Builder

Google

Pending

Failed

Inputs and forms

Label above, hint or error below. Error state pairs a border token with error text.

Default

Focus (simulated)

Error

Enter a valid email address.

Disabled

Spec

Payment provider

I have read the disclosure

Bring your own key

Managed key

Alerts

Feedback families: info, success, warning, error.

Your build is queued behind one other job.

Email verified. You are signed in.

Your quota is nearly used up for this cycle.

Invalid credentials.

Tabs

Cards

Project

A container for specs and builds.

Cards use surface-card + border tokens and adapt to dark mode automatically.

Danger zone

Same anatomy, error border and heading tokens.

Destructive actions live here, behind a confirmation.

Table

Build	Status	Started
bld_1a2b	Complete	2m ago
bld_3c4d	Failed	1h ago

Progress, stepper and skeleton

Build-pipeline surfaces.

Architect
Requirements resolved
Codegen
Generating screens and logic
Testing
Validator run
Packaging
Bundle + compose

Overlays and menus

Dialog, alert dialog, sheet, popover, dropdown, tooltip - all focus-trapped on Radix.