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.

Brand Palette ​

Seven colour families, each with 5 shades (200–600). Shade 400 is the default/base for each family.

/* 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 ​

Nine neutral shades from white to black.

/* 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); }

Semantic Colours ​

Functional aliases that map to brand palette tokens. Defined in tokens/semantic.tokens.json.

Surface, Text & Border ​

Semantic tokens for surfaces, text and interactive states.