Design system · juxt.ui

Code is the source of truth. Every value below maps one-to-one to a token in tokens.css, so a design file built from this page and the shipped components stay in sync. Name Figma variables after the tokens (color/surface-raised, radius/md) and the mapping stays obvious.

Colour #

Create one variable collection with two modes, Light and Dark. The palette is deliberately small: six surfaces, three lines, four text colours, ink, one accent, three feedback hues.

Group	Variables
Surfaces	bg · surface · surface-raised · surface-sunken · surface-hover · surface-active · overlay
Lines	border-subtle · border · border-strong
Text	fg · fg-secondary · fg-muted · fg-disabled
Ink & accent	ink · ink-hover · ink-fg · accent · accent-hover · accent-strong · accent-fg · accent-text · accent-soft · accent-border · ring · ring-soft
Feedback	success · success-text · success-soft · success-border · danger · danger-hover · danger-fg · danger-text · danger-soft · danger-border · danger-ring · warning · warning-text · warning-soft · warning-border · info · info-text · info-soft · info-border
Tooltip	tooltip-bg · tooltip-fg · tooltip-border

The accent #079D6B is used for state only — focus, checked, on, success, current. Primary actions use ink (near-black in light, near-white in dark).

Typography #

Inter (variable) with cv11, ss01 and ss03 enabled; JetBrains Mono for code. Weights: Regular 400, Medium 500, Semibold 600. Letter spacing −1.1% at 14px and below, −2.2% for 22px and up.

Style	Size	Use
text-4xl	`40px`	Display
text-3xl	`28px`	Page title
text-2xl	`22px`	Section title
text-xl	`18px`	Lead
text-lg	`16px`	Dialog title, large body
text-md	`14px`	Controls, body
text-sm	`13px`	Labels, secondary
text-xs	`12px`	Descriptions, captions
text-2xs	`11px`	Keyboard hints, tiny badges

Spacing and radius #

Use a 4px grid with 6px and 10px half-steps. Controls are 24, 28, 34 or 40px tall. Radii: xs 4px, sm 6px, md 8px, lg 12px, full 9999px.

Components #

Build each as a component set with variant properties named after the Vue props (variant, size, state), so designers and developers use the same words.

Button

Variants: primary, secondary, outline, ghost, destructive
Sizes (px): xs 24 · sm 28 · md 34 · lg 40
States: default, hover, pressed, focus, disabled, loading
Anatomy: Radius sm (xs for xs, md for lg). Label 14/13/12px medium. Icon 1em, 6px gap. Pressed: scale 0.97.

Input · Textarea · Select

Variants: —
Sizes (px): sm 28 · md 34 · lg 40
States: default, hover, focus, invalid, disabled, read-only
Anatomy: Border 1px border; hover border-strong; focus accent border + 3px ring-soft halo. Label 13px medium, 6px above. Helper 12px muted, 6px below.

Checkbox

Variants: —
Sizes (px): 16
States: unchecked, checked, indeterminate, hover, focus, disabled
Anatomy: Radius xs. Checked: accent fill, 2px white tick. Label 14px, 10px gap.

Switch

Variants: —
Sizes (px): sm 26×15 · md 32×18
States: off, on, hover, pressed, focus, disabled
Anatomy: Track border-strong (off) / accent (on). White thumb, 2px inset, shadow-sm.

Badge

Variants: neutral, success, warning, destructive, accent · status
Sizes (px): sm 17 · md 20
States: —
Anatomy: Radius xs, no border. Tinted fill with -text colour; accent is solid. Status: no fill, 7px square marker (1.5px radius) + text.

Avatar

Variants: circle, square
Sizes (px): 20 · 24 · 32 · 40 · 56
States: image, initials, glyph · online, away, busy, offline
Anatomy: Hairline inner ring. Status dot at bottom-right with a 2px ring in the surface colour.

Card

Variants: outline, muted
Sizes (px): padding 0 · 12 · 20 · 24
States: —
Anatomy: Radius lg. Title 14px semibold, description 13px muted. Footer separated by border-subtle.

Tabs

Variants: line, pill
Sizes (px): sm 28 · md 34
States: default, hover, selected, focus, disabled
Anatomy: Line: 2px fg indicator on a 1px border baseline. Pill: sunken track, 3px inset, raised indicator with shadow-sm.

Menu · Select list

Variants: —
Sizes (px): Items 28 min
States: default, active, disabled, destructive
Anatomy: Surface raised, radius md, shadow-md, 4px padding. Items radius xs, 8px inline padding.

Tooltip

Variants: —
Sizes (px): —
States: —
Anatomy: Dark in both themes. Radius sm, 4×8 padding, 12px medium, max 280px. Offset 6px.

Toast

Variants: default, success, error, warning, info, loading
Sizes (px): 360 wide
States: resting, hover (paused), focus
Anatomy: Radius md, shadow-md, 12px padding. 16px icon, 14px medium title, 13px description. 2px progress hairline.

Dialog

Variants: —
Sizes (px): sm 400 · md 480 · lg 640
States: open, nudge
Anatomy: Radius lg, shadow-lg, 20px padding. Title 16px semibold. Footer right-aligned, 8px gap. Bottom sheet below 640px.

Command palette

Variants: —
Sizes (px): 640 wide
States: empty, results, loading, no results
Anatomy: 52px search row (16px text). 40px rows, radius sm; active row has a 2px accent marker. 36px footer with hints.

States #

Hover — one step up in surface or border. Never a colour change on neutral elements.
Pressed — scale 0.97 for buttons; one more surface step for list items.
Focus — 2px outline in ring, 2px offset. Fields use the accent border plus a 3px ring-soft halo instead.
Disabled — 45–50% opacity for controls, fg-disabled for text. No hover.
Invalid — danger border with danger-ring halo on focus; message in danger-text.