Design tokens · juxt.ui

Tokens are CSS custom properties prefixed with --juxt-. They’re available globally once the stylesheet is loaded, so your own components can use the same vocabulary:

.my-panel {
  padding: var(--juxt-space-4);
  border: 1px solid var(--juxt-border);
  border-radius: var(--juxt-radius-lg);
  background: var(--juxt-surface);
  color: var(--juxt-fg-secondary);
  transition: border-color var(--juxt-duration-fast) var(--juxt-ease-standard);
}

Colour #

Values update live with the theme toggle in the header.

Surfaces

Each step up is a layer closer to the user.

--juxt-bg

Page · …

--juxt-surface

Cards, inputs · …

--juxt-surface-raised

Popovers, dialogs · …

--juxt-surface-sunken

Wells, code · …

--juxt-surface-hover

Hover fill · …

--juxt-surface-active

Pressed fill · …

--juxt-overlay

Backdrops · …

Lines

--juxt-border-subtle

Dividers · …

--juxt-border

Default · …

--juxt-border-strong

Hover, controls · …

Text

--juxt-fg

Primary · …

--juxt-fg-secondary

Body · …

--juxt-fg-muted

Hints, labels · …

--juxt-fg-disabled

Disabled · …

Ink & accent

Ink carries primary actions; the accent marks state.

--juxt-ink

Primary action · …

--juxt-ink-hover

Primary hover · …

--juxt-ink-fg

Text on ink · …

--juxt-accent

#079D6B · …

--juxt-accent-hover

Accent hover · …

--juxt-accent-strong

Pressed accent · …

--juxt-accent-fg

Text on accent · …

--juxt-accent-text

Accent as text · …

--juxt-accent-soft

Tints · …

--juxt-accent-border

Accent outlines · …

--juxt-ring

Focus ring · …

--juxt-ring-soft

Field focus halo · …

Feedback

Success is the accent under another name, so state always reads the same.

--juxt-success

Alias of accent · …

--juxt-success-text

…

--juxt-success-soft

Tint · …

--juxt-success-border

Outline · …

--juxt-danger

…

--juxt-danger-hover

Hover · …

--juxt-danger-fg

Text on danger · …

--juxt-danger-text

…

--juxt-danger-soft

Tint · …

--juxt-danger-border

Outline · …

--juxt-danger-ring

Invalid focus halo · …

--juxt-warning

…

--juxt-warning-text

…

--juxt-warning-soft

Tint · …

--juxt-warning-border

Outline · …

--juxt-info

…

--juxt-info-text

…

--juxt-info-soft

Tint · …

--juxt-info-border

Outline · …

Tooltip

Tooltips stay dark in both themes.

--juxt-tooltip-bg

Fill · …

--juxt-tooltip-fg

Text · …

--juxt-tooltip-border

Outline, dark only · …

Typography #

Inter for everything you read, JetBrains Mono for everything you copy. Weights stay at 400, 500 and 600 — nothing is bold for the sake of it. Large sizes get slightly tighter tracking.

40pxDisplay--juxt-text-4xl

28pxPage title--juxt-text-3xl

22pxSection title--juxt-text-2xl

18pxLead--juxt-text-xl

16pxDialog title, large body--juxt-text-lg

14pxControls, body--juxt-text-md

13pxLabels, secondary--juxt-text-sm

12pxDescriptions, captions--juxt-text-xs

11pxKeyboard hints, tiny badges--juxt-text-2xs

Token	Value	Use
--juxt-font-sans	`…`	Everything you read
--juxt-font-mono	`…`	Code, keys, values
--juxt-weight-regular	`…`	Body text
--juxt-weight-medium	`…`	Labels, controls
--juxt-weight-semibold	`…`	Titles
--juxt-leading-tight	`…`	Large figures, headings
--juxt-leading-snug	`…`	Titles, labels
--juxt-leading-normal	`…`	Body text
--juxt-tracking-tight	`…`	Default for UI text
--juxt-tracking-tighter	`…`	Large sizes, 22px and up

Spacing #

A 4px grid, with two half-steps (6 and 10px) for the tight spots inside controls.

space-0-52px

space-14px

space-1-56px

space-28px

space-2-510px

space-312px

space-416px

space-520px

space-624px

space-832px

space-1040px

space-1248px

Control heights

24px

28px

34px

40px

Radius #

Radius grows with the size of the surface. Nothing is rounder than it needs to be.

radius-xs 4pxCheckboxes, kbd, menu items

radius-sm 6pxButtons, inputs, tooltips

radius-md 8pxPopovers, toasts, large buttons

radius-lg 12pxCards, dialogs, palette

radius-full 9999pxBadges, avatars, switches

Elevation #

Borders define structure; shadows only lift what floats. In dark mode shadows deepen to stay visible.

shadow-xsResting controls

shadow-smTooltips, pill indicator

shadow-mdMenus, selects, toasts

shadow-lgDialogs, command palette

control-highlightTop-edge sheen on solid buttons

Layers #

A fixed z-index scale, so overlays always stack in a sensible order — a select inside a dialog opens above it.

Token	Value	Use
--juxt-z-sticky	`20`	Sticky headers
--juxt-z-dropdown	`50`	In-flow dropdowns
--juxt-z-overlay	`100`	Backdrops
--juxt-z-modal	`110`	Dialogs, palette
--juxt-z-popover	`120`	Menus and selects — above dialogs
--juxt-z-toast	`130`	Notifications
--juxt-z-tooltip	`140`	Always on top

Motion #

Four durations, three curves and two travel distances. How they’re used is on its own page: Motion.

Token	Value	Use
--juxt-duration-instant	`…`	Leaving, pressing
--juxt-duration-fast	`…`	Hover, colour, focus
--juxt-duration-normal	`…`	Entering, toggles
--juxt-duration-slow	`…`	Travel: indicators, sheets
--juxt-ease-standard	`…`	State changes that stay on screen
--juxt-ease-out	`…`	Entering — fast start, soft landing
--juxt-ease-in	`…`	Leaving — gets out of the way
--juxt-motion-shift	`…`	Distance things travel when they enter; 0 under reduced motion
--juxt-motion-scale	`…`	Starting scale for surfaces that pop in; 1 under reduced motion