Skip to content
MENU

Soracom

Design System

Color variables

For developing new components or extending SDS components, colors are available as css variables.

Overview 

For developing new components or components outside SDS, a set of global css vars are available.

To apply color to existing SDS components, use the existing color support documented on each component page.

Global color css vars automatically support dark-mode and change depending on the browsers dark-mode setting. Use the light-mode/dark-mode toggle above right to see how specific colors adjust.

Example use of global vars in css
.custom-element {
  color: var(--color-default);
  border: 1px solid var(--color-background-shade);
}

.custom-element.error {
  color: var(--color-alert);
  border: 1px solid var(--color-alert);
}

Semantic global vars 

These globals represent the intended use/application of the colors (i.e. make this text the ‘default’ color instead of make this text ‘ink’ color) and should be used in preference to setting a specific global var.

Default (Text) 

The primary text (or foreground) color is var(--color-default) - this should be used for all text by default, and may be used for borders/outlines as required. Always ensure text contrast is readable.

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-default)

AaBbCc

var(--color-default-mid)

AaBbCc

var(--color-default-light)

AaBbCc

var(--color-default-lighter)

AaBbCc

var(--color-default-lightest)

Backgrounds 

The primary background color is var(--color-background) - this should be used for background, and may be used for borders/outlines as required. Always ensure text contrast is readable.

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-background)

AaBbCc

var(--color-background-shade)

AaBbCc

var(--color-background-dark)

AaBbCc

var(--color-background-darker)

AaBbCc

var(--color-background-darkest)

Visual states 

The 4x visual states - Alert, Warning, Success, Info are also available as global css vars eg. var(--color-alert).

Applied to text 

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-alert)

AaBbCc

var(--color-warning)

AaBbCc

var(--color-success)

AaBbCc

var(--color-info)

Applied to backgrounds 

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-alert)

AaBbCc

var(--color-warning)

AaBbCc

var(--color-success)

AaBbCc

var(--color-info)
Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-alert)

AaBbCc

var(--color-warning)

AaBbCc

var(--color-success)

AaBbCc

var(--color-info)

Highlight 

The highlight color is the accent color (celeste) used through the console: var(--color-highlight)

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-highlight)

AaBbCc

var(--color-highlight-mid)

AaBbCc

var(--color-highlight-light)

AaBbCc

var(--color-highlight-lighter)

AaBbCc

var(--color-highlight-lightest)

Link color can be set with the global css var: var(--color-link)

Example CSS Var WCAG AA Contrast

AaBbCc

var(--color-link)

Non SDS modals background can be set with the global css var var(--color-modal)

Specific global vars 

Colors 

Non SDS elements can be styled using specific global css named color vars shown in the Color swatches. These colors should only be used if other semantic css global vars do not suit.