CURRENTLY BEING DESIGNED

All tokens

All 400 tokens across every tier — filter by layer or group, or search by name, value, or description. Primitive tokens are the raw, un-aliased colour ramps, spacing scale, and radius scale — they carry no meaning on their own, and (unlike the other two tiers) aren't exposed as a CSS custom property at all; they're shown here by their JSON path. Semantic tokens (--orbit-*) alias primitives to express intent (surface, text, status, and so on) and differ by product brand where noted — this is the tier to reference directly in your own code. Component tokens are Web Awesome's own native tokens (--wa-color-*) that mirror the same Semantic values under WA's naming — WA components using variant= theme themselves from these automatically; don't reference them directly otherwise.

Showing all 400 tokens

	Value	Category	Description
Color
Neutral
	#141210	Color	neutral 05
	#211f1b	Color	neutral 10
	#3a3732	Color	neutral 20
	#565249	Color	neutral 30
	#726d66	Color	neutral 40
	#928d85	Color	neutral 50
	#afa9a0	Color	neutral 60
	#c9c3b9	Color	neutral 70
	#ddd8d0	Color	neutral 80
	#eeeae4	Color	neutral 90
	#f7f4f0	Color	neutral 95
	#fdfcfb	Color	neutral 100
Green
	#101c07	Color	green 05
	#1d2a0c	Color	green 10
	#394716	Color	green 20
	#566620	Color	green 30
	#677819	Color	green 40
	#97aa37	Color	green 50
	#bace42	Color	green 60
	#cadb7c	Color	green 70
	#dbe7aa	Color	green 80
	#edf3d5	Color	green 90
	#f6f9ea	Color	green 95
Teal
	#072b2d	Color	teal 05
	#0e373b	Color	teal 10
	#1c5158	Color	teal 20
	#2c6c77	Color	teal 30
	#3c8998	Color	teal 40
	#4da6ba	Color	teal 50
	#5ec5dd	Color	teal 60
	#8cd4e6	Color	teal 70
	#b4e2ee	Color	teal 80
	#daf1f7	Color	teal 90
	#edf8fb	Color	teal 95
Blue
	#0f0438	Color	blue 05
	#141148	Color	blue 10
	#1b2d69	Color	blue 20
	#21498b	Color	blue 30
	#2466b0	Color	blue 40
	#2684d5	Color	blue 50
	#24a4fc	Color	blue 60
	#6cbcff	Color	blue 70
	#a0d3ff	Color	blue 80
	#d0e9ff	Color	blue 90
	#e8f4ff	Color	blue 95
Red
	#330303	Color	red 05
	#420707	Color	red 10
	#611413	Color	red 20
	#812120	Color	red 30
	#a32f2e	Color	red 40
	#c73d3d	Color	red 50
	#ec4c4c	Color	red 60
	#f77f79	Color	red 70
	#feaba5	Color	red 80
	#ffd5d1	Color	red 90
	#ffeae8	Color	red 95
Orange
	#231105	Color	orange 05
	#321708	Color	orange 10
	#512410	Color	orange 20
	#723118	Color	orange 30
	#953f21	Color	orange 40
	#ba4d2a	Color	orange 50
	#e05c34	Color	orange 60
	#ed886a	Color	orange 70
	#f6b09c	Color	orange 80
	#fcd8cd	Color	orange 90
	#feebe6	Color	orange 95
Yellow
	#1e1603	Color	yellow 05
	#2e2204	Color	yellow 10
	#513d07	Color	yellow 20
	#775909	Color	yellow 30
	#9f7709	Color	yellow 40
	#c89706	Color	yellow 50
	#f4b800	Color	yellow 60
	#f7cb6a	Color	yellow 70
	#fadda0	Color	yellow 80
	#fdeed1	Color	yellow 90
	#fef7e8	Color	yellow 95
Purple
	#1c0628	Color	purple 05
	#271037	Color	purple 10
	#3e2657	Color	purple 20
	#563d79	Color	purple 30
	#6f569d	Color	purple 40
	#8970c3	Color	purple 50
	#a48bea	Color	purple 60
	#b9a8f1	Color	purple 70
	#d0c5f7	Color	purple 80
	#e7e2fb	Color	purple 90
	#f3f1fd	Color	purple 95
Color
Brand
	--wa-color-brand-95	Color	Faint brand-tinted fill, non-WA surfaces only — selected rows, highlighted cards, subtle brand accents in custom components. Not a solid brand fill. Do not use on a WA component; use --wa-color-brand-95 there instead.
	--wa-color-brand-90	Color	Medium brand tint, non-WA surfaces only — hover/active state on a brand.fill-quiet background. Not a base fill on its own.
	--wa-color-brand-60	Color	Solid brand fill, non-WA surfaces only — primary CTAs and key brand moments in custom (non-WA) components. For a WA button use wa-button[variant='brand'] instead of applying this token directly.
	--wa-color-brand-80	Color	Subtle brand-coloured border, non-WA surfaces only. Currently identical to border.normal/loud since the brand border ramp isn't differentiated yet — treat as a placeholder, not a deliberate design choice, until Figma defines a distinct light step.
	--wa-color-brand-60	Color	Standard brand-coloured border, non-WA surfaces only — outlines and dividers that need brand emphasis without implying selection or focus.
	--wa-color-brand-60	Color	Strong brand-coloured border, non-WA surfaces only — selected or active states, e.g. a selected custom card.
	--wa-color-brand-05	Color	Text/icon colour for content on a brand.fill-quiet background, non-WA surfaces only.
	--wa-color-brand-05	Color	Text/icon colour for content on a brand.fill-normal background, non-WA surfaces only.
	--wa-color-brand-05	Color	Text/icon colour for content on a brand.fill-loud background, non-WA surfaces only — e.g. the label inside a custom brand-filled button.
Neutral
	color.neutral.95	Color	Lightest neutral fill, non-WA surfaces only — subtle backgrounds and secondary-button hover in custom components. Not the page background — use surface.default/raised for that.
	color.neutral.90	Color	Standard neutral fill, non-WA surfaces only — secondary button backgrounds and neutral chips in custom components.
	color.neutral.40	Color	Darkest neutral fill, non-WA surfaces only — high-contrast neutral fills, e.g. a solid inactive/draft banner or icon. Use sparingly. For a WA neutral-accent button use wa-button[variant='neutral'][appearance='accent'] instead of applying this token directly.
	color.neutral.70	Color	Subtle neutral border, non-WA surfaces only — low-emphasis dividers on custom neutral surfaces.
	color.neutral.60	Color	Standard neutral border, non-WA surfaces only — default outline on custom neutral components.
	color.neutral.50	Color	Strong neutral border, non-WA surfaces only — emphasised outlines, e.g. a focused neutral input built outside WA.
	color.neutral.20	Color	Text/icon colour on a neutral.fill-quiet background, non-WA surfaces only.
	color.neutral.05	Color	Text/icon colour on a neutral.fill-normal background, non-WA surfaces only — standard body text on a custom neutral surface.
	color.neutral.100	Color	Text/icon colour on a neutral.fill-loud background, non-WA surfaces only — labels inside dark neutral fills.
Surface
	color.neutral.95	Color	Default page-level background for custom (non-WA) pages and panels. This is the base surface everything else sits on top of.
	color.neutral.100	Color	Raised custom surface — cards, sidebars, and panels sitting above surface.default. Use when an element needs to visually lift off the page background.
	color.neutral.90	Color	Recessed/sunken custom surface — nested containers set into a raised or default surface, e.g. an inset content well. Do not use for the page background itself — see surface.default.
	color.neutral.05	Color	Dark inverse custom surface — tooltips, dark panels, and inverse-themed custom components. Pair with text.inverse / icon.inverse for content on top of it.
	color.neutral.80	Color	Border colour separating one custom surface from another, e.g. a card edge against the page background. For general-purpose dividers not tied to a surface boundary, see color.border.* instead.
Text
	color.neutral.05	Color	Primary body text colour on custom surfaces — headings and most readable content. Default choice unless a more specific text token applies.
	color.neutral.40	Color	Secondary text colour on custom surfaces — placeholder text, helper text, and metadata. Not for disabled text — use text.disabled for that.
	color.neutral.50	Color	Disabled text colour on custom surfaces — inactive labels and non-interactive content. Not for de-emphasised-but-active text — use text.quiet for that.
	color.neutral.100	Color	Text colour for custom content sitting on surface.inverse or another dark fill. Do not use on a light background — it will fail contrast.
	color.blue.40	Color	Inline hyperlink and navigational-link text colour in custom content. Reserve for actual links, not for drawing attention to non-interactive text.
Icon
	color.neutral.10	Color	Default icon colour on custom surfaces — standalone icons and icons paired with primary text. Default choice unless a more specific icon token applies.
	color.neutral.40	Color	Muted icon colour on custom surfaces — icons in helper text, metadata rows, and other less prominent contexts.
	color.neutral.50	Color	Disabled icon colour on custom surfaces — icons within disabled controls or inactive UI.
	color.neutral.100	Color	Icon colour for custom content sitting on surface.inverse or another dark fill. Do not use on a light background.
	color.blue.40	Color	Icon colour for icon-only links and icons embedded inside inline hyperlinks in custom content.
Status
	color.blue.95	Color	Info-status background tint, non-WA surfaces only — informational alert backgrounds and highlighted rows. Not a solid banner fill; pair with info.border/info.on at the same tier (quiet/normal/loud).
	color.blue.90	Color	Info-status fill, medium intensity, non-WA surfaces only — filled info badges/tags at rest.
	color.blue.40	Color	Solid info-status fill, non-WA surfaces only — informational banners, help indicators, and neutral (non-urgent) notifications. Use success/warning/danger instead if the message implies a specific outcome rather than general information.
	color.blue.70	Color	Subtle info-status border, non-WA surfaces only — pairs with info.fill-quiet backgrounds.
	color.blue.50	Color	Standard info-status border, non-WA surfaces only — pairs with info.fill-normal badges/tags.
	color.blue.40	Color	Strong info-status border, non-WA surfaces only — pairs with info.fill-loud banners and alerts.
	color.blue.40	Color	Info-status text/icon colour on an info.fill-quiet background, non-WA surfaces only.
	color.blue.30	Color	Info-status text/icon colour on an info.fill-normal badge/tag, non-WA surfaces only.
	color.neutral.100	Color	Info-status text/icon colour on an info.fill-loud banner, non-WA surfaces only — must contrast against the solid blue fill.
	color.green.90	Color	Success-status background tint, non-WA surfaces only — success alert backgrounds and highlighted rows. Not a solid banner fill.
	color.green.80	Color	Success-status fill, medium intensity, non-WA surfaces only — filled success badges/tags at rest.
	color.green.40	Color	Solid success-status fill, non-WA surfaces only — success banners, confirmation icons, and completion indicators.
	color.green.60	Color	Subtle success-status border, non-WA surfaces only — pairs with success.fill-quiet backgrounds.
	color.green.50	Color	Standard success-status border, non-WA surfaces only — pairs with success.fill-normal badges/tags.
	color.green.40	Color	Strong success-status border, non-WA surfaces only — pairs with success.fill-loud banners and alerts.
	color.green.30	Color	Success-status text/icon colour on a success.fill-quiet background, non-WA surfaces only.
	color.green.30	Color	Success-status text/icon colour on a success.fill-normal badge/tag, non-WA surfaces only.
	color.neutral.100	Color	Success-status text/icon colour on a success.fill-loud banner, non-WA surfaces only — labels inside filled success alerts.
	color.yellow.95	Color	Warning-status background tint, non-WA surfaces only — warning alert backgrounds and highlighted rows. Not a solid banner fill.
	color.yellow.90	Color	Warning-status fill, medium intensity, non-WA surfaces only — filled warning badges/tags at rest.
	color.yellow.60	Color	Solid warning-status fill, non-WA surfaces only — warning banners, cautionary icons, and attention-needed indicators. Use danger instead if the situation is already an error, not just a caution.
	color.yellow.70	Color	Subtle warning-status border, non-WA surfaces only — pairs with warning.fill-quiet backgrounds.
	color.yellow.60	Color	Standard warning-status border, non-WA surfaces only — pairs with warning.fill-normal badges/tags.
	color.yellow.60	Color	Strong warning-status border, non-WA surfaces only — pairs with warning.fill-loud banners and alerts.
	color.yellow.30	Color	Warning-status text/icon colour on a warning.fill-quiet background, non-WA surfaces only.
	color.yellow.20	Color	Warning-status text/icon colour on a warning.fill-normal badge/tag, non-WA surfaces only.
	color.yellow.05	Color	Warning-status text/icon colour on a warning.fill-loud banner, non-WA surfaces only — must stay dark; yellow doesn't have enough contrast against light text.
	color.red.95	Color	Danger/error-status background tint, non-WA surfaces only — error alerts and invalid-field backgrounds. Not a solid banner fill.
	color.red.90	Color	Danger/error-status fill, medium intensity, non-WA surfaces only — filled error badges/tags at rest.
	color.red.50	Color	Solid danger/error-status fill, non-WA surfaces only — error states, destructive-action emphasis, and validation failures. Use warning instead if the situation is a caution rather than an actual error.
	color.red.70	Color	Subtle danger/error-status border, non-WA surfaces only — e.g. an invalid field outline.
	color.red.60	Color	Standard danger/error-status border, non-WA surfaces only — pairs with danger.fill-normal badges/tags.
	color.red.50	Color	Strong danger/error-status border, non-WA surfaces only — pairs with danger.fill-loud banners and destructive actions.
	color.red.40	Color	Danger/error-status text/icon colour on a danger.fill-quiet background, non-WA surfaces only.
	color.red.30	Color	Danger/error-status text/icon colour on a danger.fill-normal badge/tag, non-WA surfaces only — error messages and validation text.
	color.neutral.100	Color	Danger/error-status text/icon colour on a danger.fill-loud banner, non-WA surfaces only — labels inside filled error alerts.
	color.orange.95	Color	Pending-status background tint, non-WA surfaces only — awaiting-action or in-progress alert backgrounds. Not a solid banner fill.
	color.orange.90	Color	Pending-status fill, medium intensity, non-WA surfaces only — filled pending badges/tags at rest, e.g. "awaiting approval".
	color.orange.50	Color	Solid pending-status fill, non-WA surfaces only — pending banners and awaiting-action icons. This is a distinct meaning from warning/danger — it signals "in progress", not "something is wrong".
	color.orange.70	Color	Subtle pending-status border, non-WA surfaces only — pairs with pending.fill-quiet backgrounds.
	color.orange.60	Color	Standard pending-status border, non-WA surfaces only — pairs with pending.fill-normal badges/tags.
	color.orange.50	Color	Strong pending-status border, non-WA surfaces only — pairs with pending.fill-loud banners.
	color.orange.40	Color	Pending-status text/icon colour on a pending.fill-quiet background, non-WA surfaces only.
	color.orange.30	Color	Pending-status text/icon colour on a pending.fill-normal badge/tag, non-WA surfaces only.
	color.neutral.100	Color	Pending-status text/icon colour on a pending.fill-loud banner, non-WA surfaces only.
	color.teal.95	Color	Scheduled-status background tint, non-WA surfaces only — upcoming/scheduled-event alert backgrounds. Not a solid banner fill.
	color.teal.90	Color	Scheduled-status fill, medium intensity, non-WA surfaces only — filled scheduled badges/tags at rest, e.g. "scheduled for later".
	color.teal.30	Color	Solid scheduled-status fill, non-WA surfaces only — scheduled banners and upcoming-event icons. Distinct from info — this specifically signals a future/scheduled event, not general information.
	color.teal.60	Color	Subtle scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-quiet backgrounds.
	color.teal.50	Color	Standard scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-normal badges/tags.
	color.teal.30	Color	Strong scheduled-status border, non-WA surfaces only — pairs with scheduled.fill-loud banners.
	color.teal.30	Color	Scheduled-status text/icon colour on a scheduled.fill-quiet background, non-WA surfaces only.
	color.teal.20	Color	Scheduled-status text/icon colour on a scheduled.fill-normal badge/tag, non-WA surfaces only.
	color.neutral.100	Color	Scheduled-status text/icon colour on a scheduled.fill-loud banner, non-WA surfaces only.
	color.neutral.95	Color	Inactive-status background tint, non-WA surfaces only — draft/inactive/archived badge backgrounds at rest. Use this status group (not neutral.fill above) specifically when the meaning is "inactive", not for general-purpose neutral UI.
	color.neutral.90	Color	Inactive-status fill, medium intensity, non-WA surfaces only — filled inactive/draft badges.
	color.neutral.40	Color	Inactive-status fill, darkest, non-WA surfaces only — use sparingly, e.g. a solid inactive/draft banner or icon.
	color.neutral.70	Color	Subtle inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-quiet backgrounds.
	color.neutral.60	Color	Standard inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-normal badges.
	color.neutral.50	Color	Strong inactive-status border, non-WA surfaces only — pairs with status.neutral.fill-loud badges.
	color.neutral.20	Color	Inactive-status text/icon colour on a status.neutral.fill-quiet background, non-WA surfaces only.
	color.neutral.05	Color	Inactive-status text/icon colour on a status.neutral.fill-normal badge, non-WA surfaces only — deliberately aliases text.normal rather than a status-specific tone, since neutral status doesn't need its own text colour.
	color.neutral.100	Color	Inactive-status text/icon colour on a status.neutral.fill-loud fill, non-WA surfaces only.
Accent
	color.purple.95	Color	Purple accent background tint, non-WA surfaces only — decorative or categorical labelling (e.g. tagging a category or content type), not a status signal. Use color.status.* instead if the meaning is a state like success/warning/pending.
	color.purple.90	Color	Purple accent fill, medium intensity, non-WA surfaces only — filled decorative/categorical badges or tags at rest.
	color.purple.40	Color	Solid purple accent fill, non-WA surfaces only — use sparingly for a decorative/categorical highlight. Not for conveying status.
	color.purple.70	Color	Subtle purple accent border, non-WA surfaces only — pairs with accent.purple.fill-quiet backgrounds.
	color.purple.60	Color	Standard purple accent border, non-WA surfaces only — pairs with accent.purple.fill-normal badges/tags.
	color.purple.50	Color	Strong purple accent border, non-WA surfaces only — pairs with accent.purple.fill-loud badges.
	color.purple.40	Color	Text/icon colour on an accent.purple.fill-quiet background, non-WA surfaces only.
	color.purple.30	Color	Text/icon colour on an accent.purple.fill-normal badge/tag, non-WA surfaces only.
	color.neutral.100	Color	Text/icon colour on an accent.purple.fill-loud fill, non-WA surfaces only.
State
	#0000001a	Color	Hover overlay, non-WA surfaces only — a translucent layer composited on top of any fill colour (brand, neutral, or status) to produce that colour's hover state. Not a standalone fill; always layer it over an existing fill token, don't use it on its own.
	#00000033	Color	Active/pressed overlay, non-WA surfaces only — a translucent layer composited on top of any fill colour to produce that colour's pressed state. Not a standalone fill; always layer it over an existing fill token.
	color.blue.60	Color	Focus-ring colour, non-WA surfaces only — the outline colour on all focused interactive custom elements.
	color.neutral.90	Color	Disabled element background, non-WA surfaces only — backgrounds of disabled buttons, inputs, and controls in custom components.
	color.neutral.60	Color	Disabled element text/icon colour, non-WA surfaces only — labels and icons inside disabled custom controls.
Border
	color.neutral.50	Color	General-purpose strong border, non-WA surfaces only — selected states, focused inputs (non-brand), and prominent outlines. If the emphasis should read as brand-coloured, use color.brand.border.loud instead.
	color.neutral.60	Color	Default general-purpose border, non-WA surfaces only — card outlines, input fields, and standard dividers on custom components.
	color.neutral.80	Color	Subtle general-purpose border, non-WA surfaces only — light dividers, table row separators, and section breaks.
	--wa-color-brand-60	Color	Brand-coloured general-purpose border, non-WA surfaces only — brand-coloured outlines, selected card borders, and active tab indicators. Aliases color.brand.border.loud; use that token directly if you're already inside the brand.* group.
	color.blue.60	Color	Focus-ring border, non-WA surfaces only — the outline drawn around focused interactive custom elements. Aliases color.state.focus.
Color
Surface
	color.surface.default	Color	For surfaces (i.e. contained backgrounds)
	color.surface.raised	Color	For surfaces (i.e. contained backgrounds) positioned closest to the user
	color.surface.lowered	Color	For surfaces (i.e. contained backgrounds) positioned farthest from the user
	color.surface.inverse	Color	For surfaces (i.e. contained backgrounds)
	color.surface.border	Color	For surface borders
Text
	color.text.normal	Color	For standard text content
	color.text.quiet	Color	For de-emphasized text content
	color.text.disabled	Color	For standard text content
	color.text.inverse	Color	For standard text content
	color.text.link	Color	For link text and underlines
Brand
	color.brand.fill.quiet	Color	For low-emphasis branded fills and backgrounds
	color.brand.fill.normal	Color	For medium-emphasis branded fills and backgrounds
	color.brand.fill.loud	Color	For high-emphasis branded fills and backgrounds
	color.brand.border.quiet	Color	For low-emphasis branded strokes and borders
	color.brand.border.normal	Color	For medium-emphasis branded strokes and borders
	color.brand.border.loud	Color	For high-emphasis branded strokes and borders
	color.brand.on.quiet	Color	For text and icons on Brand/Fill/Quiet or surfaces
	color.brand.on.normal	Color	For text and icons on Brand/Fill/Normal
	color.brand.on.loud	Color	For text and icons on Brand/Fill/Loud
Neutral
	color.neutral.fill.quiet	Color	For low-emphasis neutral fills and backgrounds
	color.neutral.fill.normal	Color	For medium-emphasis neutral fills and backgrounds
	color.neutral.fill.loud	Color	For high-emphasis neutral fills and backgrounds
	color.neutral.border.quiet	Color	For low-emphasis neutral strokes and borders
	color.neutral.border.normal	Color	For medium-emphasis neutral strokes and borders
	color.neutral.border.loud	Color	For high-emphasis neutral strokes and borders
	color.neutral.on.quiet	Color	For text and icons on Neutral/Fill/Quiet or surfaces
	color.neutral.on.normal	Color	For text and icons on Neutral/Fill/Normal
	color.neutral.on.loud	Color	For text and icons on Neutral/Fill/Loud
Info
	color.status.info.fill.quiet	Color	For low-emphasis fills and backgrounds indicating success
	color.status.info.fill.normal	Color	For medium-emphasis fills and backgrounds indicating success
	color.status.info.fill.loud	Color	For high-emphasis fills and backgrounds indicating success
	color.status.info.border.quiet	Color	For low-emphasis strokes and borders indicating success
	color.status.info.border.normal	Color	For medium-emphasis strokes and borders indicating success
	color.status.info.border.loud	Color	For high-emphasis strokes and borders indicating success
	color.status.info.on.quiet	Color	For text and icons on Success/Fill/Quiet or surfaces
	color.status.info.on.normal	Color	For text and icons on Success/Fill/Normal
	color.status.info.on.loud	Color	For text and icons on Success/Fill/Loud
Success
	color.status.success.fill.quiet	Color	For low-emphasis fills and backgrounds indicating success
	color.status.success.fill.normal	Color	For medium-emphasis fills and backgrounds indicating success
	color.status.success.fill.loud	Color	For high-emphasis fills and backgrounds indicating success
	color.status.success.border.quiet	Color	For low-emphasis strokes and borders indicating success
	color.status.success.border.normal	Color	For medium-emphasis strokes and borders indicating success
	color.status.success.border.loud	Color	For high-emphasis strokes and borders indicating success
	color.status.success.on.quiet	Color	For text and icons on Success/Fill/Quiet or surfaces
	color.status.success.on.normal	Color	For text and icons on Success/Fill/Normal
	color.status.success.on.loud	Color	For text and icons on Success/Fill/Loud
Warning
	color.status.warning.fill.quiet	Color	For low-emphasis fills and backgrounds indicating warning
	color.status.warning.fill.normal	Color	For medium-emphasis fills and backgrounds indicating warning
	color.status.warning.fill.loud	Color	For high-emphasis fills and backgrounds indicating warning
	color.status.warning.border.quiet	Color	For low-emphasis strokes and borders indicating warning
	color.status.warning.border.normal	Color	For medium-emphasis strokes and borders indicating warning
	color.status.warning.border.loud	Color	For high-emphasis strokes and borders indicating warning
	color.status.warning.on.quiet	Color	For text and icons on Warning/Fill/Quiet or surfaces
	color.status.warning.on.normal	Color	For text and icons on Warning/Fill/Normal
	color.status.warning.on.loud	Color	For text and icons on Warning/Fill/Loud
Danger
	color.status.danger.fill.quiet	Color	For low-emphasis fills and backgrounds indicating danger
	color.status.danger.fill.normal	Color	For medium-emphasis fills and backgrounds indicating danger
	color.status.danger.fill.loud	Color	For high-emphasis fills and backgrounds indicating danger
	color.status.danger.border.quiet	Color	For low-emphasis strokes and borders indicating danger
	color.status.danger.border.normal	Color	For medium-emphasis strokes and borders indicating danger
	color.status.danger.border.loud	Color	For high-emphasis strokes and borders indicating danger
	color.status.danger.on.quiet	Color	For text and icons on Danger/Fill/Quiet or surfaces
	color.status.danger.on.normal	Color	For text and icons on Danger/Fill/Normal
	color.status.danger.on.loud	Color	For text and icons on Danger/Fill/Loud
Scheduled
	color.status.scheduled.fill.quiet	Color	For low-emphasis fills and backgrounds indicating danger
	color.status.scheduled.fill.normal	Color	For medium-emphasis fills and backgrounds indicating danger
	color.status.scheduled.fill.loud	Color	For high-emphasis fills and backgrounds indicating danger
	color.status.scheduled.border.quiet	Color	For low-emphasis strokes and borders indicating danger
	color.status.scheduled.border.normal	Color	For medium-emphasis strokes and borders indicating danger
	color.status.scheduled.border.loud	Color	For high-emphasis strokes and borders indicating danger
	color.status.scheduled.on.quiet	Color	For text and icons on Danger/Fill/Quiet or surfaces
	color.status.scheduled.on.normal	Color	For text and icons on Danger/Fill/Normal
	color.status.scheduled.on.loud	Color	For text and icons on Danger/Fill/Loud
Pending
	color.status.pending.fill.quiet	Color	For low-emphasis fills and backgrounds indicating danger
	color.status.pending.fill.normal	Color	For medium-emphasis fills and backgrounds indicating danger
	color.status.pending.fill.loud	Color	For high-emphasis fills and backgrounds indicating danger
	color.status.pending.border.quiet	Color	For low-emphasis strokes and borders indicating danger
	color.status.pending.border.normal	Color	For medium-emphasis strokes and borders indicating danger
	color.status.pending.border.loud	Color	For high-emphasis strokes and borders indicating danger
	color.status.pending.on.quiet	Color	For text and icons on Danger/Fill/Quiet or surfaces
	color.status.pending.on.normal	Color	For text and icons on Danger/Fill/Normal
	color.status.pending.on.loud	Color	For text and icons on Danger/Fill/Loud
Purple
	color.accent.purple.fill.quiet	Color	For low-emphasis fills and backgrounds indicating danger
	color.accent.purple.fill.normal	Color	For medium-emphasis fills and backgrounds indicating danger
	color.accent.purple.fill.loud	Color	For high-emphasis fills and backgrounds indicating danger
	color.accent.purple.border.quiet	Color	For low-emphasis strokes and borders indicating danger
	color.accent.purple.border.normal	Color	For medium-emphasis strokes and borders indicating danger
	color.accent.purple.border.loud	Color	For high-emphasis strokes and borders indicating danger
	color.accent.purple.on.quiet	Color	For text and icons on Danger/Fill/Quiet or surfaces
	color.accent.purple.on.normal	Color	For text and icons on Danger/Fill/Normal
	color.accent.purple.on.loud	Color	For text and icons on Danger/Fill/Loud
Radius
	0px	Radius
	2px	Radius
	4px	Radius
	8px	Radius
	12px	Radius
	9999px	Radius
	radius.radius-md	Radius	Corner radius for directly actionable controls — buttons, inputs, toggles. Aliases radius-md. Non-WA components only; WA components use --wa-border-radius-* instead.
	radius.radius-lg	Radius	Corner radius for standard content containers — cards. Deliberately more rounded than surface since cards are smaller, discrete elements. Aliases radius-lg.
	radius.radius-md	Radius	Corner radius for large layout panels that span significant screen area — sidebars, main content blocks. Kept smaller than container so big panels don't read as "bubbly" at scale. Aliases radius-md.
	radius.radius-xl	Radius	Corner radius for elements that float above the base layer — modals, dialogs, lightboxes. Largest of the container-type tokens to visually emphasize elevation/proximity to the user. Aliases radius-xl.
	radius.radius-full	Radius	Corner radius for fully-rounded status/count indicators — badges. Aliases radius-full.
	radius.radius-sm	Radius	Corner radius for small, softly-rounded labels — tags, tooltips. Aliases radius-sm.
Spacing
	2px	Spacing
	4px	Spacing
	8px	Spacing
	10px	Spacing
	12px	Spacing
	14px	Spacing
	16px	Spacing
	20px	Spacing
	24px	Spacing
	32px	Spacing
	40px	Spacing
	48px	Spacing
	56px	Spacing
	64px	Spacing
	72px	Spacing
	80px	Spacing
	88px	Spacing
	96px	Spacing
	104px	Spacing
	112px	Spacing
	120px	Spacing
	128px	Spacing
	136px	Spacing
	144px	Spacing
Component
	spacing.space-4	Spacing	Extra-small vertical padding inside compact custom components, e.g. small buttons or chips.
	spacing.space-8	Spacing	Small vertical padding inside custom components, e.g. default-size buttons.
	spacing.space-10	Spacing	Small vertical padding inside custom components, e.g. default-size buttons.
	spacing.space-12	Spacing	Medium vertical padding inside custom components, e.g. inputs and larger buttons.
	spacing.space-4	Spacing	Extra-small horizontal padding inside compact custom components.
	spacing.space-8	Spacing	Small horizontal padding inside custom components.
	spacing.space-12	Spacing	Medium horizontal padding inside custom components.
	spacing.space-14	Spacing	Medium horizontal padding inside custom components.
	spacing.space-16	Spacing	Large horizontal padding inside custom components, e.g. wide buttons or cards.
	spacing.space-20	Spacing	Large horizontal padding inside custom components, e.g. wide buttons or cards.
	spacing.space-4	Spacing	Extra-small gap between internal elements in a custom component, e.g. icon and label in a compact control.
	spacing.space-8	Spacing	Small gap between internal elements in a custom component.
	spacing.space-12	Spacing	Medium gap between internal elements in a custom component, e.g. icon and label in a standard button.
	spacing.space-16	Spacing	Large gap between internal elements in a custom component.
Layout
	spacing.space-24	Spacing	Gap between related content blocks within a section of a custom page layout.
	spacing.space-48	Spacing	Gap between distinct sections of a custom page layout — larger than content-gap, which is for content within a single section.
	spacing.space-32	Spacing	Horizontal page margin/gutter for custom page layouts — the space between page content and the viewport edge, not the gap between internal sections.
	spacing.space-16	Spacing	Small vertical gap in a stacked custom layout, e.g. tightly related form fields.
	spacing.space-24	Spacing	Medium vertical gap in a stacked custom layout, e.g. general content stacking.
	spacing.space-40	Spacing	Large vertical gap in a stacked custom layout, e.g. between major page blocks.
Font
Size
	10px	Font	size 10
	11px	Font	size 11
	12px	Font	size 12
	14px	Font	size 14
	16px	Font	size 16
	20px	Font	size 20
	22px	Font	size 22
	24px	Font	size 24
	28px	Font	size 28
	32px	Font	size 32
	36px	Font	size 36
	40px	Font	size 40
	48px	Font	size 48
	56px	Font	size 56
	64px	Font	size 64
	72px	Font	size 72
	80px	Font	size 80
	96px	Font	size 96
Weight
	300	Font	weight 300
	400	Font	weight 400
	500	Font	weight 500
	600	Font	weight 600
	700	Font	weight 700
	800	Font	weight 800
	900	Font	weight 900
Line Height
	100px	Font	line-height 100
	110px	Font	line-height 110
	115px	Font	line-height 115
	120px	Font	line-height 120
	125px	Font	line-height 125
	130px	Font	line-height 130
	140px	Font	line-height 140
	150px	Font	line-height 150
	160px	Font	line-height 160
	175px	Font	line-height 175
	200px	Font	line-height 200
Letter Spacing
	0px	Font	letter-spacing 0
	25px	Font	letter-spacing 25
	50px	Font	letter-spacing 50
	75px	Font	letter-spacing 75
	100px	Font	letter-spacing 100
	-50px	Font	letter-spacing -50
	-25px	Font	letter-spacing -25
Font Family
	Lora	Font	Heading
	Hanken Grotesk	Font	Body
Elevation
	0px 1px 2px 0px #0000000d	Elevation	Subtle — cards, list items
	0px 1px 2px 0px #0000000f, 0px 2px 4px 0px #0000001a	Elevation	Low — dropdowns, tooltips
	0px 2px 4px 0px #00000014, 0px 4px 8px 0px #0000001f	Elevation	Medium — panels, popovers
	0px 4px 8px 0px #0000001a, 0px 8px 16px 0px #00000029	Elevation	High — modals, dialogs