Color Token

The design tokens are the semantic colors of the Style Guide. They describe the purpose of a color, for example the text color of a muted label or the background of a danger area, not its value. Use a token instead of a color from the Color Palette whenever possible.

Every token exists as the custom property --sg-color-{TOKEN_NAME}. Click on a color to copy the custom property.

.card {
  background: var(--sg-color-surface-level-2-primary);
  color: var(--sg-color-content-standard);
  border: 1px solid var(--sg-color-border-surface-level-2-primary);
}

ATTENTION The Style Guide uses the light tokens token-light-v2-web-* only. The dark tokens are not used and therefore not documented here.

Content

The text and icon colors. The preview shows the color on surface-level-1-base, light colors on a dark background.

The structure of the custom property names is --sg-color-content-{NAME}.

Surface

The background colors of areas. The level describes the stacking order: level 0 is the page background, higher levels lie above it.

The structure of the custom property names is --sg-color-surface-level-{LEVEL}-{NAME}.

Border

The border colors of surfaces and tabs.

The structure of the custom property names are:

• --sg-color-border-surface-level-{LEVEL}-{NAME}
• --sg-color-border-tab-{NAME}

Action

The background colors of interactive elements. The rows are the variants, the columns are the states. A dash marks a combination that does not exist.

The structure of the custom property names is --sg-color-action-{STATE}-{VARIANT}.

• STATE base, hover, focus, pressed, visited, disabled

Border Action

The border colors of interactive elements, with the same variants and states as the action colors.

The structure of the custom property names is --sg-color-border-action-{STATE}-{VARIANT}.

Charts

The colors of the chart components. Each series has five steps from ghost to peak.

Modifier

The color scales from 050 to 950. They are the basis of the semantic tokens above. Prefer the semantic tokens in your layout, because they keep their meaning when a scale changes.

The structure of the custom property names is --sg-color-modifier-{COLOR}-{STEP}.