Defining Your Theme

The components library provides a theming framework that can be used within these components and beyond on your entire site, helping to maintain a cohesive design system.

The framework acts through a number of layers, where each one feeds down into the next. Its fully customisable implementation allows you to decouple or change these connections at any point, simply by overriding the css variables within your project.

1 - site variables are at the top of the style tree, and propagate through to the lower levels. This allows you to re theme a site with only a handful of variable changes.

2 - Primitive variables are computed from site variables, such as shades of a site colour.

3 - Semantic variables apply context to the site and primitive variables. These can exist as a specified primitive, such as default, light or dark shades of a colour. THey can also exist in a broader context, where foreground, background and border styles are given as sets that can be reused throughout. Classes are also provided in these cases to improve the developer experience and promote consistent styling.

4 - Component variables are specific to each component. These are documented on each components page respectively

In order to apply your own themes on top of the base styles, simply define the variables you want to change, and they will update across your site where they are used.

Theming System Visualised

←Site Variables→

Site Variables

The design system is based off the following site variables. These can be overridden to change the appearance of the entire site.

Colours

--color-site-primary - The primary or brand colour

--color-site-secondary - The secondary colour

--color--site-tertiary - The tertiary colour

--color-site-neutral - The neutral tone, typically a shade of grey

--color-site-attention - The attention colour

--color-site-success - The success colour

--color-site-error - The error colour

--color-site-promotion - The promotion colour, used sparingly to highlight important information such as promotional items

Radius

--radius-site - The site radius for all rounded corners

Shadows

--shadow-site - The site shadow for all components

Colour Palette

The color scheme of a site is defined using the site variables shown below. From this, CSS calculations will generate a range of primitive shades centered around the site variable, where the site colour is 500 on a scale of 50 (lightest) to 950 (darkest). These can be individually changed by overriding their css definitions.

Semantic shades have been labeled. Default shades are provided when no suffix is given, such as --color-primary. Other semantic shades, such as ‘light’ are given by using the label as the suffix, e.g. --color-primary-light

Tip

Due to tailwind v4’s approach to custom tailwind properties, the --color- prefix means that we can access all of these colours within tailwind. However, they can also be accessed as a standard CSS variable. This can be useful if we want to apply any CSS calculations to it, but is generally not advised in order to maintain colour consistency.

<button class="bg-primary-500">
  This button uses our custom tailwind property
</button>
<button class="bg-[var(--color-primary-500)]">
  This button uses our CSS variable{' '}
</button>

Preview Code

Copy

primary

light

--color-primary-50

oklch( from var(--color-primary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-primary-100

oklch( from var(--color-primary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-primary-200

oklch( from var(--color-primary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-primary-300

oklch( from var(--color-primary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

hover-light

--color-primary-400

oklch( from var(--color-primary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-primary-500

oklch(from var(--color-primary) l c h)

Click to copy to clipboard

Copied to clipboard

500

hover

--color-primary-600

oklch( from var(--color-primary-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-primary-700

oklch( from var(--color-primary-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-primary-800

oklch( from var(--color-primary-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-primary-900

oklch( from var(--color-primary-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

dark

--color-primary-950

oklch( from var(--color-primary-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

secondary

light

--color-secondary-50

oklch( from var(--color-secondary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-secondary-100

oklch( from var(--color-secondary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-secondary-200

oklch( from var(--color-secondary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-secondary-300

oklch( from var(--color-secondary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

hover-light

--color-secondary-400

oklch( from var(--color-secondary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-secondary-500

oklch(from var(--color-secondary) l c h)

Click to copy to clipboard

Copied to clipboard

500

hover

--color-secondary-600

oklch( from var(--color-secondary-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-secondary-700

oklch( from var(--color-secondary-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-secondary-800

oklch( from var(--color-secondary-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-secondary-900

oklch( from var(--color-secondary-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

dark

--color-secondary-950

oklch( from var(--color-secondary-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

tertiary

light

--color-tertiary-50

oklch( from var(--color-tertiary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-tertiary-100

oklch( from var(--color-tertiary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-tertiary-200

oklch( from var(--color-tertiary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-tertiary-300

oklch( from var(--color-tertiary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

hover-light

--color-tertiary-400

oklch( from var(--color-tertiary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-tertiary-500

oklch(from var(--color-tertiary) l c h)

Click to copy to clipboard

Copied to clipboard

500

hover

--color-tertiary-600

oklch( from var(--color-tertiary-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-tertiary-700

oklch( from var(--color-tertiary-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-tertiary-800

oklch( from var(--color-tertiary-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-tertiary-900

oklch( from var(--color-tertiary-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

dark

--color-tertiary-950

oklch( from var(--color-tertiary-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

neutral

light

--color-neutral-50

oklch( from var(--color-neutral-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-neutral-100

oklch( from var(--color-neutral-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-neutral-200

oklch( from var(--color-neutral-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-neutral-300

oklch( from var(--color-neutral-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

--color-neutral-400

oklch( from var(--color-neutral-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-neutral-500

oklch(from var(--color-neutral) l c h)

Click to copy to clipboard

Copied to clipboard

500

--color-neutral-600

oklch( from var(--color-neutral-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-neutral-700

oklch( from var(--color-neutral-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-neutral-800

oklch( from var(--color-neutral-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-neutral-900

oklch( from var(--color-neutral-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

dark

--color-neutral-950

oklch( from var(--color-neutral-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

attention

light

--color-attention-50

oklch( from var(--color-attention-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-attention-100

oklch( from var(--color-attention-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-attention-200

oklch( from var(--color-attention-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-attention-300

oklch( from var(--color-attention-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

--color-attention-400

oklch( from var(--color-attention-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-attention-500

oklch(from var(--color-attention) l c h)

Click to copy to clipboard

Copied to clipboard

500

--color-attention-600

oklch( from var(--color-attention-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-attention-700

oklch( from var(--color-attention-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-attention-800

oklch( from var(--color-attention-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-attention-900

oklch( from var(--color-attention-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

--color-attention-950

oklch( from var(--color-attention-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

success

light

--color-success-50

oklch( from var(--color-success-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-success-100

oklch( from var(--color-success-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-success-200

oklch( from var(--color-success-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-success-300

oklch( from var(--color-success-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

--color-success-400

oklch( from var(--color-success-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-success-500

oklch(from var(--color-success) l c h)

Click to copy to clipboard

Copied to clipboard

500

--color-success-600

oklch( from var(--color-success-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-success-700

oklch( from var(--color-success-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-success-800

oklch( from var(--color-success-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-success-900

oklch( from var(--color-success-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

--color-success-950

oklch( from var(--color-success-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

error

light

--color-error-50

oklch( from var(--color-error-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-error-100

oklch( from var(--color-error-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-error-200

oklch( from var(--color-error-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-error-300

oklch( from var(--color-error-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

--color-error-400

oklch( from var(--color-error-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-error-500

oklch(from var(--color-error) l c h)

Click to copy to clipboard

Copied to clipboard

500

--color-error-600

oklch( from var(--color-error-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-error-700

oklch( from var(--color-error-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-error-800

oklch( from var(--color-error-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-error-900

oklch( from var(--color-error-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

--color-error-950

oklch( from var(--color-error-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

promotion

--color-promotion-50

oklch( from var(--color-promotion-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

50

--color-promotion-100

oklch( from var(--color-promotion-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

100

--color-promotion-200

oklch( from var(--color-promotion-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

200

--color-promotion-300

oklch( from var(--color-promotion-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

300

--color-promotion-400

oklch( from var(--color-promotion-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h

Click to copy to clipboard

Copied to clipboard

400

default

--color-promotion-500

oklch(from var(--color-promotion) l c h)

Click to copy to clipboard

Copied to clipboard

500

--color-promotion-600

oklch( from var(--color-promotion-500) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

600

--color-promotion-700

oklch( from var(--color-promotion-600) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

700

--color-promotion-800

oklch( from var(--color-promotion-700) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

800

--color-promotion-900

oklch( from var(--color-promotion-800) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

900

--color-promotion-950

oklch( from var(--color-promotion-900) calc(l * 0.8) calc(c * 1.1) h

Click to copy to clipboard

Copied to clipboard

950

@theme {
  /* Global Colors */
  --color-primary: oklch(0.43 0.0147 248.17);
  --color-secondary: oklch(0.67 0.15 250);
  --color-tertiary: oklch(0.65 0.2 300);
  --color-neutral: oklch(0.64 0 0);
  --color-success: oklch(0.5 0.15 150);
  --color-attention: oklch(0.55 0.12 250);
  --color-error: oklch(0.55 0.2 30);
  --color-promotion: oklch(0.6 0.25 30);

  /* Primary Colors */
  --color-primary-500: oklch(from var(--color-primary) l c h);

  --color-primary-400: oklch(
    from var(--color-primary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-300: oklch(
    from var(--color-primary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-200: oklch(
    from var(--color-primary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-100: oklch(
    from var(--color-primary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-50: oklch(
    from var(--color-primary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-primary-600: oklch(
    from var(--color-primary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-700: oklch(
    from var(--color-primary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-800: oklch(
    from var(--color-primary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-900: oklch(
    from var(--color-primary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-950: oklch(
    from var(--color-primary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Secondary Colors */
  --color-secondary-500: oklch(from var(--color-secondary) l c h);

  --color-secondary-400: oklch(
    from var(--color-secondary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-300: oklch(
    from var(--color-secondary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-200: oklch(
    from var(--color-secondary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-100: oklch(
    from var(--color-secondary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-50: oklch(
    from var(--color-secondary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-secondary-600: oklch(
    from var(--color-secondary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-700: oklch(
    from var(--color-secondary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-800: oklch(
    from var(--color-secondary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-900: oklch(
    from var(--color-secondary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-950: oklch(
    from var(--color-secondary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Tertiary Colors */
  --color-tertiary-500: oklch(from var(--color-tertiary) l c h);

  --color-tertiary-400: oklch(
    from var(--color-tertiary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-300: oklch(
    from var(--color-tertiary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-200: oklch(
    from var(--color-tertiary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-100: oklch(
    from var(--color-tertiary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-50: oklch(
    from var(--color-tertiary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-tertiary-600: oklch(
    from var(--color-tertiary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-700: oklch(
    from var(--color-tertiary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-800: oklch(
    from var(--color-tertiary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-900: oklch(
    from var(--color-tertiary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-950: oklch(
    from var(--color-tertiary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Neutral Colors */
  --color-neutral-500: oklch(from var(--color-neutral) l c h);

  --color-neutral-400: oklch(
    from var(--color-neutral-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-300: oklch(
    from var(--color-neutral-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-200: oklch(
    from var(--color-neutral-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-100: oklch(
    from var(--color-neutral-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-50: oklch(
    from var(--color-neutral-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-600: oklch(
    from var(--color-neutral-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-700: oklch(
    from var(--color-neutral-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-800: oklch(
    from var(--color-neutral-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-900: oklch(
    from var(--color-neutral-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-950: oklch(
    from var(--color-neutral-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Status Colors */
  --color-attention: oklch(from var(--color-attention) l c h);
  --color-attention-light: oklch(from var(--color-attention) 1 calc(c * 0.5) h);

  --color-success: oklch(from var(--color-success) l c h);
  --color-success-light: oklch(from var(--color-success) 1 calc(c * 0.5) h);

  --color-error: oklch(from var(--color-error) l c h);
  --color-error-light: oklch(from var(--color-error) 1 calc(c * 0.5) h);

  --color-promotion: oklch(from var(--color-promotion) l c h);

  /* Status Color Scales */
  --color-attention-500: oklch(from var(--color-attention) l c h);
  --color-attention-400: oklch(
    from var(--color-attention-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-300: oklch(
    from var(--color-attention-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-200: oklch(
    from var(--color-attention-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-100: oklch(
    from var(--color-attention-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-50: oklch(
    from var(--color-attention-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-600: oklch(
    from var(--color-attention-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-700: oklch(
    from var(--color-attention-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-800: oklch(
    from var(--color-attention-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-900: oklch(
    from var(--color-attention-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-950: oklch(
    from var(--color-attention-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-success-500: oklch(from var(--color-success) l c h);
  --color-success-400: oklch(
    from var(--color-success-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-300: oklch(
    from var(--color-success-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-200: oklch(
    from var(--color-success-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-100: oklch(
    from var(--color-success-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-50: oklch(
    from var(--color-success-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-600: oklch(
    from var(--color-success-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-700: oklch(
    from var(--color-success-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-800: oklch(
    from var(--color-success-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-900: oklch(
    from var(--color-success-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-950: oklch(
    from var(--color-success-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-error-500: oklch(from var(--color-error) l c h);
  --color-error-400: oklch(
    from var(--color-error-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-300: oklch(
    from var(--color-error-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-200: oklch(
    from var(--color-error-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-100: oklch(
    from var(--color-error-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-50: oklch(
    from var(--color-error-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-600: oklch(
    from var(--color-error-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-700: oklch(
    from var(--color-error-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-800: oklch(
    from var(--color-error-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-900: oklch(
    from var(--color-error-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-950: oklch(
    from var(--color-error-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-promotion-500: oklch(from var(--color-promotion) l c h);
  --color-promotion-400: oklch(
    from var(--color-promotion-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-300: oklch(
    from var(--color-promotion-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-200: oklch(
    from var(--color-promotion-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-100: oklch(
    from var(--color-promotion-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-50: oklch(
    from var(--color-promotion-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-600: oklch(
    from var(--color-promotion-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-700: oklch(
    from var(--color-promotion-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-800: oklch(
    from var(--color-promotion-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-900: oklch(
    from var(--color-promotion-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-950: oklch(
    from var(--color-promotion-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Core Colors */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Semantic Colors */
  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-50);
  --color-primary-dark: var(--color-primary-950);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-hover-light: var(--color-primary-400);

  --color-secondary: var(--color-secondary-500);
  --color-secondary-light: var(--color-secondary-50);
  --color-secondary-dark: var(--color-secondary-950);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-hover-light: var(--color-secondary-400);

  --color-tertiary: var(--color-tertiary-500);
  --color-tertiary-light: var(--color-tertiary-50);
  --color-tertiary-dark: var(--color-tertiary-950);
  --color-tertiary-hover: var(--color-tertiary-600);
  --color-tertiary-hover-light: var(--color-tertiary-400);

  --color-attention: var(--color-attention-500);
  --color-attention-light: var(--color-attention-50);

  --color-success: var(--color-success-500);
  --color-success-light: var(--color-success-50);

  --color-error: var(--color-error-500);
  --color-error-light: var(--color-error-50);

  --color-promotion: var(--color-promotion-500);

  /* Text Colors */
  --color-high-emphasis: var(--color-neutral-600);
  --color-medium-emphasis: var(--color-neutral-400);

  /* Utility Colors */
  --color-inactive: var(--color-neutral-300);
  --color-border-controls: var(--color-neutral-500);
  --color-border-cards: var(--color-neutral-300);
  --color-surface-cards: var(--color-neutral-200);
}

@theme {
  /* Global Colors */
  --color-primary: oklch(0.43 0.0147 248.17);
  --color-secondary: oklch(0.67 0.15 250);
  --color-tertiary: oklch(0.65 0.2 300);
  --color-neutral: oklch(0.64 0 0);
  --color-success: oklch(0.5 0.15 150);
  --color-attention: oklch(0.55 0.12 250);
  --color-error: oklch(0.55 0.2 30);
  --color-promotion: oklch(0.6 0.25 30);

  /* Primary Colors */
  --color-primary-500: oklch(from var(--color-primary) l c h);

  --color-primary-400: oklch(
    from var(--color-primary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-300: oklch(
    from var(--color-primary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-200: oklch(
    from var(--color-primary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-100: oklch(
    from var(--color-primary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-primary-50: oklch(
    from var(--color-primary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-primary-600: oklch(
    from var(--color-primary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-700: oklch(
    from var(--color-primary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-800: oklch(
    from var(--color-primary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-900: oklch(
    from var(--color-primary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-primary-950: oklch(
    from var(--color-primary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Secondary Colors */
  --color-secondary-500: oklch(from var(--color-secondary) l c h);

  --color-secondary-400: oklch(
    from var(--color-secondary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-300: oklch(
    from var(--color-secondary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-200: oklch(
    from var(--color-secondary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-100: oklch(
    from var(--color-secondary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-secondary-50: oklch(
    from var(--color-secondary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-secondary-600: oklch(
    from var(--color-secondary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-700: oklch(
    from var(--color-secondary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-800: oklch(
    from var(--color-secondary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-900: oklch(
    from var(--color-secondary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-secondary-950: oklch(
    from var(--color-secondary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Tertiary Colors */
  --color-tertiary-500: oklch(from var(--color-tertiary) l c h);

  --color-tertiary-400: oklch(
    from var(--color-tertiary-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-300: oklch(
    from var(--color-tertiary-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-200: oklch(
    from var(--color-tertiary-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-100: oklch(
    from var(--color-tertiary-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-tertiary-50: oklch(
    from var(--color-tertiary-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );

  --color-tertiary-600: oklch(
    from var(--color-tertiary-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-700: oklch(
    from var(--color-tertiary-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-800: oklch(
    from var(--color-tertiary-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-900: oklch(
    from var(--color-tertiary-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-tertiary-950: oklch(
    from var(--color-tertiary-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Neutral Colors */
  --color-neutral-500: oklch(from var(--color-neutral) l c h);

  --color-neutral-400: oklch(
    from var(--color-neutral-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-300: oklch(
    from var(--color-neutral-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-200: oklch(
    from var(--color-neutral-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-100: oklch(
    from var(--color-neutral-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-50: oklch(
    from var(--color-neutral-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-neutral-600: oklch(
    from var(--color-neutral-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-700: oklch(
    from var(--color-neutral-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-800: oklch(
    from var(--color-neutral-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-900: oklch(
    from var(--color-neutral-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-neutral-950: oklch(
    from var(--color-neutral-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Status Colors */
  --color-attention: oklch(from var(--color-attention) l c h);
  --color-attention-light: oklch(from var(--color-attention) 1 calc(c * 0.5) h);

  --color-success: oklch(from var(--color-success) l c h);
  --color-success-light: oklch(from var(--color-success) 1 calc(c * 0.5) h);

  --color-error: oklch(from var(--color-error) l c h);
  --color-error-light: oklch(from var(--color-error) 1 calc(c * 0.5) h);

  --color-promotion: oklch(from var(--color-promotion) l c h);

  /* Status Color Scales */
  --color-attention-500: oklch(from var(--color-attention) l c h);
  --color-attention-400: oklch(
    from var(--color-attention-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-300: oklch(
    from var(--color-attention-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-200: oklch(
    from var(--color-attention-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-100: oklch(
    from var(--color-attention-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-50: oklch(
    from var(--color-attention-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-attention-600: oklch(
    from var(--color-attention-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-700: oklch(
    from var(--color-attention-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-800: oklch(
    from var(--color-attention-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-900: oklch(
    from var(--color-attention-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-attention-950: oklch(
    from var(--color-attention-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-success-500: oklch(from var(--color-success) l c h);
  --color-success-400: oklch(
    from var(--color-success-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-300: oklch(
    from var(--color-success-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-200: oklch(
    from var(--color-success-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-100: oklch(
    from var(--color-success-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-50: oklch(
    from var(--color-success-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-success-600: oklch(
    from var(--color-success-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-700: oklch(
    from var(--color-success-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-800: oklch(
    from var(--color-success-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-900: oklch(
    from var(--color-success-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-success-950: oklch(
    from var(--color-success-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-error-500: oklch(from var(--color-error) l c h);
  --color-error-400: oklch(
    from var(--color-error-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-300: oklch(
    from var(--color-error-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-200: oklch(
    from var(--color-error-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-100: oklch(
    from var(--color-error-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-50: oklch(
    from var(--color-error-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-error-600: oklch(
    from var(--color-error-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-700: oklch(
    from var(--color-error-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-800: oklch(
    from var(--color-error-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-900: oklch(
    from var(--color-error-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-error-950: oklch(
    from var(--color-error-900) calc(l * 0.8) calc(c * 1.1) h
  );

  --color-promotion-500: oklch(from var(--color-promotion) l c h);
  --color-promotion-400: oklch(
    from var(--color-promotion-500) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-300: oklch(
    from var(--color-promotion-400) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-200: oklch(
    from var(--color-promotion-300) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-100: oklch(
    from var(--color-promotion-200) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-50: oklch(
    from var(--color-promotion-100) calc(1 - (1 - l) * 0.6) calc(c * 0.8) h
  );
  --color-promotion-600: oklch(
    from var(--color-promotion-500) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-700: oklch(
    from var(--color-promotion-600) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-800: oklch(
    from var(--color-promotion-700) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-900: oklch(
    from var(--color-promotion-800) calc(l * 0.8) calc(c * 1.1) h
  );
  --color-promotion-950: oklch(
    from var(--color-promotion-900) calc(l * 0.8) calc(c * 1.1) h
  );

  /* Core Colors */
  --color-black: #000000;
  --color-white: #ffffff;

  /* Semantic Colors */
  --color-primary: var(--color-primary-500);
  --color-primary-light: var(--color-primary-50);
  --color-primary-dark: var(--color-primary-950);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-hover-light: var(--color-primary-400);

  --color-secondary: var(--color-secondary-500);
  --color-secondary-light: var(--color-secondary-50);
  --color-secondary-dark: var(--color-secondary-950);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-hover-light: var(--color-secondary-400);

  --color-tertiary: var(--color-tertiary-500);
  --color-tertiary-light: var(--color-tertiary-50);
  --color-tertiary-dark: var(--color-tertiary-950);
  --color-tertiary-hover: var(--color-tertiary-600);
  --color-tertiary-hover-light: var(--color-tertiary-400);

  --color-attention: var(--color-attention-500);
  --color-attention-light: var(--color-attention-50);

  --color-success: var(--color-success-500);
  --color-success-light: var(--color-success-50);

  --color-error: var(--color-error-500);
  --color-error-light: var(--color-error-50);

  --color-promotion: var(--color-promotion-500);

  /* Text Colors */
  --color-high-emphasis: var(--color-neutral-600);
  --color-medium-emphasis: var(--color-neutral-400);

  /* Utility Colors */
  --color-inactive: var(--color-neutral-300);
  --color-border-controls: var(--color-neutral-500);
  --color-border-cards: var(--color-neutral-300);
  --color-surface-cards: var(--color-neutral-200);
}

Skins

A number of categories of element styles are provided. These should be applied throughout a site to maintain visual consistency, and allow for site wide theming at the css layer - although they can be overridden (for example by tailwind classes) at each use case without effecting other instances.

Each set defines the background, foreground and border colours at both a default state, and in states where there is interaction.

Tip

For each set, the package provides a css class, which will apply only the default state styling, and a interactive class, which includes all interactive and default state styles, applied using appropriate CSS directives.

For example, card will apply the default styles, and card-interactive will also include the hover, focus and active states.

Accessibility Warning

By default, these pairings of foreground and background will meet the 4.5:1 contrast ratio, the minimum for WCAG 2.0 AA. If you override these colours, ensure that the contrast ratio is maintained.

Preview Code

Copy

Default

Base Class Name: default

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-black	--color-black

Interactive Class Name: default-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-50	--color-neutral-700	--color-neutral-300
Focus	--color-neutral-50	--color-neutral-700	--color-neutral-400
Active	--color-neutral-200	--color-neutral-600	--color-neutral-500
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Muted

Base Class Name: muted

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-neutral-200	--color-neutral-700	transparent

Interactive Class Name: muted-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-300	--color-neutral-700	transparent
Focus	--color-neutral-300	--color-neutral-700	transparent
Active	--color-neutral-400	--color-neutral-700	transparent
Disabled	var(--color-neutral-50 ;)	--color-neutral-400	transparent

Primary

Base Class Name: primary

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-primary	--color-primary

Interactive Class Name: primary-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-primary-50	--color-primary-600	--color-primary-600
Focus	--color-primary-50	--color-primary-600	--color-primary-600
Active	--color-primary-100	--color-primary-700	--color-primary-700
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Primary Emphasised

Base Class Name: primary-emphasised

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-primary	--color-white	transparent

Interactive Class Name: primary-emphasised-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-primary-600	--color-white	transparent
Focus	--color-primary-600	--color-white	transparent
Active	--color-primary-700	--color-white	transparent
Disabled	--color-primary-200	--color-neutral-400	transparent

Primary Subtle

Base Class Name: primary-subtle

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	transparent	--color-primary	transparent

Interactive Class Name: primary-subtle-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-primary-50	--color-primary-600	transparent
Focus	--color-primary-50	--color-primary-600	transparent
Active	--color-primary-100	--color-primary-700	transparent
Disabled	transparent	--color-neutral-300	transparent

Secondary

Base Class Name: secondary

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-secondary	--color-secondary

Interactive Class Name: secondary-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-secondary-50	--color-secondary-600	--color-secondary-600
Focus	--color-secondary-50	--color-secondary-600	--color-secondary-600
Active	--color-secondary-100	--color-secondary-700	--color-secondary-700
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Secondary Emphasised

Base Class Name: secondary-emphasised

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-secondary	--color-white	transparent

Interactive Class Name: secondary-emphasised-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-secondary-600	--color-white	transparent
Focus	--color-secondary-600	--color-white	transparent
Active	--color-secondary-700	--color-white	transparent
Disabled	--color-secondary-200	--color-neutral-400	transparent

Secondary Subtle

Base Class Name: secondary-subtle

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	transparent	--color-secondary	transparent

Interactive Class Name: secondary-subtle-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-secondary-50	--color-secondary-600	transparent
Focus	--color-secondary-50	--color-secondary-600	transparent
Active	--color-secondary-100	--color-secondary-700	transparent
Disabled	transparent	--color-neutral-300	transparent

Tertiary

Base Class Name: tertiary

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-tertiary	var (--color-tertiary

Interactive Class Name: tertiary-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-tertiary-50	--color-tertiary-600	--color-tertiary-600
Focus	--color-tertiary-50	--color-tertiary-600	--color-tertiary-600
Active	--color-tertiary-100	--color-tertiary-700	--color-tertiary-700
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Tertiary Emphasised

Base Class Name: tertiary-emphasised

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-tertiary	--color-white	transparent

Interactive Class Name: tertiary-emphasised-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-tertiary-600	--color-white	transparent
Focus	--color-tertiary-600	--color-white	transparent
Active	--color-tertiary-700	--color-white	transparent
Disabled	--color-tertiary-200	--color-neutral-400	transparent

Tertiary Subtle

Base Class Name: tertiary-subtle

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	transparent	--color-tertiary	transparent

Interactive Class Name: tertiary-subtle-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-tertiary-50	--color-tertiary-600	transparent
Focus	--color-tertiary-50	--color-tertiary-600	transparent
Active	--color-tertiary-100	--color-tertiary-700	transparent
Disabled	transparent	--color-neutral-300	transparent

Site Header

Base Class Name: site-header

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-primary	--color-primary

Interactive Class Name: site-header-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-primary-hover	--color-primary-100	--color-primary-100
Focus	--color-primary-600	--color-neutral-100	--color-neutral-100
Active	--color-primary-700	--color-neutral-50	--color-neutral-50
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Footer

Base Class Name: footer

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-neutral-300	--color-black	--color-neutral-700

Interactive Class Name: footer-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-400	--color-neutral-800	--color-neutral-800
Focus	--color-neutral-400	--color-neutral-800	--color-neutral-900
Active	--color-neutral-500	--color-neutral-700	--color-neutral-1000
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Card

Base Class Name: card

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-neutral-100	--color-neutral-900	--color-neutral-200

Interactive Class Name: card-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-200	--color-primary-700	--color-neutral-300
Focus	--color-neutral-200	--color-primary-700	--color-neutral-300
Active	--color-primary-300	--color-primary-500	--color-primary-500
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Navigation

Base Class Name: navigation

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-primary-900	--color-white	--color-primary-600

Interactive Class Name: navigation-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-primary-100	--color-neutral-50	--color-primary-700
Focus	--color-primary-100	--color-neutral-100	--color-primary-800
Active	--color-primary-300	--color-neutral-200	--color-primary-900
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Modal

Base Class Name: modal

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-neutral-900	--color-neutral-200

Interactive Class Name: modal-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-50	--color-neutral-800	--color-neutral-300
Focus	--color-neutral-100	--color-neutral-700	--color-neutral-400
Active	--color-neutral-200	--color-neutral-600	--color-neutral-500
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Container

Base Class Name: container

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-neutral-50	--color-neutral-900	--color-neutral-200

Interactive Class Name: container-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-100	--color-neutral-800	--color-neutral-300
Focus	--color-neutral-200	--color-neutral-700	--color-neutral-400
Active	--color-neutral-300	--color-neutral-600	--color-neutral-500
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Control

Base Class Name: control

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-white	--color-neutral-900	--color-neutral-300

Interactive Class Name: control-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-50	--color-neutral-800	--color-neutral-400
Focus	--color-neutral-100	--color-neutral-700	--color-neutral-500
Active	--color-neutral-200	--color-neutral-600	--color-neutral-600
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Attention

Base Class Name: attention

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-attention-light	--color-attention	--color-attention-300

Interactive Class Name: attention-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-attention-100	--color-attention-600	--color-attention-400
Focus	--color-attention-200	--color-attention-700	--color-attention-500
Active	--color-attention-300	--color-attention-800	--color-attention-600
Disabled	--color-attention-50	--color-neutral-400	--color-attention-200

Success

Base Class Name: success

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-success-light	var (--color-success	--color-success-300

Interactive Class Name: success-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-success-100	--color-success-600	--color-success-400
Focus	--color-success-200	--color-success-700	--color-success-500
Active	--color-success-300	--color-success-800	--color-success-600
Disabled	--color-success-50	--color-neutral-400	--color-success-200

Error

Base Class Name: error

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-error-light	--color-error	--color-error-300

Interactive Class Name: error-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-error-100	--color-error-600	--color-error-400
Focus	--color-error-200	--color-error-700	--color-error-500
Active	--color-error-300	--color-error-800	--color-error-600
Disabled	--color-error-50	--color-neutral-400	--color-error-200

Inactive

Base Class Name: inactive

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Default	--color-neutral-100	--color-neutral-500	--color-neutral-300

Interactive Class Name: inactive-interactive

(includes default state)

Click to copy class name to clipboard

Copied to clipboard!

State	Background	Foreground	Border
Hover	--color-neutral-200	--color-neutral-600	--color-neutral-400
Focus	--color-neutral-300	--color-neutral-700	--color-neutral-500
Active	--color-neutral-400	--color-neutral-800	--color-neutral-600
Disabled	--color-neutral-50	--color-neutral-400	--color-neutral-200

Click to copy CSS variable name to clipboard

Copied to clipboard

/* Semantic Colors */
@theme {
  /* Default */
  --color-background: var(--color-white);
  --color-background-hover: var(--color-neutral-50);
  --color-background-focus: var(--color-neutral-50);
  --color-background-active: var(--color-neutral-200);
  --color-background-disabled: var(--color-neutral-50);

  --color-foreground: var(--color-black);
  --color-foreground-hover: var(--color-neutral-700);
  --color-foreground-focus: var(--color-neutral-700);
  --color-foreground-active: var(--color-neutral-600);
  --color-foreground-disabled: var(--color-neutral-400);

  --color-border: var(--color-black);
  --color-border-hover: var(--color-neutral-300);
  --color-border-focus: var(--color-neutral-400);
  --color-border-active: var(--color-neutral-500);
  --color-border-disabled: var(--color-neutral-200);

  /* Muted */
  --color-muted-background: var(--color-neutral-200);
  --color-muted-background-hover: var(--color-neutral-300);
  --color-muted-background-focus: var(--color-neutral-300);
  --color-muted-background-active: var(--color-neutral-400);
  --color-muted-background-disabled: var(var(--color-neutral-50) ;)
    --color-muted-foreground: var(--color-neutral-700);
  --color-muted-foreground-hover: var(--color-neutral-700);
  --color-muted-foreground-focus: var(--color-neutral-700);
  --color-muted-foreground-active: var(--color-neutral-700);
  --color-muted-foreground-disabled: var(--color-neutral-400);

  --color-muted-border: transparent;
  --color-muted-border-hover: transparent;
  --color-muted-border-focus: transparent;
  --color-muted-border-active: transparent;
  --color-muted-border-disabled: transparent;

  /* Primary Semantic Sets */
  --color-primary-emphasised-background: var(--color-primary);
  --color-primary-emphasised-foreground: var(--color-white);
  --color-primary-emphasised-border: transparent;
  --color-primary-emphasised-background-hover: var(--color-primary-600);
  --color-primary-emphasised-foreground-hover: var(--color-white);
  --color-primary-emphasised-border-hover: transparent;
  --color-primary-emphasised-background-focus: var(--color-primary-600);
  --color-primary-emphasised-foreground-focus: var(--color-white);
  --color-primary-emphasised-border-focus: transparent;
  --color-primary-emphasised-background-active: var(--color-primary-700);
  --color-primary-emphasised-foreground-active: var(--color-white);
  --color-primary-emphasised-border-active: transparent;
  --color-primary-emphasised-background-disabled: var(--color-primary-200);
  --color-primary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-primary-emphasised-border-disabled: transparent;

  --color-primary-background: var(--color-white);
  --color-primary-foreground: var(--color-primary);
  --color-primary-border: var(--color-primary);
  --color-primary-background-hover: var(--color-primary-50);
  --color-primary-foreground-hover: var(--color-primary-600);
  --color-primary-border-hover: var(--color-primary-600);
  --color-primary-background-focus: var(--color-primary-50);
  --color-primary-foreground-focus: var(--color-primary-600);
  --color-primary-border-focus: var(--color-primary-600);
  --color-primary-background-active: var(--color-primary-100);
  --color-primary-foreground-active: var(--color-primary-700);
  --color-primary-border-active: var(--color-primary-700);
  --color-primary-background-disabled: var(--color-neutral-50);
  --color-primary-foreground-disabled: var(--color-neutral-400);
  --color-primary-border-disabled: var(--color-neutral-200);

  --color-primary-subtle-background: transparent;
  --color-primary-subtle-foreground: var(--color-primary);
  --color-primary-subtle-border: transparent;
  --color-primary-subtle-background-hover: var(--color-primary-50);
  --color-primary-subtle-foreground-hover: var(--color-primary-600);
  --color-primary-subtle-border-hover: transparent;
  --color-primary-subtle-background-focus: var(--color-primary-50);
  --color-primary-subtle-foreground-focus: var(--color-primary-600);
  --color-primary-subtle-border-focus: transparent;
  --color-primary-subtle-background-active: var(--color-primary-100);
  --color-primary-subtle-foreground-active: var(--color-primary-700);
  --color-primary-subtle-border-active: transparent;
  --color-primary-subtle-background-disabled: transparent;
  --color-primary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-primary-subtle-border-disabled: transparent;

  /* Secondary Semantic Sets */
  --color-secondary-emphasised-background: var(--color-secondary);
  --color-secondary-emphasised-foreground: var(--color-white);
  --color-secondary-emphasised-border: transparent;
  --color-secondary-emphasised-background-hover: var(--color-secondary-600);
  --color-secondary-emphasised-foreground-hover: var(--color-white);
  --color-secondary-emphasised-border-hover: transparent;
  --color-secondary-emphasised-background-focus: var(--color-secondary-600);
  --color-secondary-emphasised-foreground-focus: var(--color-white);
  --color-secondary-emphasised-border-focus: transparent;
  --color-secondary-emphasised-background-active: var(--color-secondary-700);
  --color-secondary-emphasised-foreground-active: var(--color-white);
  --color-secondary-emphasised-border-active: transparent;
  --color-secondary-emphasised-background-disabled: var(--color-secondary-200);
  --color-secondary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-secondary-emphasised-border-disabled: transparent;

  --color-secondary-background: var(--color-white);
  --color-secondary-foreground: var(--color-secondary);
  --color-secondary-border: var(--color-secondary);
  --color-secondary-background-hover: var(--color-secondary-50);
  --color-secondary-foreground-hover: var(--color-secondary-600);
  --color-secondary-border-hover: var(--color-secondary-600);
  --color-secondary-background-focus: var(--color-secondary-50);
  --color-secondary-foreground-focus: var(--color-secondary-600);
  --color-secondary-border-focus: var(--color-secondary-600);
  --color-secondary-background-active: var(--color-secondary-100);
  --color-secondary-foreground-active: var(--color-secondary-700);
  --color-secondary-border-active: var(--color-secondary-700);
  --color-secondary-background-disabled: var(--color-neutral-50);
  --color-secondary-foreground-disabled: var(--color-neutral-400);
  --color-secondary-border-disabled: var(--color-neutral-200);

  --color-secondary-subtle-background: transparent;
  --color-secondary-subtle-foreground: var(--color-secondary);
  --color-secondary-subtle-border: transparent;
  --color-secondary-subtle-background-hover: var(--color-secondary-50);
  --color-secondary-subtle-foreground-hover: var(--color-secondary-600);
  --color-secondary-subtle-border-hover: transparent;
  --color-secondary-subtle-background-focus: var(--color-secondary-50);
  --color-secondary-subtle-foreground-focus: var(--color-secondary-600);
  --color-secondary-subtle-border-focus: transparent;
  --color-secondary-subtle-background-active: var(--color-secondary-100);
  --color-secondary-subtle-foreground-active: var(--color-secondary-700);
  --color-secondary-subtle-border-active: transparent;
  --color-secondary-subtle-background-disabled: transparent;
  --color-secondary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-secondary-subtle-border-disabled: transparent;

  /* Tertiary Semantic Sets */
  --color-tertiary-emphasised-background: var(--color-tertiary);
  --color-tertiary-emphasised-foreground: var(--color-white);
  --color-tertiary-emphasised-border: transparent;
  --color-tertiary-emphasised-background-hover: var(--color-tertiary-600);
  --color-tertiary-emphasised-foreground-hover: var(--color-white);
  --color-tertiary-emphasised-border-hover: transparent;
  --color-tertiary-emphasised-background-focus: var(--color-tertiary-600);
  --color-tertiary-emphasised-foreground-focus: var(--color-white);
  --color-tertiary-emphasised-border-focus: transparent;
  --color-tertiary-emphasised-background-active: var(--color-tertiary-700);
  --color-tertiary-emphasised-foreground-active: var(--color-white);
  --color-tertiary-emphasised-border-active: transparent;
  --color-tertiary-emphasised-background-disabled: var(--color-tertiary-200);
  --color-tertiary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-tertiary-emphasised-border-disabled: transparent;

  --color-tertiary-background: var(--color-white);
  --color-tertiary-foreground: var(--color-tertiary);
  --color-tertiary-border: var (--color-tertiary);
  --color-tertiary-background-hover: var(--color-tertiary-50);
  --color-tertiary-foreground-hover: var(--color-tertiary-600);
  --color-tertiary-border-hover: var(--color-tertiary-600);
  --color-tertiary-background-focus: var(--color-tertiary-50);
  --color-tertiary-foreground-focus: var(--color-tertiary-600);
  --color-tertiary-border-focus: var(--color-tertiary-600);
  --color-tertiary-background-active: var(--color-tertiary-100);
  --color-tertiary-foreground-active: var(--color-tertiary-700);
  --color-tertiary-border-active: var(--color-tertiary-700);
  --color-tertiary-background-disabled: var(--color-neutral-50);
  --color-tertiary-foreground-disabled: var(--color-neutral-400);
  --color-tertiary-border-disabled: var(--color-neutral-200);

  --color-tertiary-subtle-background: transparent;
  --color-tertiary-subtle-foreground: var(--color-tertiary);
  --color-tertiary-subtle-border: transparent;
  --color-tertiary-subtle-background-hover: var(--color-tertiary-50);
  --color-tertiary-subtle-foreground-hover: var(--color-tertiary-600);
  --color-tertiary-subtle-border-hover: transparent;
  --color-tertiary-subtle-background-focus: var(--color-tertiary-50);
  --color-tertiary-subtle-foreground-focus: var(--color-tertiary-600);
  --color-tertiary-subtle-border-focus: transparent;
  --color-tertiary-subtle-background-active: var(--color-tertiary-100);
  --color-tertiary-subtle-foreground-active: var(--color-tertiary-700);
  --color-tertiary-subtle-border-active: transparent;
  --color-tertiary-subtle-background-disabled: transparent;
  --color-tertiary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-tertiary-subtle-border-disabled: transparent;

  /* Site-header */
  --color-site-header-background: var(--color-white);
  --color-site-header-background-hover: var(--color-primary-hover);
  --color-site-header-background-focus: var(--color-primary-600);
  --color-site-header-background-active: var(--color-primary-700);
  --color-site-header-background-disabled: var(--color-neutral-50);

  --color-site-header-foreground: var(--color-primary);
  --color-site-header-foreground-hover: var(--color-primary-100);
  --color-site-header-foreground-focus: var(--color-neutral-100);
  --color-site-header-foreground-active: var(--color-neutral-50);
  --color-site-header-foreground-disabled: var(--color-neutral-400);

  --color-site-header-border: var(--color-primary);
  --color-site-header-border-hover: var(--color-primary-100);
  --color-site-header-border-focus: var(--color-neutral-100);
  --color-site-header-border-active: var(--color-neutral-50);
  --color-site-header-border-disabled: var(--color-neutral-200);

  /* Footer */
  --color-footer-background: var(--color-neutral-300);
  --color-footer-background-hover: var(--color-neutral-400);
  --color-footer-background-focus: var(--color-neutral-400);
  --color-footer-background-active: var(--color-neutral-500);
  --color-footer-background-disabled: var(--color-neutral-50);

  --color-footer-foreground: var(--color-black);
  --color-footer-foreground-hover: var(--color-neutral-800);
  --color-footer-foreground-focus: var(--color-neutral-800);
  --color-footer-foreground-active: var(--color-neutral-700);
  --color-footer-foreground-disabled: var(--color-neutral-400);

  --color-footer-border: var(--color-neutral-700);
  --color-footer-border-hover: var(--color-neutral-800);
  --color-footer-border-focus: var(--color-neutral-900);
  --color-footer-border-active: var(--color-neutral-1000);
  --color-footer-border-disabled: var(--color-neutral-200);

  /* Card */
  --color-card-background: var(--color-neutral-100);
  --color-card-background-hover: var(--color-neutral-200);
  --color-card-background-focus: var(--color-neutral-200);
  --color-card-background-active: var(--color-primary-300);
  --color-card-background-disabled: var(--color-neutral-50);

  --color-card-foreground: var(--color-neutral-900);
  --color-card-foreground-hover: var(--color-primary-700);
  --color-card-foreground-focus: var(--color-primary-700);
  --color-card-foreground-active: var(--color-primary-500);
  --color-card-foreground-disabled: var(--color-neutral-400);

  --color-card-border: var(--color-neutral-200);
  --color-card-border-hover: var(--color-neutral-300);
  --color-card-border-focus: var(--color-neutral-300);
  --color-card-border-active: var(--color-primary-500);
  --color-card-border-disabled: var(--color-neutral-200);

  /* Navigation */
  --color-navigation-background: var(--color-primary-900);
  --color-navigation-background-hover: var(--color-primary-100);
  --color-navigation-background-focus: var(--color-primary-100);
  --color-navigation-background-active: var(--color-primary-300);
  --color-navigation-background-disabled: var(--color-neutral-50);

  --color-navigation-foreground: var(--color-white);
  --color-navigation-foreground-hover: var(--color-neutral-50);
  --color-navigation-foreground-focus: var(--color-neutral-100);
  --color-navigation-foreground-active: var(--color-neutral-200);
  --color-navigation-foreground-disabled: var(--color-neutral-400);

  --color-navigation-border: var(--color-primary-600);
  --color-navigation-border-hover: var(--color-primary-700);
  --color-navigation-border-focus: var(--color-primary-800);
  --color-navigation-border-active: var(--color-primary-900);
  --color-navigation-border-disabled: var(--color-neutral-200);

  /* Control */
  --color-control-background: var(--color-white);
  --color-control-background-hover: var(--color-neutral-50);
  --color-control-background-focus: var(--color-neutral-100);
  --color-control-background-active: var(--color-neutral-200);
  --color-control-background-disabled: var(--color-neutral-50);

  --color-control-foreground: var(--color-neutral-900);
  --color-control-foreground-hover: var(--color-neutral-800);
  --color-control-foreground-focus: var(--color-neutral-700);
  --color-control-foreground-active: var(--color-neutral-600);
  --color-control-foreground-disabled: var(--color-neutral-400);

  --color-control-border: var(--color-neutral-300);
  --color-control-border-hover: var(--color-neutral-400);
  --color-control-border-focus: var(--color-neutral-500);
  --color-control-border-active: var(--color-neutral-600);
  --color-control-border-disabled: var(--color-neutral-200);

  /* Modal */
  --color-modal-background: var(--color-white);
  --color-modal-background-hover: var(--color-neutral-50);
  --color-modal-background-focus: var(--color-neutral-100);
  --color-modal-background-active: var(--color-neutral-200);
  --color-modal-background-disabled: var(--color-neutral-50);

  --color-modal-foreground: var(--color-neutral-900);
  --color-modal-foreground-hover: var(--color-neutral-800);
  --color-modal-foreground-focus: var(--color-neutral-700);
  --color-modal-foreground-active: var(--color-neutral-600);
  --color-modal-foreground-disabled: var(--color-neutral-400);

  --color-modal-border: var(--color-neutral-200);
  --color-modal-border-hover: var(--color-neutral-300);
  --color-modal-border-focus: var(--color-neutral-400);
  --color-modal-border-active: var(--color-neutral-500);
  --color-modal-border-disabled: var(--color-neutral-200);

  /* Container */
  --color-container-background: var(--color-neutral-50);
  --color-container-background-hover: var(--color-neutral-100);
  --color-container-background-focus: var(--color-neutral-200);
  --color-container-background-active: var(--color-neutral-300);
  --color-container-background-disabled: var(--color-neutral-50);

  --color-container-foreground: var(--color-neutral-900);
  --color-container-foreground-hover: var(--color-neutral-800);
  --color-container-foreground-focus: var(--color-neutral-700);
  --color-container-foreground-active: var(--color-neutral-600);
  --color-container-foreground-disabled: var(--color-neutral-400);

  --color-container-border: var(--color-neutral-200);
  --color-container-border-hover: var(--color-neutral-300);
  --color-container-border-focus: var(--color-neutral-400);
  --color-container-border-active: var(--color-neutral-500);
  --color-container-border-disabled: var(--color-neutral-200);

  /* Attention */
  --color-attention-background: var(--color-attention-light);
  --color-attention-background-hover: var(--color-attention-100);
  --color-attention-background-focus: var(--color-attention-200);
  --color-attention-background-active: var(--color-attention-300);
  --color-attention-background-disabled: var(--color-attention-50);

  --color-attention-foreground: var(--color-attention);
  --color-attention-foreground-hover: var(--color-attention-600);
  --color-attention-foreground-focus: var(--color-attention-700);
  --color-attention-foreground-active: var(--color-attention-800);
  --color-attention-foreground-disabled: var(--color-neutral-400);

  --color-attention-border: var(--color-attention-300);
  --color-attention-border-hover: var(--color-attention-400);
  --color-attention-border-focus: var(--color-attention-500);
  --color-attention-border-active: var(--color-attention-600);
  --color-attention-border-disabled: var(--color-attention-200);

  /* Success */
  --color-success-background: var(--color-success-light);
  --color-success-background-hover: var(--color-success-100);
  --color-success-background-focus: var(--color-success-200);
  --color-success-background-active: var(--color-success-300);
  --color-success-background-disabled: var(--color-success-50);

  --color-success-foreground: var (--color-success);
  --color-success-foreground-hover: var(--color-success-600);
  --color-success-foreground-focus: var(--color-success-700);
  --color-success-foreground-active: var(--color-success-800);
  --color-success-foreground-disabled: var(--color-neutral-400);

  --color-success-border: var(--color-success-300);
  --color-success-border-hover: var(--color-success-400);
  --color-success-border-focus: var(--color-success-500);
  --color-success-border-active: var(--color-success-600);
  --color-success-border-disabled: var(--color-success-200);

  /* Error */
  --color-error-background: var(--color-error-light);
  --color-error-background-hover: var(--color-error-100);
  --color-error-background-focus: var(--color-error-200);
  --color-error-background-active: var(--color-error-300);
  --color-error-background-disabled: var(--color-error-50);

  --color-error-foreground: var(--color-error);
  --color-error-foreground-hover: var(--color-error-600);
  --color-error-foreground-focus: var(--color-error-700);
  --color-error-foreground-active: var(--color-error-800);
  --color-error-foreground-disabled: var(--color-neutral-400);

  --color-error-border: var(--color-error-300);
  --color-error-border-hover: var(--color-error-400);
  --color-error-border-focus: var(--color-error-500);
  --color-error-border-active: var(--color-error-600);
  --color-error-border-disabled: var(--color-error-200);

  /* Inactive */
  --color-inactive-background: var(--color-neutral-100);
  --color-inactive-background-hover: var(--color-neutral-200);
  --color-inactive-background-focus: var(--color-neutral-300);
  --color-inactive-background-active: var(--color-neutral-400);
  --color-inactive-background-disabled: var(--color-neutral-50);

  --color-inactive-foreground: var(--color-neutral-500);
  --color-inactive-foreground-hover: var(--color-neutral-600);
  --color-inactive-foreground-focus: var(--color-neutral-700);
  --color-inactive-foreground-active: var(--color-neutral-800);
  --color-inactive-foreground-disabled: var(--color-neutral-400);

  --color-inactive-border: var(--color-neutral-300);
  --color-inactive-border-hover: var(--color-neutral-400);
  --color-inactive-border-focus: var(--color-neutral-500);
  --color-inactive-border-active: var(--color-neutral-600);
  --color-inactive-border-disabled: var(--color-neutral-200);
}

/* Semantic Colors */
@theme {
  /* Default */
  --color-background: var(--color-white);
  --color-background-hover: var(--color-neutral-50);
  --color-background-focus: var(--color-neutral-50);
  --color-background-active: var(--color-neutral-200);
  --color-background-disabled: var(--color-neutral-50);

  --color-foreground: var(--color-black);
  --color-foreground-hover: var(--color-neutral-700);
  --color-foreground-focus: var(--color-neutral-700);
  --color-foreground-active: var(--color-neutral-600);
  --color-foreground-disabled: var(--color-neutral-400);

  --color-border: var(--color-black);
  --color-border-hover: var(--color-neutral-300);
  --color-border-focus: var(--color-neutral-400);
  --color-border-active: var(--color-neutral-500);
  --color-border-disabled: var(--color-neutral-200);

  /* Muted */
  --color-muted-background: var(--color-neutral-200);
  --color-muted-background-hover: var(--color-neutral-300);
  --color-muted-background-focus: var(--color-neutral-300);
  --color-muted-background-active: var(--color-neutral-400);
  --color-muted-background-disabled: var(var(--color-neutral-50) ;)
    --color-muted-foreground: var(--color-neutral-700);
  --color-muted-foreground-hover: var(--color-neutral-700);
  --color-muted-foreground-focus: var(--color-neutral-700);
  --color-muted-foreground-active: var(--color-neutral-700);
  --color-muted-foreground-disabled: var(--color-neutral-400);

  --color-muted-border: transparent;
  --color-muted-border-hover: transparent;
  --color-muted-border-focus: transparent;
  --color-muted-border-active: transparent;
  --color-muted-border-disabled: transparent;

  /* Primary Semantic Sets */
  --color-primary-emphasised-background: var(--color-primary);
  --color-primary-emphasised-foreground: var(--color-white);
  --color-primary-emphasised-border: transparent;
  --color-primary-emphasised-background-hover: var(--color-primary-600);
  --color-primary-emphasised-foreground-hover: var(--color-white);
  --color-primary-emphasised-border-hover: transparent;
  --color-primary-emphasised-background-focus: var(--color-primary-600);
  --color-primary-emphasised-foreground-focus: var(--color-white);
  --color-primary-emphasised-border-focus: transparent;
  --color-primary-emphasised-background-active: var(--color-primary-700);
  --color-primary-emphasised-foreground-active: var(--color-white);
  --color-primary-emphasised-border-active: transparent;
  --color-primary-emphasised-background-disabled: var(--color-primary-200);
  --color-primary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-primary-emphasised-border-disabled: transparent;

  --color-primary-background: var(--color-white);
  --color-primary-foreground: var(--color-primary);
  --color-primary-border: var(--color-primary);
  --color-primary-background-hover: var(--color-primary-50);
  --color-primary-foreground-hover: var(--color-primary-600);
  --color-primary-border-hover: var(--color-primary-600);
  --color-primary-background-focus: var(--color-primary-50);
  --color-primary-foreground-focus: var(--color-primary-600);
  --color-primary-border-focus: var(--color-primary-600);
  --color-primary-background-active: var(--color-primary-100);
  --color-primary-foreground-active: var(--color-primary-700);
  --color-primary-border-active: var(--color-primary-700);
  --color-primary-background-disabled: var(--color-neutral-50);
  --color-primary-foreground-disabled: var(--color-neutral-400);
  --color-primary-border-disabled: var(--color-neutral-200);

  --color-primary-subtle-background: transparent;
  --color-primary-subtle-foreground: var(--color-primary);
  --color-primary-subtle-border: transparent;
  --color-primary-subtle-background-hover: var(--color-primary-50);
  --color-primary-subtle-foreground-hover: var(--color-primary-600);
  --color-primary-subtle-border-hover: transparent;
  --color-primary-subtle-background-focus: var(--color-primary-50);
  --color-primary-subtle-foreground-focus: var(--color-primary-600);
  --color-primary-subtle-border-focus: transparent;
  --color-primary-subtle-background-active: var(--color-primary-100);
  --color-primary-subtle-foreground-active: var(--color-primary-700);
  --color-primary-subtle-border-active: transparent;
  --color-primary-subtle-background-disabled: transparent;
  --color-primary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-primary-subtle-border-disabled: transparent;

  /* Secondary Semantic Sets */
  --color-secondary-emphasised-background: var(--color-secondary);
  --color-secondary-emphasised-foreground: var(--color-white);
  --color-secondary-emphasised-border: transparent;
  --color-secondary-emphasised-background-hover: var(--color-secondary-600);
  --color-secondary-emphasised-foreground-hover: var(--color-white);
  --color-secondary-emphasised-border-hover: transparent;
  --color-secondary-emphasised-background-focus: var(--color-secondary-600);
  --color-secondary-emphasised-foreground-focus: var(--color-white);
  --color-secondary-emphasised-border-focus: transparent;
  --color-secondary-emphasised-background-active: var(--color-secondary-700);
  --color-secondary-emphasised-foreground-active: var(--color-white);
  --color-secondary-emphasised-border-active: transparent;
  --color-secondary-emphasised-background-disabled: var(--color-secondary-200);
  --color-secondary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-secondary-emphasised-border-disabled: transparent;

  --color-secondary-background: var(--color-white);
  --color-secondary-foreground: var(--color-secondary);
  --color-secondary-border: var(--color-secondary);
  --color-secondary-background-hover: var(--color-secondary-50);
  --color-secondary-foreground-hover: var(--color-secondary-600);
  --color-secondary-border-hover: var(--color-secondary-600);
  --color-secondary-background-focus: var(--color-secondary-50);
  --color-secondary-foreground-focus: var(--color-secondary-600);
  --color-secondary-border-focus: var(--color-secondary-600);
  --color-secondary-background-active: var(--color-secondary-100);
  --color-secondary-foreground-active: var(--color-secondary-700);
  --color-secondary-border-active: var(--color-secondary-700);
  --color-secondary-background-disabled: var(--color-neutral-50);
  --color-secondary-foreground-disabled: var(--color-neutral-400);
  --color-secondary-border-disabled: var(--color-neutral-200);

  --color-secondary-subtle-background: transparent;
  --color-secondary-subtle-foreground: var(--color-secondary);
  --color-secondary-subtle-border: transparent;
  --color-secondary-subtle-background-hover: var(--color-secondary-50);
  --color-secondary-subtle-foreground-hover: var(--color-secondary-600);
  --color-secondary-subtle-border-hover: transparent;
  --color-secondary-subtle-background-focus: var(--color-secondary-50);
  --color-secondary-subtle-foreground-focus: var(--color-secondary-600);
  --color-secondary-subtle-border-focus: transparent;
  --color-secondary-subtle-background-active: var(--color-secondary-100);
  --color-secondary-subtle-foreground-active: var(--color-secondary-700);
  --color-secondary-subtle-border-active: transparent;
  --color-secondary-subtle-background-disabled: transparent;
  --color-secondary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-secondary-subtle-border-disabled: transparent;

  /* Tertiary Semantic Sets */
  --color-tertiary-emphasised-background: var(--color-tertiary);
  --color-tertiary-emphasised-foreground: var(--color-white);
  --color-tertiary-emphasised-border: transparent;
  --color-tertiary-emphasised-background-hover: var(--color-tertiary-600);
  --color-tertiary-emphasised-foreground-hover: var(--color-white);
  --color-tertiary-emphasised-border-hover: transparent;
  --color-tertiary-emphasised-background-focus: var(--color-tertiary-600);
  --color-tertiary-emphasised-foreground-focus: var(--color-white);
  --color-tertiary-emphasised-border-focus: transparent;
  --color-tertiary-emphasised-background-active: var(--color-tertiary-700);
  --color-tertiary-emphasised-foreground-active: var(--color-white);
  --color-tertiary-emphasised-border-active: transparent;
  --color-tertiary-emphasised-background-disabled: var(--color-tertiary-200);
  --color-tertiary-emphasised-foreground-disabled: var(--color-neutral-400);
  --color-tertiary-emphasised-border-disabled: transparent;

  --color-tertiary-background: var(--color-white);
  --color-tertiary-foreground: var(--color-tertiary);
  --color-tertiary-border: var (--color-tertiary);
  --color-tertiary-background-hover: var(--color-tertiary-50);
  --color-tertiary-foreground-hover: var(--color-tertiary-600);
  --color-tertiary-border-hover: var(--color-tertiary-600);
  --color-tertiary-background-focus: var(--color-tertiary-50);
  --color-tertiary-foreground-focus: var(--color-tertiary-600);
  --color-tertiary-border-focus: var(--color-tertiary-600);
  --color-tertiary-background-active: var(--color-tertiary-100);
  --color-tertiary-foreground-active: var(--color-tertiary-700);
  --color-tertiary-border-active: var(--color-tertiary-700);
  --color-tertiary-background-disabled: var(--color-neutral-50);
  --color-tertiary-foreground-disabled: var(--color-neutral-400);
  --color-tertiary-border-disabled: var(--color-neutral-200);

  --color-tertiary-subtle-background: transparent;
  --color-tertiary-subtle-foreground: var(--color-tertiary);
  --color-tertiary-subtle-border: transparent;
  --color-tertiary-subtle-background-hover: var(--color-tertiary-50);
  --color-tertiary-subtle-foreground-hover: var(--color-tertiary-600);
  --color-tertiary-subtle-border-hover: transparent;
  --color-tertiary-subtle-background-focus: var(--color-tertiary-50);
  --color-tertiary-subtle-foreground-focus: var(--color-tertiary-600);
  --color-tertiary-subtle-border-focus: transparent;
  --color-tertiary-subtle-background-active: var(--color-tertiary-100);
  --color-tertiary-subtle-foreground-active: var(--color-tertiary-700);
  --color-tertiary-subtle-border-active: transparent;
  --color-tertiary-subtle-background-disabled: transparent;
  --color-tertiary-subtle-foreground-disabled: var(--color-neutral-300);
  --color-tertiary-subtle-border-disabled: transparent;

  /* Site-header */
  --color-site-header-background: var(--color-white);
  --color-site-header-background-hover: var(--color-primary-hover);
  --color-site-header-background-focus: var(--color-primary-600);
  --color-site-header-background-active: var(--color-primary-700);
  --color-site-header-background-disabled: var(--color-neutral-50);

  --color-site-header-foreground: var(--color-primary);
  --color-site-header-foreground-hover: var(--color-primary-100);
  --color-site-header-foreground-focus: var(--color-neutral-100);
  --color-site-header-foreground-active: var(--color-neutral-50);
  --color-site-header-foreground-disabled: var(--color-neutral-400);

  --color-site-header-border: var(--color-primary);
  --color-site-header-border-hover: var(--color-primary-100);
  --color-site-header-border-focus: var(--color-neutral-100);
  --color-site-header-border-active: var(--color-neutral-50);
  --color-site-header-border-disabled: var(--color-neutral-200);

  /* Footer */
  --color-footer-background: var(--color-neutral-300);
  --color-footer-background-hover: var(--color-neutral-400);
  --color-footer-background-focus: var(--color-neutral-400);
  --color-footer-background-active: var(--color-neutral-500);
  --color-footer-background-disabled: var(--color-neutral-50);

  --color-footer-foreground: var(--color-black);
  --color-footer-foreground-hover: var(--color-neutral-800);
  --color-footer-foreground-focus: var(--color-neutral-800);
  --color-footer-foreground-active: var(--color-neutral-700);
  --color-footer-foreground-disabled: var(--color-neutral-400);

  --color-footer-border: var(--color-neutral-700);
  --color-footer-border-hover: var(--color-neutral-800);
  --color-footer-border-focus: var(--color-neutral-900);
  --color-footer-border-active: var(--color-neutral-1000);
  --color-footer-border-disabled: var(--color-neutral-200);

  /* Card */
  --color-card-background: var(--color-neutral-100);
  --color-card-background-hover: var(--color-neutral-200);
  --color-card-background-focus: var(--color-neutral-200);
  --color-card-background-active: var(--color-primary-300);
  --color-card-background-disabled: var(--color-neutral-50);

  --color-card-foreground: var(--color-neutral-900);
  --color-card-foreground-hover: var(--color-primary-700);
  --color-card-foreground-focus: var(--color-primary-700);
  --color-card-foreground-active: var(--color-primary-500);
  --color-card-foreground-disabled: var(--color-neutral-400);

  --color-card-border: var(--color-neutral-200);
  --color-card-border-hover: var(--color-neutral-300);
  --color-card-border-focus: var(--color-neutral-300);
  --color-card-border-active: var(--color-primary-500);
  --color-card-border-disabled: var(--color-neutral-200);

  /* Navigation */
  --color-navigation-background: var(--color-primary-900);
  --color-navigation-background-hover: var(--color-primary-100);
  --color-navigation-background-focus: var(--color-primary-100);
  --color-navigation-background-active: var(--color-primary-300);
  --color-navigation-background-disabled: var(--color-neutral-50);

  --color-navigation-foreground: var(--color-white);
  --color-navigation-foreground-hover: var(--color-neutral-50);
  --color-navigation-foreground-focus: var(--color-neutral-100);
  --color-navigation-foreground-active: var(--color-neutral-200);
  --color-navigation-foreground-disabled: var(--color-neutral-400);

  --color-navigation-border: var(--color-primary-600);
  --color-navigation-border-hover: var(--color-primary-700);
  --color-navigation-border-focus: var(--color-primary-800);
  --color-navigation-border-active: var(--color-primary-900);
  --color-navigation-border-disabled: var(--color-neutral-200);

  /* Control */
  --color-control-background: var(--color-white);
  --color-control-background-hover: var(--color-neutral-50);
  --color-control-background-focus: var(--color-neutral-100);
  --color-control-background-active: var(--color-neutral-200);
  --color-control-background-disabled: var(--color-neutral-50);

  --color-control-foreground: var(--color-neutral-900);
  --color-control-foreground-hover: var(--color-neutral-800);
  --color-control-foreground-focus: var(--color-neutral-700);
  --color-control-foreground-active: var(--color-neutral-600);
  --color-control-foreground-disabled: var(--color-neutral-400);

  --color-control-border: var(--color-neutral-300);
  --color-control-border-hover: var(--color-neutral-400);
  --color-control-border-focus: var(--color-neutral-500);
  --color-control-border-active: var(--color-neutral-600);
  --color-control-border-disabled: var(--color-neutral-200);

  /* Modal */
  --color-modal-background: var(--color-white);
  --color-modal-background-hover: var(--color-neutral-50);
  --color-modal-background-focus: var(--color-neutral-100);
  --color-modal-background-active: var(--color-neutral-200);
  --color-modal-background-disabled: var(--color-neutral-50);

  --color-modal-foreground: var(--color-neutral-900);
  --color-modal-foreground-hover: var(--color-neutral-800);
  --color-modal-foreground-focus: var(--color-neutral-700);
  --color-modal-foreground-active: var(--color-neutral-600);
  --color-modal-foreground-disabled: var(--color-neutral-400);

  --color-modal-border: var(--color-neutral-200);
  --color-modal-border-hover: var(--color-neutral-300);
  --color-modal-border-focus: var(--color-neutral-400);
  --color-modal-border-active: var(--color-neutral-500);
  --color-modal-border-disabled: var(--color-neutral-200);

  /* Container */
  --color-container-background: var(--color-neutral-50);
  --color-container-background-hover: var(--color-neutral-100);
  --color-container-background-focus: var(--color-neutral-200);
  --color-container-background-active: var(--color-neutral-300);
  --color-container-background-disabled: var(--color-neutral-50);

  --color-container-foreground: var(--color-neutral-900);
  --color-container-foreground-hover: var(--color-neutral-800);
  --color-container-foreground-focus: var(--color-neutral-700);
  --color-container-foreground-active: var(--color-neutral-600);
  --color-container-foreground-disabled: var(--color-neutral-400);

  --color-container-border: var(--color-neutral-200);
  --color-container-border-hover: var(--color-neutral-300);
  --color-container-border-focus: var(--color-neutral-400);
  --color-container-border-active: var(--color-neutral-500);
  --color-container-border-disabled: var(--color-neutral-200);

  /* Attention */
  --color-attention-background: var(--color-attention-light);
  --color-attention-background-hover: var(--color-attention-100);
  --color-attention-background-focus: var(--color-attention-200);
  --color-attention-background-active: var(--color-attention-300);
  --color-attention-background-disabled: var(--color-attention-50);

  --color-attention-foreground: var(--color-attention);
  --color-attention-foreground-hover: var(--color-attention-600);
  --color-attention-foreground-focus: var(--color-attention-700);
  --color-attention-foreground-active: var(--color-attention-800);
  --color-attention-foreground-disabled: var(--color-neutral-400);

  --color-attention-border: var(--color-attention-300);
  --color-attention-border-hover: var(--color-attention-400);
  --color-attention-border-focus: var(--color-attention-500);
  --color-attention-border-active: var(--color-attention-600);
  --color-attention-border-disabled: var(--color-attention-200);

  /* Success */
  --color-success-background: var(--color-success-light);
  --color-success-background-hover: var(--color-success-100);
  --color-success-background-focus: var(--color-success-200);
  --color-success-background-active: var(--color-success-300);
  --color-success-background-disabled: var(--color-success-50);

  --color-success-foreground: var (--color-success);
  --color-success-foreground-hover: var(--color-success-600);
  --color-success-foreground-focus: var(--color-success-700);
  --color-success-foreground-active: var(--color-success-800);
  --color-success-foreground-disabled: var(--color-neutral-400);

  --color-success-border: var(--color-success-300);
  --color-success-border-hover: var(--color-success-400);
  --color-success-border-focus: var(--color-success-500);
  --color-success-border-active: var(--color-success-600);
  --color-success-border-disabled: var(--color-success-200);

  /* Error */
  --color-error-background: var(--color-error-light);
  --color-error-background-hover: var(--color-error-100);
  --color-error-background-focus: var(--color-error-200);
  --color-error-background-active: var(--color-error-300);
  --color-error-background-disabled: var(--color-error-50);

  --color-error-foreground: var(--color-error);
  --color-error-foreground-hover: var(--color-error-600);
  --color-error-foreground-focus: var(--color-error-700);
  --color-error-foreground-active: var(--color-error-800);
  --color-error-foreground-disabled: var(--color-neutral-400);

  --color-error-border: var(--color-error-300);
  --color-error-border-hover: var(--color-error-400);
  --color-error-border-focus: var(--color-error-500);
  --color-error-border-active: var(--color-error-600);
  --color-error-border-disabled: var(--color-error-200);

  /* Inactive */
  --color-inactive-background: var(--color-neutral-100);
  --color-inactive-background-hover: var(--color-neutral-200);
  --color-inactive-background-focus: var(--color-neutral-300);
  --color-inactive-background-active: var(--color-neutral-400);
  --color-inactive-background-disabled: var(--color-neutral-50);

  --color-inactive-foreground: var(--color-neutral-500);
  --color-inactive-foreground-hover: var(--color-neutral-600);
  --color-inactive-foreground-focus: var(--color-neutral-700);
  --color-inactive-foreground-active: var(--color-neutral-800);
  --color-inactive-foreground-disabled: var(--color-neutral-400);

  --color-inactive-border: var(--color-neutral-300);
  --color-inactive-border-hover: var(--color-neutral-400);
  --color-inactive-border-focus: var(--color-neutral-500);
  --color-inactive-border-active: var(--color-neutral-600);
  --color-inactive-border-disabled: var(--color-neutral-200);
}

Radius

By default, the site radius is applied to all rounded corners. This can be overridden using custom CSS or tailwind at a per use case level, but it is advised to use the site radius provided to maintain consistency and allow for easy updates of your theme. If using other radii, it is advised to use a css calculation to calculate the radius from the site radius, to maintain consistency if the site radius is updated.

Preview Code

Copy

--radius-site

1rem

@theme {
  --radius-site: 1rem;
}

@theme {
  --radius-site: 1rem;
}

Shadow

Like with the radius, the use of a singular site shadow is promoted in order to maintain consistency and allow for easy updates of your theme. As with the radius, this can be overridden at a per use case level, but it is advised to use the site shadow provided.

Preview Code

Copy

--shadow-site

@theme {
  --shadow-site: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

@theme {
  --shadow-site: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

Animations

Primitive animation speeds are provided using CSS variables to maintain consistency across different components. These variables control the duration of various animations throughout your project. As with other values, these can be overridden according to your sites preference.

Tip

Animations should relate to the scale of the moving object, such that large objects should move slower than small objects.

Preview Code

Copy

--duration-speed-none

0s

--duration-speed-quick

0.1s

--duration-speed-default

0.2s

--duration-speed-slow

0.3s

Play Animations

@theme {
  --duration-speed-none: 0s;
  --duration-speed-quick: 0.1s;
  --duration-speed-default: 0.2s;
  --duration-speed-slow: 0.3s;
}

@theme {
  --duration-speed-none: 0s;
  --duration-speed-quick: 0.1s;
  --duration-speed-default: 0.2s;
  --duration-speed-slow: 0.3s;
}

Typography

Below are the primitive typography styles that form the foundation of our text elements.

In order to update the appearance of your typography, the primitive typography variables below can be updated.

Tip

Classes have been provided, aligned with these variable names (for example, text-body will responsively apply the body text size and line height).

Preview Code

Copy

Desktop Font Sizes

--text-desktop-2xl

--line-height-desktop-desktop-2xl

Altitude

45px

56px

--text-desktop-xl

--line-height-desktop-desktop-xl

Altitude

37px

48px

--text-desktop-2lg

--line-height-desktop-desktop-2lg

Altitude

30px

40px

--text-desktop-lg

--line-height-desktop-desktop-lg

Altitude

24px

32px

--text-desktop-md

--line-height-desktop-desktop-md

Altitude

20px

28px

--text-desktop-body

--line-height-desktop-desktop-body

Altitude

16px

24px

--text-desktop-sm

--line-height-desktop-desktop-sm

Altitude

14px

20px

--text-desktop-xs

--line-height-desktop-desktop-xs

Altitude

13px

20px

Mobile Font Sizes

--text-mobile-2xl

--line-height-mobile-mobile-2xl

Altitude

32px

40px

--text-mobile-xl

--line-height-mobile-mobile-xl

Altitude

28px

36px

--text-mobile-2lg

--line-height-mobile-mobile-2lg

Altitude

24px

32px

--text-mobile-lg

--line-height-mobile-mobile-lg

Altitude

21px

28px

--text-mobile-md

--line-height-mobile-mobile-md

Altitude

18px

24px

--text-mobile-body

--line-height-mobile-mobile-body

Altitude

16px

24px

--text-mobile-sm

--line-height-mobile-mobile-sm

Altitude

14px

20px

--text-mobile-xs

--line-height-mobile-mobile-xs

Altitude

13px

20px

Font Weights

--font-thin

Altitude

100

--font-extra-light

Altitude

200

--font-light

Altitude

300

--font-normal

Altitude

400

--font-medium

Altitude

500

--font-semi-bold

Altitude

600

--font-bold

Altitude

700

--font-extra-bold

Altitude

800

--font-black

Altitude

900

@theme {
  /* Desktop Sizes */
  --text-desktop-2xl: 45px;
  --line-height-desktop-2xl: 56px;
  --text-desktop-xl: 37px;
  --line-height-desktop-xl: 48px;
  --text-desktop-2lg: 30px;
  --line-height-desktop-2lg: 40px;
  --text-desktop-lg: 24px;
  --line-height-desktop-lg: 32px;
  --text-desktop-md: 20px;
  --line-height-desktop-md: 28px;
  --text-desktop-body: 16px;
  --line-height-desktop-body: 24px;
  --text-desktop-sm: 14px;
  --line-height-desktop-sm: 20px;
  --text-desktop-xs: 13px;
  --line-height-desktop-xs: 20px;

  /* Mobile Font Sizes */
  --text-mobile-2xl: 32px;
  --line-height-mobile-2xl: 40px;
  --text-mobile-xl: 28px;
  --line-height-mobile-xl: 36px;
  --text-mobile-2lg: 24px;
  --line-height-mobile-2lg: 32px;
  --text-mobile-lg: 21px;
  --line-height-mobile-lg: 28px;
  --text-mobile-md: 18px;
  --line-height-mobile-md: 24px;
  --text-mobile-body: 16px;
  --line-height-mobile-body: 24px;
  --text-mobile-sm: 14px;
  --line-height-mobile-sm: 20px;
  --text-mobile-xs: 13px;
  --line-height-mobile-xs: 20px;

  /* Font Weights */
  --font-thin: 100;
  --font-extra-light: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-black: 900;
}

@theme {
  /* Desktop Sizes */
  --text-desktop-2xl: 45px;
  --line-height-desktop-2xl: 56px;
  --text-desktop-xl: 37px;
  --line-height-desktop-xl: 48px;
  --text-desktop-2lg: 30px;
  --line-height-desktop-2lg: 40px;
  --text-desktop-lg: 24px;
  --line-height-desktop-lg: 32px;
  --text-desktop-md: 20px;
  --line-height-desktop-md: 28px;
  --text-desktop-body: 16px;
  --line-height-desktop-body: 24px;
  --text-desktop-sm: 14px;
  --line-height-desktop-sm: 20px;
  --text-desktop-xs: 13px;
  --line-height-desktop-xs: 20px;

  /* Mobile Font Sizes */
  --text-mobile-2xl: 32px;
  --line-height-mobile-2xl: 40px;
  --text-mobile-xl: 28px;
  --line-height-mobile-xl: 36px;
  --text-mobile-2lg: 24px;
  --line-height-mobile-2lg: 32px;
  --text-mobile-lg: 21px;
  --line-height-mobile-lg: 28px;
  --text-mobile-md: 18px;
  --line-height-mobile-md: 24px;
  --text-mobile-body: 16px;
  --line-height-mobile-body: 24px;
  --text-mobile-sm: 14px;
  --line-height-mobile-sm: 20px;
  --text-mobile-xs: 13px;
  --line-height-mobile-xs: 20px;

  /* Font Weights */
  --font-thin: 100;
  --font-extra-light: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-black: 900;
}