Colours

Colours come in two levels. Primitive colours are the raw ramps from Figma. Semantic colours name a purpose (bg.surface, fg.muted) and point at a primitive. Components only use semantic colours.

Everything on this page is read from tokens/color.primitives.json and tokens/color.semantic.json. The swatches use the live CSS variables, so they change when you switch this site between light and dark.

Using a colour

In CSS, every colour is a variable: the token path with --su-colors- in front.

.booking-total {
  color: var(--su-colors-fg-default);
  background: var(--su-colors-bg-muted);
  border: 1px solid var(--su-colors-border-default);
}

In an app that uses the Panda preset, use the token path: css({ bg: 'bg.muted' }).

Semantic colours

Use these. The Light and Dark columns show which primitive each one points at. Most point at the same step in both modes: it is the ramp underneath that reverses in dark mode (grey.0 is white in light and near-black in dark).

Background

TokenLightDark

bg.canvas--su-colors-bg-canvaspage backgroundpagepage

bg.surface--su-colors-bg-surfacecards, dialogs, table, active tabgrey.0grey.0

bg.muted--su-colors-bg-mutedstriped table row, disabled inputgrey.100grey.100

bg.sunken--su-colors-bg-sunkentracks, neutral hovergrey.200grey.200

bg.inverse--su-colors-bg-inversetooltip, dark buttongrey.900grey.900

bg.translucent--su-colors-bg-translucenttop bar (Figma header)whiteAlpha.60whiteAlpha.60

bg.translucentStrong--su-colors-bg-translucent-strongside navigation panel (Figma side nav)whiteAlpha.80whiteAlpha.80

bg.translucentSubtle--su-colors-bg-translucent-subtlepage tab track (Figma tab)whiteAlpha.40whiteAlpha.40

bg.neutralSolid--su-colors-bg-neutral-solidswitch track when off (Figma Toggle switch)grey.300grey.300

bg.disabled--su-colors-bg-disabledFigma Input field, Disabledgrey.100grey.100

bg.overlay--su-colors-bg-overlaydialog scrimrgba(35, 32, 44, 0.4)rgba(0, 0, 0, 0.6)

Foreground

TokenLightDark

fg.default--su-colors-fg-defaulttitles, names, active tabgrey.900grey.900

fg.muted--su-colors-fg-mutedfield labels, typed textgrey.700grey.700

fg.subtle--su-colors-fg-subtletable cells, inactive tab, meta textgrey.600grey.600

fg.placeholder--su-colors-fg-placeholderFigma Input field, Idealgrey.400grey.400

fg.disabled--su-colors-fg-disabledFigma Input field, Disabledgrey.500grey.500

fg.inverse--su-colors-fg-inversetext on bg.inversegrey.0grey.0

fg.inverseMuted--su-colors-fg-inverse-mutedtooltip text (Figma tooltip)grey.200grey.200

fg.onBrand--su-colors-fg-on-brandtext on the primary and destructive buttons (Figma Button)brand.100brand.100

fg.onSolid--su-colors-fg-on-solidtext on status solids such as Toast. Figma uses grey/0, which turns dark in Dark mode and is unreadable there, so this stays white.whitewhite

Border

TokenLightDark

border.default--su-colors-border-defaulthairlines, card and input bordersgrey.200grey.200

border.strong--su-colors-border-stronggrey.300grey.300

border.control--su-colors-border-controlFigma Input field and Textareagrey.200grey.200

border.controlStrong--su-colors-border-control-strongunchecked Check and Radio buttongrey.600grey.600

border.focus--su-colors-border-focusFigma Input field, Activebrand.600brand.600

border.error--su-colors-border-errorsystem.error.500system.error.500

border.glass--su-colors-border-glassoutline of translucent surfaces (Figma tab, header)whiteAlpha.60whiteAlpha.60

border.popup--su-colors-border-popuppopupBorderpopupBorder

Brand

TokenLightDark

brand.solid--su-colors-brand-solidprimary buttonbrand.600brand.600

brand.solidHover--su-colors-brand-solid-hoverprimary button, Hoverbrand.800brand.800

brand.strong--su-colors-brand-strongchecked Check, Toggle switch, Radio button; linksbrand.700brand.700

brand.fg--su-colors-brand-fgsecondary and tertiary button text and outlinebrand.600brand.600

brand.fgHover--su-colors-brand-fg-hoverbrand.800brand.800

brand.subtle--su-colors-brand-subtlerow hover, secondary button hoverbrand.100brand.100

brand.subtleHover--su-colors-brand-subtle-hoverbrand.100brand.100

brand.muted--su-colors-brand-muteddisabled primary button, radio halobrand.300brand.300

Status

TokenLightDark

status.danger.solid--su-colors-status-danger-solidsystem.error.500system.error.500

status.danger.subtle--su-colors-status-danger-subtlesystem.error.100system.error.100

status.warning.solid--su-colors-status-warning-solidsystem.warning.500system.warning.500

status.warning.subtle--su-colors-status-warning-subtlesystem.warning.100system.warning.100

status.success.solid--su-colors-status-success-solidsystem.success.500system.success.500

status.success.subtle--su-colors-status-success-subtlesystem.success.100system.success.100

status.info.solid--su-colors-status-info-solidsystem.blue.500system.blue.500

status.info.subtle--su-colors-status-info-subtlesystem.blue.100system.blue.100

Tone

Tag and RecordCard take tone="green" and use the pair for that name. The list of tone names is exported from the package as tones.

fg + bg pairs for Tag, Avatar and Record Card. Components take tone=<name>. green, blue, purple and orange are the four Figma tag colours.

TokenLightDark

tone.brand.fg--su-colors-tone-brand-fgbrand.600brand.600

tone.brand.bg--su-colors-tone-brand-bgbrand.100brand.100

tone.gray.fg--su-colors-tone-gray-fggrey.700grey.700

tone.gray.bg--su-colors-tone-gray-bggrey.100grey.100

tone.red.fg--su-colors-tone-red-fgsystem.error.500system.error.500

tone.red.bg--su-colors-tone-red-bgsystem.error.100system.error.100

tone.orange.fg--su-colors-tone-orange-fgsystem.warning.500system.warning.500

tone.orange.bg--su-colors-tone-orange-bgsystem.warning.100system.warning.100

tone.green.fg--su-colors-tone-green-fgsystem.success.500system.success.500

tone.green.bg--su-colors-tone-green-bgsystem.success.100system.success.100

tone.blue.fg--su-colors-tone-blue-fgsystem.blue.500system.blue.500

tone.blue.bg--su-colors-tone-blue-bgsystem.blue.100system.blue.100

tone.purple.fg--su-colors-tone-purple-fgsystem.purple.500system.purple.500

tone.purple.bg--su-colors-tone-purple-bgsystem.purple.100system.purple.100

tone.teal.fg--su-colors-tone-teal-fgsecondary.700secondary.700

tone.teal.bg--su-colors-tone-teal-bgsecondary.100secondary.100

Primitive colours

These are the ramps the semantic colours are built from. Do not use them directly in components: a primitive does not say what it is for, and the ramps that reverse in dark mode would give a different contrast than intended.

brand

Figma 'branding'. 600 is the main brand colour. The ramp reverses in Dark mode.

100#EDECF9dark #211F70

200#D0CFF2dark #302CA0

300#B1AFE9dark #3935C0

400#928FE0dark #4C47CC

500#726FD8dark #726FD8

600#4C47CCdark #928FE0

700#3935C0dark #B1AFE9

800#302CA0dark #D0CFF2

900#211F70dark #EDECF9

grey

Figma 'grey'. 0 is the surface colour, 900 the title colour. The ramp reverses in Dark mode.

0#FFFFFFdark #23202C

100#F4F3F6dark #322E3E

200#E2E0E7dark #454054

300#C3BFCEdark #5F5971

400#9F99B3dark #7D7692

500#7D7692dark #9F99B3

600#5F5971dark #C3BFCE

700#454054dark #E2E0E7

800#322E3Edark #F4F3F6

900#23202Cdark #FFFFFF

secondary

Figma 'secondary' (teal). Same in both modes.

100#E5F5F6

300#75CBD3

500#009DA9

700#00737C

900#00343A

system

Figma 'system'. 100 is the tint, 500 the solid. Same in both modes.

error.100#FEEFEE

error.500#E12D3D

success.100#E6F7F0

success.500#057E56

warning.100#FFDFB6

warning.500#DC810B

blue.100#E6F1FB

blue.500#0057B1

purple.100#F0E7FC

purple.500#6A4C93

whiteAlpha

Figma 'White/White 20-100'. Glass surfaces on the page background.

20rgba(255, 255, 255, 0.2)dark rgba(34, 34, 34, 0.2)

40rgba(255, 255, 255, 0.4)dark rgba(34, 34, 34, 0.4)

60rgba(255, 255, 255, 0.6)dark rgba(34, 34, 34, 0.6)

80rgba(255, 255, 255, 0.8)dark rgba(34, 34, 34, 0.8)

100#FFFFFFdark #000000

Single colours

TokenLightDark

white--su-colors-white#FFFFFFsame

black--su-colors-black#000000same

page--su-colors-page#E4E0F0#030303

popupBorder--su-colors-popup-borderrgba(208, 206, 222, 0.3)same

Gradient

--su-gradients-brand is the brand gradient from Figma.