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 ​

The approved palette contains pink, purple, blue, yellow, red, and orange, with stops 200–600.

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

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

Green and teal use stops 200–600. Use secondary green for success states.

Extra Shades ​

Extra shades outside the palette, kept for compatibility. These names and values remain unchanged.

Deprecated Aliases ​

Deprecated aliases: will be removed in the next major version.

Brand green maps to secondary green at the same stop. The old secondary families and green-teal names map to the nearest final token. These mappings use Oklab distance, including Mono. Colour proximity does not imply the same semantic purpose. The optional Greco theme retains its deliberate brand overrides and uses these aliases.

Semantic Colours ​

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

Surface, Text & Border ​

Semantic tokens for surfaces, text and interactive states.