Appearance
Colours
The FastTrack colour system is built on CSS custom properties defined in public/assets/styles/colors.css. All colours are available globally and should be referenced via var() — never hardcode hex values.
The swatches below are generated at build time from colors.css via colours.data.js. To add, remove, or rename a colour, edit colors.css — this page updates automatically.
Brand Palette
Brand Colours
Pink
--color-brand-pink-200#FAD7E4--color-brand-pink-300#F4B0C8--color-brand-pink-400#E96092--color-brand-pink-500#D52454--color-brand-pink-600#C21030Purple
--color-brand-purple-200#E0C6E0--color-brand-purple-300#C18EC0--color-brand-purple-400#831F82--color-brand-purple-500#440743--color-brand-purple-600#230123--color-brand-purple-700#783171--color-brand-purple-800#440743Blue
--color-brand-blue-100#D8EDF9--color-brand-blue-200#B0DAF2--color-brand-blue-300#89C8EC--color-brand-blue-400#63B6E6--color-brand-blue-500#2782CF--color-brand-blue-600#1369B9--color-brand-blue-700#105DBA--color-brand-blue-800#012B86--color-brand-blue-900#001261Yellow
--color-brand-yellow-200#FFF6C9--color-brand-yellow-300#FEED93--color-brand-yellow-400#FFDB14--color-brand-yellow-500#FDBC25--color-brand-yellow-600#FCA122--color-brand-yellow-700#FDBC25Red
--color-brand-red-200#F9D3CC--color-brand-red-300#F2A699--color-brand-red-400#E54F35--color-brand-red-500#CD1913--color-brand-red-600#B80E11--color-brand-red-700#B61615--color-brand-red-800#820202--color-brand-red-900#5D0000Orange
--color-brand-orange-100#F9D3CC--color-brand-orange-200#FCE8C7--color-brand-orange-300#F9D18F--color-brand-orange-400#F4A321--color-brand-orange-500#E9681A--color-brand-orange-600#DF4317Green
--color-brand-green-200#D4E9D4--color-brand-green-300#A9D3A9--color-brand-green-400#3AAA3F--color-brand-green-500#2E7D2E--color-brand-green-600#1A5A1Acss
/* Usage */
.my-element {
background-color: var(--color-brand-pink-400);
color: var(--color-brand-blue-600);
}/* Usage */
.my-element {
background-color: var(--color-brand-pink-400);
color: var(--color-brand-blue-600);
}Mono / Neutrals
Mono Palette
--color-mono-white#FFF--color-mono-100#FAFAFA--color-mono-200#F5F5F5--color-mono-300#E5E5E5--color-mono-400#CACACA--color-mono-500#959595--color-mono-600#666666--color-mono-700#2C2C2C--color-mono-black#000css
/* Usage */
.surface {
background-color: var(--color-mono-white);
}
.text {
color: var(--color-mono-700);
}
.border {
border-color: var(--color-mono-300);
}/* Usage */
.surface {
background-color: var(--color-mono-white);
}
.text {
color: var(--color-mono-700);
}
.border {
border-color: var(--color-mono-300);
}Secondary Palette
Additional brand-adjacent palettes used for charts, accents, and themed surfaces.
Secondary Colours
Aqua
--color-secondary-aqua-400#E1F2F2--color-secondary-aqua-500#C4E5E4--color-secondary-aqua-600#89CCCA--color-secondary-aqua-700#4AA3A0--color-secondary-aqua-800#4AA3A0--color-secondary-aqua-900#28827FDenim
--color-secondary-denim-600#88B3DC--color-secondary-denim-700#1369B9--color-secondary-denim-800#012B86--color-secondary-denim-900#001261Green
--color-secondary-green-200#CDEACC--color-secondary-green-300#9CD499--color-secondary-green-400#3AAA35--color-secondary-green-500#0D710B--color-secondary-green-600#034B02Lilac
--color-secondary-lilac-600#E0C6E0--color-secondary-lilac-700#C18EC0--color-secondary-lilac-800#783171--color-secondary-lilac-900#440743Magenta
--color-secondary-magenta-500#EFC4DF--color-secondary-magenta-600#E96092--color-secondary-magenta-700#C0087F--color-secondary-magenta-800#831F82--color-secondary-magenta-900#91003FThunderbird
--color-secondary-thunderbird-600#DA8A89--color-secondary-thunderbird-700#B61615--color-secondary-thunderbird-800#C21030--color-secondary-thunderbird-900#6D001FGreco Palette
Greco-specific brand colours — not part of the FT base palette. Used by greco-theme.css overrides.
Greco Colours
Green Teal
--color-green-teal-100#BEE1DF--color-green-teal-200#8FCCBA--color-green-teal-300#77C2A6--color-green-teal-400#5DB994--color-green-teal-500#46B283--color-green-teal-600#399D73--color-green-teal-700#2D8963--color-green-teal-800#227453Semantic Colours
Functional aliases that map to brand palette tokens. Defined in tokens/semantic.tokens.json.
Semantic Colours
Primary
lighter
light
base
dark
darker
Maps to pink 200–600
Secondary
lightest
light
base
Maps to blue 200, 500, 600
Tertiary
light
base
dark
Maps to purple 300–500
Success
lightest
light
base
dark
Maps to green 200–500
Warning
lightest
light
base
dark
Maps to yellow 200–500
Error
lightest
light
base
dark
Maps to red 200, 400, 500, 600
Info
lightest
light
base
dark
Maps to blue 200, 400, 500, 600
Neutral
lightest
lighter
light
base
dark
Maps to mono 200–700
Surface, Text & Border
Semantic tokens for surfaces, text and interactive states.
| Token | Value | Usage |
|---|---|---|
surface.base | mono.white | Default background |
surface.secondary | mono.100 | Secondary container background |
surface.tertiary | mono.200 | Nested content background |
surface.inverse | mono.black | Inverse/dark background |
on-surface.base | mono.700 | Default text on light surfaces |
on-surface.secondary | mono.600 | Secondary text |
on-surface.tertiary | mono.500 | Tertiary text |
on-surface.disabled | mono.400 | Disabled text |
on-surface.inverse | mono.white | Text on dark surfaces |
border.base | mono.300 | Default border |
border.subtle | mono.200 | Subtle border |
border.strong | mono.500 | Emphasis border |
border.focus | blue.600 | Focused element border |
focus-ring.base | blue.600 | Focus ring for keyboard navigation |
link.base | blue.600 | Default link colour |
link.hover | blue.500 | Hovered link colour |
link.visited | purple.300 | Visited link colour |
accent.primary | orange.500 | Primary accent highlights |
accent.secondary | purple.400 | Secondary accent |
overlay.base | rgba(0,0,0,0.5) | Default overlay backdrop |