Semantic roles

Each role points at the palette colour production uses for that job, per brand. Switch the theme in the sidebar to compare TCS, Four Seasons and Smithsonian. Use these as utilities — bg-primary, text-link, border-input.

Surfaces

background
foreground
canvas
canvas-foreground
card
card-foreground
popover
popover-foreground
muted
muted-foreground
subtle-foreground

Actions

primary
primary-foreground
secondary
secondary-foreground
accent
accent-foreground
link
highlight

Feedback

destructive
destructive-text
success
success-text
warning
warning-text
info
destructive-foreground

Lines and controls

border
border-card
divider
input
input-hover
ring
control-checkbox
control-radio
control-foreground

Navigation and overlays

header
header-foreground
sidebar
sidebar-foreground
overlay

Cards and progress

card-checklist-border
card-panel
card-panel-border
progress
progress-complete
progress-track

Date, phone and upload

calendar-header
calendar-header-foreground
calendar-weekday
calendar-day-hover
calendar-day-selected
calendar-day-selected-outline
popover-border
input-readonly-border
section-border
input-placeholder-default
upload-link
upload-dragging
subtlest-foreground
danger-alt
danger-border
file-size

Flushed and inverse inputs

input-disabled-inverse
input-flushed
input-flushed-focus

Navigation

navigation-foreground
navigation-hover
navigation-active
sidebar-border
sidebar-ring
sidebar-accordion-hover
close-button-hover
close-button-active
sign-out
contact-icon
avatar-border
indice-foreground
indice-active
toc-pressed
trip-header
trip-header-border
trip-header-indicator
nav-bar-selected
nav-bar-unselected
link-breadcrumb

Loading

spinner-primary
spinner-primary-track
spinner-secondary
spinner-secondary-track
skeleton-start
skeleton-end

Overlays

modal-overlay
drawer-overlay
image-preview-panel
toast-in-progress
toast-in-progress-foreground
tooltip-default
drawer-tab-indicator

Data display

table-border
divider-default
divider-flight
carousel-scrim
carousel-nav
carousel-nav-end
carousel-counter
carousel-foreground
status-requested
status-confirmed
progress-bar-track
progress-bar
progress-bar-complete
progress-value

Portal

trip-card
trip-card-foreground
trip-card-border
trip-card-scrim
trip-card-details
trip-card-details-foreground
trip-card-stats
trip-card-due
checklist-navigator
summary-tile
summary-tile-hover
summary-tile-foreground
summary-tile-icon-hover
summary-tile-attention-border
summary-tile-attention-foreground

Trip header content

disabled-foreground
select-guest
select-guest-hovered
select-guest-border
select-guest-border-open
guest-menu
guest-menu-foreground

Heroes

trip-hero-scrim
hotel-option
border-default
trip-subtler
trip-navbar

Trip details

flight-info
flight-duration
flight-info-headers
flight-icon
flight-location
room-option-label
icon-highlight

Palette

Every colour from packages/brand → foundations/colors.ts, with production names and exact hex values. One palette shared by all three brands, so it doesn't change when you switch theme — the roles above are where brands differ. Primitives produce no utility classes; components reach them only through the roles.

Primary

bunker
aluminium
bright-red
dark-green
cyber-yellow
rich-electric-blue

Secondary

sapphire
prussian-blue
scooter
parchment
raven

Neutral

black
true-grey
mid-grey
off-black-grey
raven
raven30
aluminium
dark-grey
gull-grey
gainsboro
white-smoke
wild-sand
grey-light
white

Alert

maroon
fire-engine-red
amber-red
coral-red
burnt-orange
vivid-tangelo
fire-bush
may-green
amulet
green

Accent

lime-green-light
powder-blue-light
powder-blue-dark
dark-cerulean
gold-fusion

Grey

900
800
700
600
500
400
300
200
100
50

Shades

black95
black70
black50
black30
black10
white70
white50
white30
white10
dark-green
scooter10
raven30
gold-fusion30
cyber-yellow-50
blue-dark
grey-light
scooter

Gainsboro

500

Chakra built-in (used by production tokens)

blackAlpha.300

Gradient

sapphire → prussian-blue