Color Roles & Application
Colour is more than aesthetics, it communicates meaning, establishes hierarchy, and supports readability. But relying on colour alone can create accessibility barriers, especially for users with colour blindness or low vision. A structured color system helps maintain clarity and ensures that colors are applied consistently across UI elements. Typical color roles include:
Brand
The core brand color is Purple 800 ds-color-purple-800 used for key actions and highlights throughout the user interface experience.
--ds-color-brand: var(--ds-color-purple-800);
Feedback
Colors used for system messages like success, warning, and error states. Here you can see a representation of all status color tokens applied which use the 500 token of each color. E.g. A success status token ds-color-status-success would reference ds-color-green-500 on dark mode.
--ds-color-status-attention: var(--ds-color-brown-600);
--ds-color-status-attention-subtle: var(--ds-color-yellow-100);
--ds-color-status-purple-1: var(--ds-color-purple-100);
--ds-color-status-danger: var(--ds-color-red-700);
--ds-color-status-danger-subtle: var(--ds-color-red-100);
--ds-color-status-info: var(--ds-color-blue-700);
--ds-color-status-info-subtle: var(--ds-color-blue-100);
--ds-color-status-success: var(--ds-color-green-800);
--ds-color-status-success-subtle: var(--ds-color-green-100);
--ds-color-status-attention: var(--ds-color-brown-500);
--ds-color-status-attention-subtle: var(--ds-color-brown-900);
--ds-color-status-purple-1: var(--ds-color-purple-950);
--ds-color-status-danger: var(--ds-color-red-500);
--ds-color-status-danger-subtle: var(--ds-color-red-950);
--ds-color-status-info: var(--ds-color-blue-500);
--ds-color-status-info-subtle: var(--ds-color-blue-950);
--ds-color-status-success: var(--ds-color-green-500);
--ds-color-status-success-subtle: var(--ds-color-green-950);
Text & Surfaces
ds-color-foreground-default is optimized for light/dark mode, with additional semantic tokens for more extensive use case needs (subtext, additional text etc). There are additional tokens for user interface surfaces, including ds-color-surface-base, ds-color-surface-base-soft and ds-color-surface-subdued
--ds-color-surface-base: #ffffff;
--ds-color-surface-base-soft: var(--ds-color-neutral-50);
--ds-color-surface-subdued: var(--ds-color-neutral-300);
--ds-color-foreground-default: var(--ds-color-neutral-900);
--ds-color-foreground-inverted: var(--ds-color-neutral-100);
--ds-color-foreground-light: #ffffff;
--ds-color-foreground-opaque: #00000080;
--ds-color-foreground-primary: var(--ds-color-brand);
--ds-color-foreground-soft: var(--ds-color-neutral-600);
--ds-color-foreground-softest: var(--ds-color-neutral-400);
--ds-color-surface-base: var(--ds-color-neutral-800);
--ds-color-surface-base-soft: var(--ds-color-neutral-900);
--ds-color-surface-subdued: var(--ds-color-neutral-950);
--ds-color-foreground-default: var(--ds-color-neutral-100);
--ds-color-foreground-inverted: var(--ds-color-neutral-900);
--ds-color-foreground-light: #ffffff;
--ds-color-foreground-opaque: #ffffff99;
--ds-color-foreground-primary: var(--ds-color-brand);
--ds-color-foreground-soft: var(--ds-color-neutral-400);
--ds-color-foreground-softest: var(--ds-color-neutral-500);
}
Clear color roles create a system that is scalable, accessible, and easy to maintain, ensuring consistency across products and touchpoints. A well-balanced palette enhances both usability and aesthetics, making interfaces engaging while remaining functional for all users.
