Our design system includes colour functions that you can use in your project. These functions are written in SCSS and output CSS variables that correspond to our semantic colours.
Semantic colours help us focus on what each colour represents, rather than its specific value. This approach allows us to apply design decisions consistently and makes it easier to adjust themes based on colour usage.
Using design system colours
We provide the ds-color function to map semantic colours to CSS variables.
The ds-color($type, $semantic-name) function accepts two parameters:
$type : The category of the colour, such as bg (background), fg (foreground), border , or focus .
$semantic-name : The purpose or meaning of the colour, such as danger , strong , or muted .
Example SCSS Code
.c-alert {
background-color: ds-color("bg", "status-danger");
}
Set the background colour of the alert component to the background colour called "status-danger".
Example CSS Output
.c-alert {
background-color: var(--ds-color-bg-status-danger);
}
The function has returned a semantic CSS variable that can represent different colours based on the theme and mode.
Colour values
Below are the tables of token values for each category of colours:
Foreground colours (fg )
Foreground colours are used primarily for text, and will typically be set in CSS as a color property.
default
Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.
muted
Muted secondary text color. Used for e.g. introduction paragraphs and texts with less emphasis than the default text color.
subtle
⚠ Deprecated! Subtle text color. Currently only accessible for large text (24px and above).
disabled
For disabled text and component link states.
dark
Default text color that won't change in dark mode.
light
White text color that won't change in dark mode.
link
Default link text color. Used for all paragraph level links in an user interface.
link-hover
Hover color for default text links.
link-on-color
Link text color on a colored surface.
link-on-color-hover
Link text color on a colored surface.
interactive
Highlighted text color for e.g. various button states.
on-color
Text on interactive colors or on button colors.
on-color-muted
Muted text on interactive colors or on button colors.
inverse
Text color to use on inverted backgrounds e.g. tooltip text.
inverse-link
For links used on top of bg.inverse.
inverse-link-hover
For links used on top of bg.inverse.
placeholder
For form input placeholder texts.
brand
Default brand text. Use for brand specific icons and large text.
success
Default text color for success messages.
attention
Default text color for attention messages.
danger
Default text color for error messages.
Background colours (bg )
Background colours are used behind text, or to fill surfaces, they will typically be used in background and background-color properties in CSS.
body
Default background color. Should be used as the primary page/canvas background.
default
Default surface color. Use this for e.g. cards and optionally combine with elevation shadow "surface".
body-alt
Secondary page background color. Should be used as the primary page/canvas background.
brand
Background color to signify the Coloplast brand.
brand-subtle
Surface color to signify the Coloplast brand.
brand-muted
Surface color to signify the Coloplast brand.
brand-strong
Surface color to signify the Coloplast brand.
brand-stronger
Surface color to signify the Coloplast brand.
neutral
Muted neutral background color. Use this when you need to separate an element from the default background color, e.g. steps items.
neutral-subtle
Subtle neutral background color for sections or larger component surfaces to separate an element from the default background.
neutral-strong
Use as contrast background on top of default or subtle surfaces e.g. steps.
accent
Muted secondary neutral background color. Use this when you need to separate an element from the default background color.
accent-subtle
Subtle secondary neutral background color. Use this when you need to separate an element from the default background color.
accent-strong
Strong secondary neutral background color. Use this when you need to separate an element from the default background color.
dark
Dark contrasty background that remains dark across themes
dark-muted
Dark less contrasty background that remains dark across themes
inverse
Default inverse surface color for high contrast surfaces e.g. tooltips.
backdrop
Default overlay color to distinguish modal and popout layers from underlaying content.
interactive-subtle
For highlighting active states in e.g. navigation components.
interactive-muted
Coming...
interactive
Used for selected states in checkboxes and radio-buttons, active tabs etc.
elevation-raised
Raised surface color. Use this with elevation shadow "surface-raised".
elevation-overlay
Overlay surface color. Use this for e.g. dropdowns and modals combined with elevation shadow "surface-overlay".
danger
Background color to signify critical, negative or error states.
status-neutral
Status background color to indicate general information, can be used behind text.
status-neutral-alt
Alternative status background color to indicate general information, can be used behind text.
status-highlight
Status background color to indicate important information that don't require immidiate action. Can be used behind text.
status-success
Background color to indicate success, can be used behind text.
status-attention
Status background to indicate states that requires the user's attention. Can be used behind text.
status-danger
Background color to indicate errors. Can be used behind text.
decorative-1-subtle
For use as a decorative background color for page sections. Based on the grey palette.
decorative-1-muted
For use as a decorative background color for page sections.
decorative-2-subtle
For use as a decorative background color for page sections. Based on the sand palette.
decorative-2-muted
For use as a decorative background color for page sections. Based on the sand palette.
decorative-3-subtle
For use as a decorative background color for page sections. Based on the turquoise palette.
decorative-3-muted
For use as a decorative background color for page sections. Based on the turquoise palette.
field
Background color for form input fields.
hover
Default hover color used on default backgrounds surfaces.
toggle-off
For switch component backgrounds.
block-default
For block backgrounds only.
block-neutral
For block backgrounds only.
block-theme
For block backgrounds only.
Border colours (border )
Border colours are intended to be used in the border or border-color property in CSS.
For other border options, read the border documentation .
default
Used to outline container, cards or as separators.
muted
Muted border color for sitations where a hint of a border is enough. Not accessible.
strong
Strong border used to for specific UI elements with contrast requirements like e.g. Input, Checkbox or RadioButton.
interactive
Selected and active borders.
success
Use as borders on success components such as text inputs.
danger
Default error border color. Use to highlight validation errors or critical situtions in flows e.g. a mandatory input field left empty.
Focus colours (focus )
Focus colours are used to highlight the currently focused interactive element, they are typically set on the outline property in CSS.
default
Default focus color. Use to indicate tab focus on interactive elements e.g. form fields and buttons.
danger
Use to indicate error states in interactive elements on tab focus e.g. form fields and buttons.
success
Use to indicate successful states in interactive elements on tab focus e.g. form fields and buttons.