Colour token reference
A complete list. If you are choosing a colour rather than looking one up, start with Usage. This page is for checking a name or a value.
Generated page
These tables are generated from the token source. If a value here disagrees with what you see in Figma or in the browser, the page is stale, so please say so rather than working around it.
263 colour tokens. Values are resolved from the canonical token source; colour does not vary with density, only with colour scheme.
The Token column is the name you pick in Figma. The CSS custom property column is the same token's name in code. Both come from the token definition itself, so they cannot drift apart.
There is a TypeScript form as well, which is the dotted name with each segment camel-cased:
semantic.background.nonInteractive.accent.muted. See
Using the tokens in TypeScript.
Surfaces and planes
The planes an interface is built from. canvas sits behind everything; surface is what content sits on.
7 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
background.backdrop | --eds-background-backdrop | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
background.canvas | --eds-background-canvas | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
background.dialog | --eds-background-dialog | oklch(1 0 0) | oklch(0.1 0.0004 242.96) |
background.floating | --eds-background-floating | oklch(1 0 0) | oklch(0.1 0.0004 242.96) |
background.input | --eds-background-input | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
background.inverted | --eds-background-inverted | oklch(0.37 0 0) | oklch(0.96 0.0156 242.96) |
background.surface | --eds-background-surface | oklch(1 0 0) | oklch(0.1 0.0004 242.96) |
Interactive backgrounds
Fills for anything the user can act on. Every one carries default, hover and pressed.
44 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
background.interactive.accent.emphasis.default | --eds-background-interactive-accent-emphasis-default | oklch(0.52 0.0783 204.55) | oklch(0.82 0.0709 204.55) |
background.interactive.accent.emphasis.hover | --eds-background-interactive-accent-emphasis-hover | oklch(0.47 0.0687 204.55) | oklch(0.88 0.0566 204.55) |
background.interactive.accent.emphasis.pressed | --eds-background-interactive-accent-emphasis-pressed | oklch(0.42 0.0566 204.55) | oklch(0.93 0.0438 204.55) |
background.interactive.accent.muted.default | --eds-background-interactive-accent-muted-default | oklch(0.98 0.014 204.55) | oklch(0.215 0.0045 204.55) |
background.interactive.accent.muted.hover | --eds-background-interactive-accent-muted-hover | oklch(0.94 0.02 204.55) | oklch(0.226 0.0051 204.55) |
background.interactive.accent.muted.pressed | --eds-background-interactive-accent-muted-pressed | oklch(0.91 0.0255 204.55) | oklch(0.47 0.0438 204.55) |
background.interactive.accent.selected.default | --eds-background-interactive-accent-selected-default | oklch(0.82 0.0463 204.55) | oklch(0.45 0.0388 204.55) |
background.interactive.accent.selected.hover | --eds-background-interactive-accent-selected-hover | oklch(0.72 0.0709 204.55) | oklch(0.61 0.0767 204.55) |
background.interactive.accent.selected.pressed | --eds-background-interactive-accent-selected-pressed | oklch(0.62 0.0844 204.55) | oklch(0.76 0.0811 204.55) |
background.interactive.danger.emphasis.default | --eds-background-interactive-danger-emphasis-default | oklch(0.52 0.2136 21.12) | oklch(0.82 0.1933 21.12) |
background.interactive.danger.emphasis.hover | --eds-background-interactive-danger-emphasis-hover | oklch(0.47 0.1873 21.12) | oklch(0.88 0.1543 21.12) |
background.interactive.danger.emphasis.pressed | --eds-background-interactive-danger-emphasis-pressed | oklch(0.42 0.1543 21.12) | oklch(0.93 0.1194 21.12) |
background.interactive.danger.muted.default | --eds-background-interactive-danger-muted-default | oklch(0.98 0.0381 21.12) | oklch(0.215 0.0122 21.12) |
background.interactive.danger.muted.hover | --eds-background-interactive-danger-muted-hover | oklch(0.94 0.0546 21.12) | oklch(0.226 0.014 21.12) |
background.interactive.danger.muted.pressed | --eds-background-interactive-danger-muted-pressed | oklch(0.91 0.0696 21.12) | oklch(0.47 0.1194 21.12) |
background.interactive.disabled | --eds-background-interactive-disabled | oklch(0.94 0 0) | oklch(0.226 0.0022 242.96) |
background.interactive.info.emphasis.default | --eds-background-interactive-info-emphasis-default | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
background.interactive.info.emphasis.hover | --eds-background-interactive-info-emphasis-hover | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
background.interactive.info.emphasis.pressed | --eds-background-interactive-info-emphasis-pressed | oklch(0.42 0.0905 240.68) | oklch(0.93 0.0701 240.68) |
background.interactive.info.muted.default | --eds-background-interactive-info-muted-default | oklch(0.98 0.0223 240.68) | oklch(0.215 0.0072 240.68) |
background.interactive.info.muted.hover | --eds-background-interactive-info-muted-hover | oklch(0.94 0.032 240.68) | oklch(0.226 0.0082 240.68) |
background.interactive.info.muted.pressed | --eds-background-interactive-info-muted-pressed | oklch(0.91 0.0408 240.68) | oklch(0.47 0.0701 240.68) |
background.interactive.neutral.emphasis.default | --eds-background-interactive-neutral-emphasis-default | oklch(0.52 0 0) | oklch(0.82 0.0303 242.96) |
background.interactive.neutral.emphasis.hover | --eds-background-interactive-neutral-emphasis-hover | oklch(0.47 0 0) | oklch(0.88 0.0242 242.96) |
background.interactive.neutral.emphasis.pressed | --eds-background-interactive-neutral-emphasis-pressed | oklch(0.42 0 0) | oklch(0.93 0.0187 242.96) |
background.interactive.neutral.muted.default | --eds-background-interactive-neutral-muted-default | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
background.interactive.neutral.muted.hover | --eds-background-interactive-neutral-muted-hover | oklch(0.94 0 0) | oklch(0.226 0.0022 242.96) |
background.interactive.neutral.muted.pressed | --eds-background-interactive-neutral-muted-pressed | oklch(0.91 0 0) | oklch(0.47 0.0187 242.96) |
background.interactive.neutral.selected.default | --eds-background-interactive-neutral-selected-default | oklch(0.91 0.0255 204.55) | oklch(0.47 0.0438 204.55) |
background.interactive.neutral.selected.hover | --eds-background-interactive-neutral-selected-hover | oklch(0.87 0.0341 204.55) | oklch(0.3 0.0115 204.55) |
background.interactive.neutral.selected.pressed | --eds-background-interactive-neutral-selected-pressed | oklch(0.82 0.0463 204.55) | oklch(0.45 0.0388 204.55) |
background.interactive.read-only | --eds-background-interactive-read-only | oklch(0.94 0 0) | oklch(0.226 0.0022 242.96) |
background.interactive.success.emphasis.default | --eds-background-interactive-success-emphasis-default | oklch(0.52 0.1531 142.98) | oklch(0.82 0.1386 142.98) |
background.interactive.success.emphasis.hover | --eds-background-interactive-success-emphasis-hover | oklch(0.47 0.1343 142.98) | oklch(0.88 0.1107 142.98) |
background.interactive.success.emphasis.pressed | --eds-background-interactive-success-emphasis-pressed | oklch(0.42 0.1107 142.98) | oklch(0.93 0.0856 142.98) |
background.interactive.success.muted.default | --eds-background-interactive-success-muted-default | oklch(0.98 0.0273 142.98) | oklch(0.215 0.0088 142.98) |
background.interactive.success.muted.hover | --eds-background-interactive-success-muted-hover | oklch(0.94 0.0391 142.98) | oklch(0.226 0.01 142.98) |
background.interactive.success.muted.pressed | --eds-background-interactive-success-muted-pressed | oklch(0.91 0.0499 142.98) | oklch(0.47 0.0856 142.98) |
background.interactive.warning.emphasis.default | --eds-background-interactive-warning-emphasis-default | oklch(0.52 0.152 58.74) | oklch(0.82 0.1376 58.74) |
background.interactive.warning.emphasis.hover | --eds-background-interactive-warning-emphasis-hover | oklch(0.47 0.1333 58.74) | oklch(0.88 0.1098 58.74) |
background.interactive.warning.emphasis.pressed | --eds-background-interactive-warning-emphasis-pressed | oklch(0.42 0.1098 58.74) | oklch(0.93 0.085 58.74) |
background.interactive.warning.muted.default | --eds-background-interactive-warning-muted-default | oklch(0.98 0.0271 58.74) | oklch(0.215 0.0087 58.74) |
background.interactive.warning.muted.hover | --eds-background-interactive-warning-muted-hover | oklch(0.94 0.0388 58.74) | oklch(0.226 0.0099 58.74) |
background.interactive.warning.muted.pressed | --eds-background-interactive-warning-muted-pressed | oklch(0.91 0.0495 58.74) | oklch(0.47 0.085 58.74) |
Non-interactive backgrounds
Fills for things that convey state but cannot be clicked: banners, badges, status chips. No hover values, deliberately.
18 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
background.non-interactive.accent.default | --eds-background-non-interactive-accent-default | oklch(0.91 0.0255 204.55) | oklch(0.47 0.0438 204.55) |
background.non-interactive.accent.emphasis | --eds-background-non-interactive-accent-emphasis | oklch(0.52 0.0783 204.55) | oklch(0.82 0.0709 204.55) |
background.non-interactive.accent.muted | --eds-background-non-interactive-accent-muted | oklch(0.98 0.014 204.55) | oklch(0.215 0.0045 204.55) |
background.non-interactive.danger.default | --eds-background-non-interactive-danger-default | oklch(0.91 0.0696 21.12) | oklch(0.47 0.1194 21.12) |
background.non-interactive.danger.emphasis | --eds-background-non-interactive-danger-emphasis | oklch(0.52 0.2136 21.12) | oklch(0.82 0.1933 21.12) |
background.non-interactive.danger.muted | --eds-background-non-interactive-danger-muted | oklch(0.98 0.0381 21.12) | oklch(0.215 0.0122 21.12) |
background.non-interactive.info.default | --eds-background-non-interactive-info-default | oklch(0.91 0.0408 240.68) | oklch(0.47 0.0701 240.68) |
background.non-interactive.info.emphasis | --eds-background-non-interactive-info-emphasis | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
background.non-interactive.info.muted | --eds-background-non-interactive-info-muted | oklch(0.98 0.0223 240.68) | oklch(0.215 0.0072 240.68) |
background.non-interactive.neutral.default | --eds-background-non-interactive-neutral-default | oklch(0.91 0 0) | oklch(0.47 0.0187 242.96) |
background.non-interactive.neutral.emphasis | --eds-background-non-interactive-neutral-emphasis | oklch(0.52 0 0) | oklch(0.82 0.0303 242.96) |
background.non-interactive.neutral.muted | --eds-background-non-interactive-neutral-muted | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
background.non-interactive.success.default | --eds-background-non-interactive-success-default | oklch(0.91 0.0499 142.98) | oklch(0.47 0.0856 142.98) |
background.non-interactive.success.emphasis | --eds-background-non-interactive-success-emphasis | oklch(0.52 0.1531 142.98) | oklch(0.82 0.1386 142.98) |
background.non-interactive.success.muted | --eds-background-non-interactive-success-muted | oklch(0.98 0.0273 142.98) | oklch(0.215 0.0088 142.98) |
background.non-interactive.warning.default | --eds-background-non-interactive-warning-default | oklch(0.91 0.0495 58.74) | oklch(0.47 0.085 58.74) |
background.non-interactive.warning.emphasis | --eds-background-non-interactive-warning-emphasis | oklch(0.52 0.152 58.74) | oklch(0.82 0.1376 58.74) |
background.non-interactive.warning.muted | --eds-background-non-interactive-warning-muted | oklch(0.98 0.0271 58.74) | oklch(0.215 0.0087 58.74) |
Interactive borders
Strokes on actionable elements, plus the focus ring and the selected indicator.
42 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
border.interactive.accent.emphasis.default | --eds-border-interactive-accent-emphasis-default | oklch(0.52 0.0783 204.55) | oklch(0.82 0.0709 204.55) |
border.interactive.accent.emphasis.hover | --eds-border-interactive-accent-emphasis-hover | oklch(0.47 0.0687 204.55) | oklch(0.88 0.0566 204.55) |
border.interactive.accent.emphasis.pressed | --eds-border-interactive-accent-emphasis-pressed | oklch(0.42 0.0566 204.55) | oklch(0.93 0.0438 204.55) |
border.interactive.accent.muted.default | --eds-border-interactive-accent-muted-default | oklch(0.87 0.0341 204.55) | oklch(0.3 0.0115 204.55) |
border.interactive.accent.muted.hover | --eds-border-interactive-accent-muted-hover | oklch(0.82 0.0463 204.55) | oklch(0.45 0.0388 204.55) |
border.interactive.accent.muted.pressed | --eds-border-interactive-accent-muted-pressed | oklch(0.72 0.0709 204.55) | oklch(0.61 0.0767 204.55) |
border.interactive.danger.emphasis.default | --eds-border-interactive-danger-emphasis-default | oklch(0.52 0.2136 21.12) | oklch(0.82 0.1933 21.12) |
border.interactive.danger.emphasis.hover | --eds-border-interactive-danger-emphasis-hover | oklch(0.47 0.1873 21.12) | oklch(0.88 0.1543 21.12) |
border.interactive.danger.emphasis.pressed | --eds-border-interactive-danger-emphasis-pressed | oklch(0.42 0.1543 21.12) | oklch(0.93 0.1194 21.12) |
border.interactive.danger.muted.default | --eds-border-interactive-danger-muted-default | oklch(0.87 0.093 21.12) | oklch(0.3 0.0313 21.12) |
border.interactive.danger.muted.hover | --eds-border-interactive-danger-muted-hover | oklch(0.82 0.1264 21.12) | oklch(0.45 0.1059 21.12) |
border.interactive.danger.muted.pressed | --eds-border-interactive-danger-muted-pressed | oklch(0.72 0.1933 21.12) | oklch(0.61 0.2091 21.12) |
border.interactive.disabled | --eds-border-interactive-disabled | oklch(0.87 0 0) | oklch(0.3 0.0049 242.96) |
border.interactive.focus | --eds-border-interactive-focus | oklch(0.72 0.1134 240.68) | oklch(0.61 0.1227 240.68) |
border.interactive.info.emphasis.default | --eds-border-interactive-info-emphasis-default | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
border.interactive.info.emphasis.hover | --eds-border-interactive-info-emphasis-hover | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
border.interactive.info.emphasis.pressed | --eds-border-interactive-info-emphasis-pressed | oklch(0.42 0.0905 240.68) | oklch(0.93 0.0701 240.68) |
border.interactive.info.muted.default | --eds-border-interactive-info-muted-default | oklch(0.87 0.0546 240.68) | oklch(0.3 0.0184 240.68) |
border.interactive.info.muted.hover | --eds-border-interactive-info-muted-hover | oklch(0.82 0.0741 240.68) | oklch(0.45 0.0622 240.68) |
border.interactive.info.muted.pressed | --eds-border-interactive-info-muted-pressed | oklch(0.72 0.1134 240.68) | oklch(0.61 0.1227 240.68) |
border.interactive.link.default | --eds-border-interactive-link-default | oklch(0.62 0.1351 240.68) | oklch(0.76 0.1298 240.68) |
border.interactive.link.hover | --eds-border-interactive-link-hover | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
border.interactive.link.pressed | --eds-border-interactive-link-pressed | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
border.interactive.neutral.emphasis.default | --eds-border-interactive-neutral-emphasis-default | oklch(0.52 0 0) | oklch(0.82 0.0303 242.96) |
border.interactive.neutral.emphasis.hover | --eds-border-interactive-neutral-emphasis-hover | oklch(0.47 0 0) | oklch(0.88 0.0242 242.96) |
border.interactive.neutral.emphasis.pressed | --eds-border-interactive-neutral-emphasis-pressed | oklch(0.42 0 0) | oklch(0.93 0.0187 242.96) |
border.interactive.neutral.muted.default | --eds-border-interactive-neutral-muted-default | oklch(0.87 0 0) | oklch(0.3 0.0049 242.96) |
border.interactive.neutral.muted.hover | --eds-border-interactive-neutral-muted-hover | oklch(0.82 0 0) | oklch(0.45 0.0166 242.96) |
border.interactive.neutral.muted.pressed | --eds-border-interactive-neutral-muted-pressed | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
border.interactive.selected-indicator | --eds-border-interactive-selected-indicator | oklch(0.32 0.0318 204.55) | oklch(0.99 0.0297 204.55) |
border.interactive.success.emphasis.default | --eds-border-interactive-success-emphasis-default | oklch(0.52 0.1531 142.98) | oklch(0.82 0.1386 142.98) |
border.interactive.success.emphasis.hover | --eds-border-interactive-success-emphasis-hover | oklch(0.47 0.1343 142.98) | oklch(0.88 0.1107 142.98) |
border.interactive.success.emphasis.pressed | --eds-border-interactive-success-emphasis-pressed | oklch(0.42 0.1107 142.98) | oklch(0.93 0.0856 142.98) |
border.interactive.success.muted.default | --eds-border-interactive-success-muted-default | oklch(0.87 0.0667 142.98) | oklch(0.3 0.0225 142.98) |
border.interactive.success.muted.hover | --eds-border-interactive-success-muted-hover | oklch(0.82 0.0906 142.98) | oklch(0.45 0.076 142.98) |
border.interactive.success.muted.pressed | --eds-border-interactive-success-muted-pressed | oklch(0.72 0.1386 142.98) | oklch(0.61 0.1499 142.98) |
border.interactive.warning.emphasis.default | --eds-border-interactive-warning-emphasis-default | oklch(0.52 0.152 58.74) | oklch(0.82 0.1376 58.74) |
border.interactive.warning.emphasis.hover | --eds-border-interactive-warning-emphasis-hover | oklch(0.47 0.1333 58.74) | oklch(0.88 0.1098 58.74) |
border.interactive.warning.emphasis.pressed | --eds-border-interactive-warning-emphasis-pressed | oklch(0.42 0.1098 58.74) | oklch(0.93 0.085 58.74) |
border.interactive.warning.muted.default | --eds-border-interactive-warning-muted-default | oklch(0.87 0.0662 58.74) | oklch(0.3 0.0223 58.74) |
border.interactive.warning.muted.hover | --eds-border-interactive-warning-muted-hover | oklch(0.82 0.0899 58.74) | oklch(0.45 0.0754 58.74) |
border.interactive.warning.muted.pressed | --eds-border-interactive-warning-muted-pressed | oklch(0.72 0.1376 58.74) | oklch(0.61 0.1488 58.74) |
Non-interactive borders
Dividers, outlines and containers. muted / default / emphasis is a scale of prominence, not a set of states.
18 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
border.non-interactive.accent.default | --eds-border-non-interactive-accent-default | oklch(0.72 0.0709 204.55) | oklch(0.61 0.0767 204.55) |
border.non-interactive.accent.emphasis | --eds-border-non-interactive-accent-emphasis | oklch(0.52 0.0783 204.55) | oklch(0.82 0.0709 204.55) |
border.non-interactive.accent.muted | --eds-border-non-interactive-accent-muted | oklch(0.87 0.0341 204.55) | oklch(0.3 0.0115 204.55) |
border.non-interactive.danger.default | --eds-border-non-interactive-danger-default | oklch(0.72 0.1933 21.12) | oklch(0.61 0.2091 21.12) |
border.non-interactive.danger.emphasis | --eds-border-non-interactive-danger-emphasis | oklch(0.52 0.2136 21.12) | oklch(0.82 0.1933 21.12) |
border.non-interactive.danger.muted | --eds-border-non-interactive-danger-muted | oklch(0.87 0.093 21.12) | oklch(0.3 0.0313 21.12) |
border.non-interactive.info.default | --eds-border-non-interactive-info-default | oklch(0.72 0.1134 240.68) | oklch(0.61 0.1227 240.68) |
border.non-interactive.info.emphasis | --eds-border-non-interactive-info-emphasis | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
border.non-interactive.info.muted | --eds-border-non-interactive-info-muted | oklch(0.87 0.0546 240.68) | oklch(0.3 0.0184 240.68) |
border.non-interactive.neutral.default | --eds-border-non-interactive-neutral-default | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
border.non-interactive.neutral.emphasis | --eds-border-non-interactive-neutral-emphasis | oklch(0.52 0 0) | oklch(0.82 0.0303 242.96) |
border.non-interactive.neutral.muted | --eds-border-non-interactive-neutral-muted | oklch(0.87 0 0) | oklch(0.3 0.0049 242.96) |
border.non-interactive.success.default | --eds-border-non-interactive-success-default | oklch(0.72 0.1386 142.98) | oklch(0.61 0.1499 142.98) |
border.non-interactive.success.emphasis | --eds-border-non-interactive-success-emphasis | oklch(0.52 0.1531 142.98) | oklch(0.82 0.1386 142.98) |
border.non-interactive.success.muted | --eds-border-non-interactive-success-muted | oklch(0.87 0.0667 142.98) | oklch(0.3 0.0225 142.98) |
border.non-interactive.warning.default | --eds-border-non-interactive-warning-default | oklch(0.72 0.1376 58.74) | oklch(0.61 0.1488 58.74) |
border.non-interactive.warning.emphasis | --eds-border-non-interactive-warning-emphasis | oklch(0.52 0.152 58.74) | oklch(0.82 0.1376 58.74) |
border.non-interactive.warning.muted | --eds-border-non-interactive-warning-muted | oklch(0.87 0.0662 58.74) | oklch(0.3 0.0223 58.74) |
Text
Text and anything read as text.
26 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
text.interactive.disabled | --eds-text-interactive-disabled | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
text.interactive.link.default | --eds-text-interactive-link-default | oklch(0.62 0.1351 240.68) | oklch(0.76 0.1298 240.68) |
text.interactive.link.hover | --eds-text-interactive-link-hover | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
text.interactive.link.pressed | --eds-text-interactive-link-pressed | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
text.inverted | --eds-text-inverted | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
text.on-default.accent | --eds-text-on-default-accent | oklch(0.47 0.0687 204.55) | oklch(0.88 0.0566 204.55) |
text.on-default.danger | --eds-text-on-default-danger | oklch(0.47 0.1873 21.12) | oklch(0.88 0.1543 21.12) |
text.on-default.info | --eds-text-on-default-info | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
text.on-default.neutral | --eds-text-on-default-neutral | oklch(0.47 0 0) | oklch(0.88 0.0242 242.96) |
text.on-default.success | --eds-text-on-default-success | oklch(0.47 0.1343 142.98) | oklch(0.88 0.1107 142.98) |
text.on-default.warning | --eds-text-on-default-warning | oklch(0.47 0.1333 58.74) | oklch(0.88 0.1098 58.74) |
text.on-emphasis.accent | --eds-text-on-emphasis-accent | oklch(1 0.0115 204.55) | oklch(0.1 0.0009 204.55) |
text.on-emphasis.danger | --eds-text-on-emphasis-danger | oklch(1 0.0313 21.12) | oklch(0.1 0.0026 21.12) |
text.on-emphasis.info | --eds-text-on-emphasis-info | oklch(1 0.0184 240.68) | oklch(0.1 0.0015 240.68) |
text.on-emphasis.neutral | --eds-text-on-emphasis-neutral | oklch(1 0 0) | oklch(0.1 0.0004 242.96) |
text.on-emphasis.success | --eds-text-on-emphasis-success | oklch(1 0.0225 142.98) | oklch(0.1 0.0018 142.98) |
text.on-emphasis.warning | --eds-text-on-emphasis-warning | oklch(1 0.0223 58.74) | oklch(0.1 0.0018 58.74) |
text.on-muted.accent | --eds-text-on-muted-accent | oklch(0.37 0.0438 204.55) | oklch(0.96 0.0364 204.55) |
text.on-muted.danger | --eds-text-on-muted-danger | oklch(0.37 0.1194 21.12) | oklch(0.96 0.0994 21.12) |
text.on-muted.info | --eds-text-on-muted-info | oklch(0.37 0.0701 240.68) | oklch(0.96 0.0583 240.68) |
text.on-muted.neutral | --eds-text-on-muted-neutral | oklch(0.37 0 0) | oklch(0.96 0.0156 242.96) |
text.on-muted.success | --eds-text-on-muted-success | oklch(0.37 0.0856 142.98) | oklch(0.96 0.0713 142.98) |
text.on-muted.warning | --eds-text-on-muted-warning | oklch(0.37 0.085 58.74) | oklch(0.96 0.0707 58.74) |
text.primary | --eds-text-primary | oklch(0.32 0 0) | oklch(0.99 0.0127 242.96) |
text.secondary | --eds-text-secondary | oklch(0.62 0 0) | oklch(0.76 0.0347 242.96) |
text.tertiary | --eds-text-tertiary | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
Icons
Split from text because a thin icon stroke needs more contrast than a letterform of the same size to read as equally solid.
41 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
icon.interactive.accent.default | --eds-icon-interactive-accent-default | oklch(0.42 0.0566 204.55) | oklch(0.93 0.0438 204.55) |
icon.interactive.accent.hover | --eds-icon-interactive-accent-hover | oklch(0.37 0.0438 204.55) | oklch(0.96 0.0364 204.55) |
icon.interactive.accent.pressed | --eds-icon-interactive-accent-pressed | oklch(0.32 0.0318 204.55) | oklch(0.99 0.0297 204.55) |
icon.interactive.danger.default | --eds-icon-interactive-danger-default | oklch(0.42 0.1543 21.12) | oklch(0.93 0.1194 21.12) |
icon.interactive.danger.hover | --eds-icon-interactive-danger-hover | oklch(0.37 0.1194 21.12) | oklch(0.96 0.0994 21.12) |
icon.interactive.danger.pressed | --eds-icon-interactive-danger-pressed | oklch(0.32 0.0868 21.12) | oklch(0.99 0.0809 21.12) |
icon.interactive.disabled | --eds-icon-interactive-disabled | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
icon.interactive.info.default | --eds-icon-interactive-info-default | oklch(0.42 0.0905 240.68) | oklch(0.93 0.0701 240.68) |
icon.interactive.info.hover | --eds-icon-interactive-info-hover | oklch(0.37 0.0701 240.68) | oklch(0.96 0.0583 240.68) |
icon.interactive.info.pressed | --eds-icon-interactive-info-pressed | oklch(0.32 0.0509 240.68) | oklch(0.99 0.0474 240.68) |
icon.interactive.link.default | --eds-icon-interactive-link-default | oklch(0.62 0.1351 240.68) | oklch(0.76 0.1298 240.68) |
icon.interactive.link.hover | --eds-icon-interactive-link-hover | oklch(0.52 0.1253 240.68) | oklch(0.82 0.1134 240.68) |
icon.interactive.link.pressed | --eds-icon-interactive-link-pressed | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
icon.interactive.success.default | --eds-icon-interactive-success-default | oklch(0.42 0.1107 142.98) | oklch(0.93 0.0856 142.98) |
icon.interactive.success.hover | --eds-icon-interactive-success-hover | oklch(0.37 0.0856 142.98) | oklch(0.96 0.0713 142.98) |
icon.interactive.success.pressed | --eds-icon-interactive-success-pressed | oklch(0.32 0.0623 142.98) | oklch(0.99 0.058 142.98) |
icon.interactive.warning.default | --eds-icon-interactive-warning-default | oklch(0.42 0.1098 58.74) | oklch(0.93 0.085 58.74) |
icon.interactive.warning.hover | --eds-icon-interactive-warning-hover | oklch(0.37 0.085 58.74) | oklch(0.96 0.0707 58.74) |
icon.interactive.warning.pressed | --eds-icon-interactive-warning-pressed | oklch(0.32 0.0618 58.74) | oklch(0.99 0.0576 58.74) |
icon.inverted | --eds-icon-inverted | oklch(0.98 0 0) | oklch(0.215 0.0019 242.96) |
icon.on-default.accent | --eds-icon-on-default-accent | oklch(0.47 0.0687 204.55) | oklch(0.88 0.0566 204.55) |
icon.on-default.danger | --eds-icon-on-default-danger | oklch(0.47 0.1873 21.12) | oklch(0.88 0.1543 21.12) |
icon.on-default.info | --eds-icon-on-default-info | oklch(0.47 0.1099 240.68) | oklch(0.88 0.0905 240.68) |
icon.on-default.neutral | --eds-icon-on-default-neutral | oklch(0.47 0 0) | oklch(0.88 0.0242 242.96) |
icon.on-default.success | --eds-icon-on-default-success | oklch(0.47 0.1343 142.98) | oklch(0.88 0.1107 142.98) |
icon.on-default.warning | --eds-icon-on-default-warning | oklch(0.47 0.1333 58.74) | oklch(0.88 0.1098 58.74) |
icon.on-emphasis.accent | --eds-icon-on-emphasis-accent | oklch(1 0.0115 204.55) | oklch(0.1 0.0009 204.55) |
icon.on-emphasis.danger | --eds-icon-on-emphasis-danger | oklch(1 0.0313 21.12) | oklch(0.1 0.0026 21.12) |
icon.on-emphasis.info | --eds-icon-on-emphasis-info | oklch(1 0.0184 240.68) | oklch(0.1 0.0015 240.68) |
icon.on-emphasis.neutral | --eds-icon-on-emphasis-neutral | oklch(1 0 0) | oklch(0.1 0.0004 242.96) |
icon.on-emphasis.success | --eds-icon-on-emphasis-success | oklch(1 0.0225 142.98) | oklch(0.1 0.0018 142.98) |
icon.on-emphasis.warning | --eds-icon-on-emphasis-warning | oklch(1 0.0223 58.74) | oklch(0.1 0.0018 58.74) |
icon.on-muted.accent | --eds-icon-on-muted-accent | oklch(0.37 0.0438 204.55) | oklch(0.96 0.0364 204.55) |
icon.on-muted.danger | --eds-icon-on-muted-danger | oklch(0.37 0.1194 21.12) | oklch(0.96 0.0994 21.12) |
icon.on-muted.info | --eds-icon-on-muted-info | oklch(0.37 0.0701 240.68) | oklch(0.96 0.0583 240.68) |
icon.on-muted.neutral | --eds-icon-on-muted-neutral | oklch(0.37 0 0) | oklch(0.96 0.0156 242.96) |
icon.on-muted.success | --eds-icon-on-muted-success | oklch(0.37 0.0856 142.98) | oklch(0.96 0.0713 142.98) |
icon.on-muted.warning | --eds-icon-on-muted-warning | oklch(0.37 0.085 58.74) | oklch(0.96 0.0707 58.74) |
icon.primary | --eds-icon-primary | oklch(0.32 0 0) | oklch(0.99 0.0127 242.96) |
icon.secondary | --eds-icon-secondary | oklch(0.62 0 0) | oklch(0.76 0.0347 242.96) |
icon.tertiary | --eds-icon-tertiary | oklch(0.72 0 0) | oklch(0.61 0.0328 242.96) |
Overlay
The dim behind a modal. The only alpha value in the colour set.
1 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
overlay.scrim | --eds-overlay-scrim | #1d1d1d1a | #1d1d1d1a |
Data visualisation
Chart colour, tuned for telling series apart rather than for contrast against a surface. No EDS component binds these.
66 tokens.
| Token | CSS custom property | Light | Dark |
|---|---|---|---|
data-visualization.cat.1.1 | --eds-data-visualization-cat-1-1 | #adc3c4 | #00282c |
data-visualization.cat.1.2 | --eds-data-visualization-cat-1-2 | #5d8386 | #00383c |
data-visualization.cat.1.3 | --eds-data-visualization-cat-1-3 | #03484c | #03484c |
data-visualization.cat.1.4 | --eds-data-visualization-cat-1-4 | #00383c | #5d8386 |
data-visualization.cat.1.5 | --eds-data-visualization-cat-1-5 | #00282c | #adc3c4 |
data-visualization.cat.10.1 | --eds-data-visualization-cat-10-1 | #ffd5bf | #671f00 |
data-visualization.cat.10.2 | --eds-data-visualization-cat-10-2 | #f7b18a | #aa5215 |
data-visualization.cat.10.3 | --eds-data-visualization-cat-10-3 | #ed8b52 | #ed8b52 |
data-visualization.cat.10.4 | --eds-data-visualization-cat-10-4 | #aa5215 | #f7b18a |
data-visualization.cat.10.5 | --eds-data-visualization-cat-10-5 | #671f00 | #ffd5bf |
data-visualization.cat.2.1 | --eds-data-visualization-cat-2-1 | #f9eab5 | #544100 |
data-visualization.cat.2.2 | --eds-data-visualization-cat-2-2 | #f7db79 | #a28200 |
data-visualization.cat.2.3 | --eds-data-visualization-cat-2-3 | #f4cb00 | #f4cb00 |
data-visualization.cat.2.4 | --eds-data-visualization-cat-2-4 | #a28200 | #f7db79 |
data-visualization.cat.2.5 | --eds-data-visualization-cat-2-5 | #544100 | #f9eab5 |
data-visualization.cat.3.1 | --eds-data-visualization-cat-3-1 | #c0e6ff | #003f6e |
data-visualization.cat.3.2 | --eds-data-visualization-cat-3-2 | #8aceff | #0078b7 |
data-visualization.cat.3.3 | --eds-data-visualization-cat-3-3 | #4bb6fc | #4bb6fc |
data-visualization.cat.3.4 | --eds-data-visualization-cat-3-4 | #0078b7 | #8aceff |
data-visualization.cat.3.5 | --eds-data-visualization-cat-3-5 | #003f6e | #e0c9ee |
data-visualization.cat.4.1 | --eds-data-visualization-cat-4-1 | #f4c8dc | #5e053e |
data-visualization.cat.4.2 | --eds-data-visualization-cat-4-2 | #df96ba | #92376a |
data-visualization.cat.4.3 | --eds-data-visualization-cat-4-3 | #c86499 | #c86499 |
data-visualization.cat.4.4 | --eds-data-visualization-cat-4-4 | #92376a | #df96ba |
data-visualization.cat.4.5 | --eds-data-visualization-cat-4-5 | #5e053e | #f4c8dc |
data-visualization.cat.5.1 | --eds-data-visualization-cat-5-1 | #c2d9b3 | #153900 |
data-visualization.cat.5.2 | --eds-data-visualization-cat-5-2 | #8ab06f | #315f00 |
data-visualization.cat.5.3 | --eds-data-visualization-cat-5-3 | #548723 | #548723 |
data-visualization.cat.5.4 | --eds-data-visualization-cat-5-4 | #315f00 | #8ab06f |
data-visualization.cat.5.5 | --eds-data-visualization-cat-5-5 | #153900 | #c2d9b3 |
data-visualization.cat.6.1 | --eds-data-visualization-cat-6-1 | #d9c1e5 | #410a55 |
data-visualization.cat.6.2 | --eds-data-visualization-cat-6-2 | #af86c2 | #622c79 |
data-visualization.cat.6.3 | --eds-data-visualization-cat-6-3 | #854b9e | #854b9e |
data-visualization.cat.6.4 | --eds-data-visualization-cat-6-4 | #622c79 | #af86c2 |
data-visualization.cat.6.5 | --eds-data-visualization-cat-6-5 | #410a55 | #d9c1e5 |
data-visualization.cat.7.1 | --eds-data-visualization-cat-7-1 | #edbcba | #590009 |
data-visualization.cat.7.2 | --eds-data-visualization-cat-7-2 | #ca7b7a | #7e1823 |
data-visualization.cat.7.3 | --eds-data-visualization-cat-7-3 | #a3383e | #a3383e |
data-visualization.cat.7.4 | --eds-data-visualization-cat-7-4 | #7e1823 | #ca7b7a |
data-visualization.cat.7.5 | --eds-data-visualization-cat-7-5 | #590009 | #edbcba |
data-visualization.cat.8.1 | --eds-data-visualization-cat-8-1 | #b7e5d1 | #00432b |
data-visualization.cat.8.2 | --eds-data-visualization-cat-8-2 | #75c9a8 | #007853 |
data-visualization.cat.8.3 | --eds-data-visualization-cat-8-3 | #00ad81 | #00ad81 |
data-visualization.cat.8.4 | --eds-data-visualization-cat-8-4 | #007853 | #75c9a8 |
data-visualization.cat.8.5 | --eds-data-visualization-cat-8-5 | #00432b | #b7e5d1 |
data-visualization.cat.9.1 | --eds-data-visualization-cat-9-1 | #bfd4f9 | #052a70 |
data-visualization.cat.9.2 | --eds-data-visualization-cat-9-2 | #87a9e7 | #2a53a0 |
data-visualization.cat.9.3 | --eds-data-visualization-cat-9-3 | #507ed3 | #507ed3 |
data-visualization.cat.9.4 | --eds-data-visualization-cat-9-4 | #2a53a0 | #87a9e7 |
data-visualization.cat.9.5 | --eds-data-visualization-cat-9-5 | #052a70 | #bfd4f9 |
data-visualization.div.1 | --eds-data-visualization-div-1 | #1564b0 | #539cec |
data-visualization.div.2 | --eds-data-visualization-div-2 | #5387c1 | #4579b2 |
data-visualization.div.3 | --eds-data-visualization-div-3 | #87a9d2 | #38577b |
data-visualization.div.4 | --eds-data-visualization-div-4 | #bacce1 | #2a3848 |
data-visualization.div.5 | --eds-data-visualization-div-5 | #eeeeee | #1b1b1b |
data-visualization.div.6 | --eds-data-visualization-div-6 | #dcc5b4 | #443224 |
data-visualization.div.7 | --eds-data-visualization-div-7 | #c89c7a | #724b2c |
data-visualization.div.8 | --eds-data-visualization-div-8 | #b2733f | #a36530 |
data-visualization.div.9 | --eds-data-visualization-div-9 | #9b4900 | #d78031 |
data-visualization.seq.1 | --eds-data-visualization-seq-1 | #dff7fa | #243032 |
data-visualization.seq.2 | --eds-data-visualization-seq-2 | #a4dbe2 | #2a4f54 |
data-visualization.seq.3 | --eds-data-visualization-seq-3 | #59c1cc | #14727b |
data-visualization.seq.4 | --eds-data-visualization-seq-4 | #00a4b3 | #0096a4 |
data-visualization.seq.5 | --eds-data-visualization-seq-5 | #008290 | #00b9c9 |
data-visualization.seq.6 | --eds-data-visualization-seq-6 | #00626c | #5dd8e5 |
data-visualization.seq.7 | --eds-data-visualization-seq-7 | #054046 | #acf3fb |