Tokens

All values below are live: switch the site theme (top right) and every swatch re-renders, because they are var(--wx-*) references rather than copied hex codes.

Semantic colours

The layer components actually use. Every accent colour ships the same five roles — base, -hover, -active, -disabled and -soft — so a component never has to darken or lighten anything itself.

--wx-color-primary
var(--wx-color-primary)

--wx-color-primary-hover
var(--wx-color-primary-hover)

--wx-color-primary-active
var(--wx-color-primary-active)

--wx-color-primary-disabled
var(--wx-color-primary-disabled)

--wx-color-primary-soft
var(--wx-color-primary-soft)

--wx-color-primary-contrast
var(--wx-color-primary-contrast)

--wx-color-success
var(--wx-color-success)

--wx-color-success-hover
var(--wx-color-success-hover)

--wx-color-success-active
var(--wx-color-success-active)

--wx-color-success-disabled
var(--wx-color-success-disabled)

--wx-color-success-soft
var(--wx-color-success-soft)

--wx-color-success-contrast
var(--wx-color-success-contrast)

--wx-color-warning
var(--wx-color-warning)

--wx-color-warning-hover
var(--wx-color-warning-hover)

--wx-color-warning-active
var(--wx-color-warning-active)

--wx-color-warning-disabled
var(--wx-color-warning-disabled)

--wx-color-warning-soft
var(--wx-color-warning-soft)

--wx-color-warning-contrast
var(--wx-color-warning-contrast)

--wx-color-danger
var(--wx-color-danger)

--wx-color-danger-hover
var(--wx-color-danger-hover)

--wx-color-danger-active
var(--wx-color-danger-active)

--wx-color-danger-disabled
var(--wx-color-danger-disabled)

--wx-color-danger-soft
var(--wx-color-danger-soft)

--wx-color-danger-contrast
var(--wx-color-danger-contrast)

--wx-color-info
var(--wx-color-info)

--wx-color-info-hover
var(--wx-color-info-hover)

--wx-color-info-active
var(--wx-color-info-active)

--wx-color-info-disabled
var(--wx-color-info-disabled)

--wx-color-info-soft
var(--wx-color-info-soft)

--wx-color-info-contrast
var(--wx-color-info-contrast)

Backgrounds

--wx-bg-fill and --wx-bg-fill-hover are the neutral fills used by icon buttons and hovered rows.

--wx-bg-body
var(--wx-bg-body)

--wx-bg-surface
var(--wx-bg-surface)

--wx-bg-muted
var(--wx-bg-muted)

--wx-bg-subtle
var(--wx-bg-subtle)

--wx-bg-fill
var(--wx-bg-fill)

--wx-bg-fill-hover
var(--wx-bg-fill-hover)

--wx-bg-inverse
var(--wx-bg-inverse)

--wx-bg-disabled
var(--wx-bg-disabled)

--wx-bg-overlay
var(--wx-bg-overlay)

Text

--wx-text-default
var(--wx-text-default)

--wx-text-strong
var(--wx-text-strong)

--wx-text-muted
var(--wx-text-muted)

--wx-text-placeholder
var(--wx-text-placeholder)

--wx-text-disabled
var(--wx-text-disabled)

--wx-text-inverse
var(--wx-text-inverse)

--wx-text-link
var(--wx-text-link)

Borders

--wx-border-default
var(--wx-border-default)

--wx-border-strong
var(--wx-border-strong)

--wx-border-muted
var(--wx-border-muted)

--wx-border-focus
var(--wx-border-focus)

Palette

Primitives. Components should not use these directly — map them to a semantic token first.

Gray

--wx-color-gray-50
#f8f8fa

--wx-color-gray-100
#f3f3f6

--wx-color-gray-200
#dadade

--wx-color-gray-300
#d5d5e4

--wx-color-gray-400
#d4d8db

--wx-color-gray-500
#c5cace

--wx-color-gray-600
#babac3

--wx-color-gray-700
#6d737a

--wx-color-gray-800
#3a4046

--wx-color-gray-900
#21262c

--wx-color-gray-950
#12161a

Blue

--wx-color-blue-soft
#eaf1fc

--wx-color-blue-disabled
#81acf1

--wx-color-blue-hover
#5b95ef

--wx-color-blue-base
#427edd

--wx-color-blue-active
#4276c7

Green

--wx-color-green-soft
#e6f8ee

--wx-color-green-disabled
#6fd79f

--wx-color-green-hover
#2dd17b

--wx-color-green-base
#21c36d

--wx-color-green-active
#14ae5c

Amber

--wx-color-amber-soft
#fff3e6

--wx-color-amber-disabled
#f6ac65

--wx-color-amber-hover
#f89a48

--wx-color-amber-base
#ff9f43

--wx-color-amber-active
#f89a48

Red

--wx-color-red-soft
#fdeaea

--wx-color-red-disabled
#ef6f6f

--wx-color-red-hover
#d02d2d

--wx-color-red-base
#f14646

--wx-color-red-active
#d02d2d

Cyan

--wx-color-cyan-soft
#e2f9fd

--wx-color-cyan-disabled
#249cb5

--wx-color-cyan-hover
#75dff5

--wx-color-cyan-base
#0dcaf0

--wx-color-cyan-active
#19c2e4

Spacing

The scale is keyed by pixels: --wx-space-16 is 16px. No mental arithmetic, no re-basing when a value has to change.

--wx-space-00px

--wx-space-22px

--wx-space-44px

--wx-space-66px

--wx-space-88px

--wx-space-1010px

--wx-space-1212px

--wx-space-1414px

--wx-space-1616px

--wx-space-1818px

--wx-space-2424px

--wx-space-3232px

--wx-space-4040px

--wx-space-4848px

--wx-space-6464px

--wx-space-9696px

--wx-space-128128px

Radii

--wx-radius-control is what every control (button, input, select) uses; --wx-radius-md is the card and dialog radius.

--wx-radius-none
0px

--wx-radius-xs
8px

--wx-radius-control
10px

--wx-radius-sm
12px

--wx-radius-md
16px

--wx-radius-lg
20px

--wx-radius-full
9999px

Font sizes

--wx-font-size-xsThe quick brown fox12px

--wx-font-size-smThe quick brown fox14px

--wx-font-size-mdThe quick brown fox16px

--wx-font-size-lgThe quick brown fox18px

--wx-font-size-xlThe quick brown fox20px

--wx-font-size-2xlThe quick brown fox24px

--wx-font-size-3xlThe quick brown fox32px

--wx-font-size-control-smThe quick brown fox12px

--wx-font-size-control-mdThe quick brown fox14px

--wx-font-size-control-lgThe quick brown fox16px

Controls have their own

A control is not a paragraph. --wx-font-size-control-sm (12px), -md (14px) and -lg (16px) are what every input, select, checkbox and button reads at, and they are separate from the body scale on purpose: an admin panel is mostly controls, and 16px — a size for reading prose — leaves them shouting beside navigation at 14px.

Retune them in one place rather than per component:

:root {
  --wx-font-size-control-md: 15px;
}

Density

Controls are comfortable by default: --wx-size-control-md is 42px. Tables, toolbars and dialogs often want less. Add wx-density-compact (or data-density="compact") to any element and every control inside it shrinks:

<div class="wx-density-compact">
  <wx-input placeholder="34px tall here" />
</div>

Variable	Default	Compact
--wx-size-control-sm	34px	28px
--wx-size-control-md	42px	34px
--wx-size-control-lg	50px	40px
--wx-radius-control	10px	8px
--wx-radius-md	16px	12px
--wx-font-size-md	16px	14px

Compact changes heights and the body scale; control text is left alone, because it is already on a scale of its own.

Other scales

Group	Variables
Shadows	--wx-shadow-none, --wx-shadow-sm, --wx-shadow-md, --wx-shadow-lg
Controls	--wx-size-control-sm, --wx-size-control-md, --wx-size-control-lg
z-index	--wx-z-index-sticky … --wx-z-index-tooltip
Motion	--wx-duration-fast, --wx-duration-normal, --wx-duration-slow, --wx-easing-standard

Every floating panel — a dropdown, a select's list, a popover, a colour picker — is drawn on --wx-z-index-popover, one shared layer. They are added to the document as they open, so the one opened last is the one on top, and a select opened inside a popover covers it instead of vanishing behind it. Keep your own transient panels on that layer too; --wx-z-index-dialog and above are for surfaces that take over the page.

See Theming for how to override them.