Colour palette

The Spiris Design System provides a comprehensive colour palette with CSS custom properties for consistent theming across your application.

Colour scale

Each colour palette uses a consistent 3-digit scale from 100 (lightest) to 1000 (darkest). The neutral palette extends to 1100 for additional contrast options.

Level	Usage
white (neutral only)	Pure white (#FFFFFF)
100	Backgrounds, subtle fills
200	Light backgrounds, hover states
300	Light accents, disabled states
400	Borders, secondary elements
500	Mid-tone elements
600	Primary actions, key elements
700	Hover states for primary elements
800	Active states, pressed elements
900	Dark accents, text on light backgrounds
1000	Darkest tones, high contrast elements
1100 (neutral only)	Maximum contrast, near-black
black (neutral only)	Pure black (#000000)

Neutral palette

The neutral palette provides grayscale colours that adapt to light and dark modes. Use the shorthand --neutral-* properties which automatically select the appropriate values for the current colour mode.

Light mode

Dark mode

Brand colour palettes

Purple (Primary)

The primary brand colour, used for key UI elements and branding.

Blue

Used for links, informational elements, and secondary branding.

Green

Used for success states, positive actions, and confirmations.

Red (Secondary)

Used for error states, destructive actions, and warnings.

Orange (Yellow)

Used for warning states and attention-grabbing elements.

Usage

CSS custom properties

Use CSS custom properties directly in your stylesheets:

/* Using the neutral palette */
.my-component {
  background-color: var(--neutral-100);
  border-color: var(--neutral-400);
  color: var(--neutral-1100);
}

/* Using brand colours */
.my-button {
  background-color: var(--purple-700);
  color: var(--neutral-100);
}

.my-button:hover {
  background-color: var(--purple-800);
}

SCSS colour-scale() function

When working with SCSS, use the colour-scale() helper function for a cleaner syntax:

@use 'spiris' as *;

.my-component {
  background-color: colour-scale(neutral, 100);
  border-color: colour-scale(neutral, 400);
  color: colour-scale(neutral, 1100);
}

.my-button {
  background-color: colour-scale(purple, 700);
  color: colour-scale(neutral, 100);

  &:hover {
    background-color: colour-scale(purple, 800);
  }
}

Migration guide (2-digit → 3-digit)

In v2.1, the colour scale was updated from 2-digit (05–90) to 3-digit (100–1000) naming. This provides better consistency with common design system conventions and allows for future expansion.

Scale mapping

Old (deprecated)	New
--colour-05	--colour-100
--colour-10	--colour-200
--colour-20	--colour-300
--colour-30	--colour-400
--colour-40	--colour-500
--colour-50	--colour-600
--colour-60	--colour-700
--colour-70	--colour-800
--colour-80	--colour-900
--colour-90	--colour-1000 (or --neutral-1100 for neutral)

Migration examples

Before (deprecated):

.card {
  background-color: var(--neutral-05);
  border-color: var(--neutral-30);
  color: var(--neutral-90);
}

.button-primary {
  background-color: var(--purple-60);
}

After:

.card {
  background-color: var(--neutral-100);
  border-color: var(--neutral-400);
  color: var(--neutral-1100);
}

.button-primary {
  background-color: var(--purple-700);
}

SCSS deprecation warnings

To help identify deprecated usage in your SCSS files during compilation, enable deprecation warnings:

// Enable deprecation warnings before importing the design system
$colour-scale-warnings: true;

@use 'spiris' as *;

When enabled, using deprecated 2-digit values with the colour-scale() function will output compilation warnings indicating the recommended replacement.