---
theme: adelphe
type: semantic-color-tokens
ds-version: "11.4.0"
generated: 2026-11-09
---

## How to use
Find the value closest to your hardcoded color. Replace with `var(--ds-semantic-color-*)`.
Token values adapt automatically when the active theme changes — never use raw values directly.

> Tokens marked `subtheme` vary by active subtheme (default / Pro / Sh / Emp / Group).
> Values shown are for the default subtheme of theme `adelphe`.

## Layout (surfaces, text, borders)
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-layout-border-medium-selected` | Frequently reused as the box-shadow ring color for focus/selected fields. | `#83d0f6` |
| `--ds-semantic-color-layout-border-medium-hover` | Layout › border › medium-hover | `#d1d5db` |
| `--ds-semantic-color-layout-border-strong-selected` | Layout › border › strong-selected | `#138ac9` |
| `--ds-semantic-color-layout-border-subtle-default` | Layout › border › subtle-default | `#e5e7eb` |
| `--ds-semantic-color-layout-border-subtle-selected` | Layout › border › subtle-selected | `#bde5fa` |
| `--ds-semantic-color-layout-border-medium-default` | Layout › border › medium-default | `#e5e7eb` |
| `--ds-semantic-color-layout-border-strong-default` | Common resting border for field-like shells. | `#d1d5db` |
| `--ds-semantic-color-layout-border-strong-hover` | Field-like border on hover. Often paired with layout-surface-medium-hover. | `#9ca3af` |
| `--ds-semantic-color-layout-content-strong` | To be used rarely on very specific text. | `#1f2937` |
| `--ds-semantic-color-layout-content-subtle` | Used for paragraphs. | `#6b7280` |
| `--ds-semantic-color-layout-content-medium` | To be used in most of the case. Example: body copy on soft status panels, paired with a status surface-subtle. | `#1f2937` |
| `--ds-semantic-color-layout-content-subtlest` | Used for legal mentions and disclaimers. | `#9ca3af` |
| `--ds-semantic-color-layout-surface-stronger-default` | Layout › surface › stronger-default | `#e2f2fc` |
| `--ds-semantic-color-layout-surface-subtle-default` | Layout › surface › subtle-default | `#f9fafb` |
| `--ds-semantic-color-layout-surface-strong-default` | Layout › surface › strong-default | `#f3f4f6` |
| `--ds-semantic-color-layout-surface-medium-default` | Example: input group, select, textarea, modal, drawer, accordion, choice cards, dropdown, side-nav, secondary/tertiary button shells. Often paired with layout-border-strong-default and layout-content-medium. | `#ffffff` |
| `--ds-semantic-color-layout-surface-medium-hover` | Example: fields, listbox/select options, choice cards, tabs, dropdown items, side-nav. Often paired with layout-border-strong-hover. | `#f9fafb` |
| `--ds-semantic-color-layout-surface-medium-active` | Example: choice/choicebox, button-icon, accordion, breadcrumb (useful when pressed, not only hovered). | `#f3f4f6` |
| `--ds-semantic-color-layout-surface-medium-selected` | Example: side-nav selected/opened, choice/choicebox, breadcrumb current. Often paired with action-border-medium on selected cards. | `#f1f9fe` |

## Action (CTAs, interactive)
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-action-content-medium` | Example: outline/secondary action text and icons. Often paired with layout-surface-medium-default and action-border-medium. | `#138ac9` |
| `--ds-semantic-color-action-content-strong` | Action › content › strong | `#0b6699` |
| `--ds-semantic-color-action-content-stronger` | Action › content › stronger | `#0d567f` |
| `--ds-semantic-color-action-surface-strong` | Action › surface › strong | `#0b6699` |
| `--ds-semantic-color-action-surface-subtlest` | Example: secondary button hover. Often paired with action-border-strong and action-content-strong. | `#f1f9fe` |
| `--ds-semantic-color-action-surface-subtle` | Example: secondary button active/pressed. Often paired with action-border-stronger and action-content-stronger. | `#e2f2fc` |
| `--ds-semantic-color-action-surface-medium` | Example: ds-button primary at rest. Hover/active states typically move to surface-strong/stronger. | `#138ac9` |
| `--ds-semantic-color-action-surface-stronger` | Action › surface › stronger | `#0d567f` |
| `--ds-semantic-color-action-border-strong` | Action › border › strong | `#0b6699` |
| `--ds-semantic-color-action-border-medium` | Example: outline border for secondary-like actions; a common focus outline color. Often paired with action-content-medium (example: outlined CTAs). | `#138ac9` |
| `--ds-semantic-color-action-border-stronger` | Action › border › stronger | `#0d567f` |

## Action — special variant
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-action-special-surface-strong` | Example: ds-button special on hover. | `#9b7617` |
| `--ds-semantic-color-action-special-surface-subtlest` | Example: outlined special button hover fill. Often paired with action-special-border-strong and action-special-content-strong. | `#fff9e6` |
| `--ds-semantic-color-action-special-surface-subtle` | Example: outlined special button active fill. Often paired with action-special-border-stronger and action-special-content-stronger. | `#ffefbd` |
| `--ds-semantic-color-action-special-surface-medium` | Example: ds-button special at rest. Label often uses layout-invert-content-medium; sometimes also used as the border color of that control. | `#bb9225` |
| `--ds-semantic-color-action-special-surface-stronger` | Used on active/pressed state. | `#79590b` |
| `--ds-semantic-color-action-special-content-strong` | Example: links, outlined special buttons. | `#9b7617` |
| `--ds-semantic-color-action-special-content-stronger` | Used on press/active state. | `#79590b` |
| `--ds-semantic-color-action-special-content-medium` | Example: special links, outlined special buttons (at rest). Often paired with layout-surface-medium-default and action-special-border-medium when outlined. | `#bb9225` |
| `--ds-semantic-color-action-special-border-medium` | Example: ds-citeo-link special (at rest). Also used as a focus outline. Often paired with action-special-content-medium. | `#bb9225` |
| `--ds-semantic-color-action-special-border-strong` | Often paired with surface-subtlest and content-strong. | `#9b7617` |
| `--ds-semantic-color-action-special-border-stronger` | Used on press/active. Often paired with surface-subtle and content-stronger. | `#79590b` |

## Neutral
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-neutral-border-subtlest` | Neutral › border › subtlest | `#d1d5db` |
| `--ds-semantic-color-neutral-border-medium` | Neutral › border › medium | `#6b7280` |
| `--ds-semantic-color-neutral-border-subtle` | Example: checkbox/radio-like controls at rest. Checked states often move toward the action surface/border instead. | `#9ca3af` |
| `--ds-semantic-color-neutral-border-strong` | Neutral › border › strong | `#1f2937` |
| `--ds-semantic-color-neutral-surface-medium-hover` | Neutral › surface › medium-hover | `#e5e7eb` |
| `--ds-semantic-color-neutral-surface-strongest-default` | Neutral › surface › strongest-default | `#1f2937` |
| `--ds-semantic-color-neutral-surface-subtle-default` | Neutral › surface › subtle-default | `#ffffff` |
| `--ds-semantic-color-neutral-surface-subtle-hover` | Neutral › surface › subtle-hover | `#f9fafb` |
| `--ds-semantic-color-neutral-surface-medium-default` | Neutral › surface › medium-default | `#f3f4f6` |
| `--ds-semantic-color-neutral-surface-medium-active` | Neutral › surface › medium-active | `#d1d5db` |
| `--ds-semantic-color-neutral-surface-strong-default` | Neutral › surface › strong-default | `#e5e7eb` |
| `--ds-semantic-color-neutral-surface-stronger-default` | Neutral › surface › stronger-default | `#d1d5db` |
| `--ds-semantic-color-neutral-surface-stronger-hover` | Neutral › surface › stronger-hover | `#9ca3af` |
| `--ds-semantic-color-neutral-surface-strongest-hover` | Neutral › surface › strongest-hover | `#111827` |
| `--ds-semantic-color-neutral-content-subtle` | Neutral › content › subtle | `#4b5563` |
| `--ds-semantic-color-neutral-content-medium` | Often paired with layout-surface-medium-default, and with layout-border-strong-default (example: outlined tertiary buttons). | `#1f2937` |

## Success
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-success-border-subtle` | Success › border › subtle | `#94e1a9` |
| `--ds-semantic-color-success-border-medium` | Success › border › medium | `#36a856` |
| `--ds-semantic-color-success-surface-subtlest` | Success › surface › subtlest | `#e0f8e6` |
| `--ds-semantic-color-success-surface-subtle` | Example: tag, icon-tile. Often paired with success-content-strong. | `#c3efce` |
| `--ds-semantic-color-success-surface-medium` | Success › surface › medium | `#36a856` |
| `--ds-semantic-color-success-content-strong` | Used on soft success surfaces. Often paired with success-surface-subtle. | `#24713a` |
| `--ds-semantic-color-success-content-medium` | Success › content › medium | `#299046` |

## Alert / Warning
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-alert-surface-subtlest` | Alert › surface › subtlest | `#fdefd7` |
| `--ds-semantic-color-alert-surface-medium` | Alert › surface › medium | `#ef7d1f` |
| `--ds-semantic-color-alert-surface-subtle` | Example: tag/callout fill. Often paired with alert-content-strong. | `#fadaae` |
| `--ds-semantic-color-alert-content-medium` | Alert › content › medium | `#ef7d1f` |
| `--ds-semantic-color-alert-content-strong` | Used on soft warning surfaces. Often paired with alert-surface-subtle. | `#943c18` |
| `--ds-semantic-color-alert-border-subtle` | Alert › border › subtle | `#f7bf7a` |
| `--ds-semantic-color-alert-border-medium` | Alert › border › medium | `#ef7d1f` |

## Danger / Error
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-danger-surface-stronger` | Danger › surface › stronger | `#941d28` |
| `--ds-semantic-color-danger-surface-subtlest` | Example: invalid field hover on input group / textarea. Often paired with danger-border-medium. | `#fce2e0` |
| `--ds-semantic-color-danger-surface-subtle` | Example: danger chip/callout fill. Often paired with danger-content-strong. | `#f7c2be` |
| `--ds-semantic-color-danger-surface-medium` | Example: filled danger button background. | `#e5504e` |
| `--ds-semantic-color-danger-surface-strong` | Danger › surface › strong | `#b02028` |
| `--ds-semantic-color-danger-content-subtle` | Danger › content › subtle | `#e5504e` |
| `--ds-semantic-color-danger-content-medium` | Example: danger icons, outline label icons. Often sits on layout-surface with danger-border-medium. | `#d64045` |
| `--ds-semantic-color-danger-content-strong` | Used on soft danger surfaces. Example: chips. Often paired with danger-surface-subtle. | `#b02028` |
| `--ds-semantic-color-danger-content-stronger` | Danger › content › stronger | `#941d28` |
| `--ds-semantic-color-danger-border-subtle` | Error focus ring on fields (also used as box-shadow). | `#f6b0ab` |
| `--ds-semantic-color-danger-border-medium` | Example: invalid field borders, danger outline buttons. On field hover, often paired with danger-surface-subtlest. | `#e5504e` |
| `--ds-semantic-color-danger-border-strong` | Danger › border › strong | `#d64045` |
| `--ds-semantic-color-danger-border-stronger` | Danger › border › stronger | `#b02028` |

## Information
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-information-content-medium` | Information › content › medium | `#443391` |
| `--ds-semantic-color-information-content-strong` | Used on soft info surfaces. Often paired with information-surface-subtle. | `#2d2454` |
| `--ds-semantic-color-information-surface-subtlest` | Information › surface › subtlest | `#d8dcfe` |
| `--ds-semantic-color-information-surface-subtle` | Example: info chip/callout fill. Often paired with information-content-strong. | `#cacefb` |
| `--ds-semantic-color-information-surface-medium` | Information › surface › medium | `#443391` |
| `--ds-semantic-color-information-border-subtle` | Information › border › subtle | `#aaaef7` |
| `--ds-semantic-color-information-border-medium` | Information › border › medium | `#443391` |

## Accent 1
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent1-content-medium` | Example: tiles, avatars, hero accents. | `#22a8e6` |
| `--ds-semantic-color-accent1-content-subtlest` | Accent1 › content › subtlest | `#e2f2fc` |
| `--ds-semantic-color-accent1-content-subtle` | Accent1 › content › subtle | `#83d0f6` |
| `--ds-semantic-color-accent1-content-strong` | Often paired with accent1-surface-subtle for soft chips. | `#0b6699` |
| `--ds-semantic-color-accent1-border-subtle` | Accent1 › border › subtle | `#83d0f6` |
| `--ds-semantic-color-accent1-border-medium` | Accent1 › border › medium | `#22a8e6` |
| `--ds-semantic-color-accent1-surface-subtlest` | Accent1 › surface › subtlest | `#e2f2fc` |
| `--ds-semantic-color-accent1-surface-subtle` | Often paired with accent1-content-strong for soft chips. | `#bde5fa` |
| `--ds-semantic-color-accent1-surface-medium` | Accent1 › surface › medium | `#22a8e6` |

## Accent 2
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent2-surface-subtle` | Often paired with accent2-content-strong for soft chips. | `#ffe58f` |
| `--ds-semantic-color-accent2-surface-subtlest` | Accent2 › surface › subtlest | `#ffefbd` |
| `--ds-semantic-color-accent2-surface-medium` | Accent2 › surface › medium | `#ffcf3d` |
| `--ds-semantic-color-accent2-border-subtle` | Accent2 › border › subtle | `#ffe07a` |
| `--ds-semantic-color-accent2-border-medium` | Accent2 › border › medium | `#ffcf3d` |
| `--ds-semantic-color-accent2-content-subtle` | Accent2 › content › subtle | `#ffe07a` |
| `--ds-semantic-color-accent2-content-medium` | Accent2 › content › medium | `#ffcf3d` |
| `--ds-semantic-color-accent2-content-strong` | Often paired with accent2-surface-subtle for soft chips. | `#79590b` |

## Accent 3
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent3-content-subtle` | Accent3 › content › subtle | `#b2e28d` |
| `--ds-semantic-color-accent3-content-medium` | Accent3 › content › medium | `#8cd25a` |
| `--ds-semantic-color-accent3-content-strong` | Often paired with accent3-surface-subtle for soft chips. | `#43682c` |
| `--ds-semantic-color-accent3-surface-subtlest` | Accent3 › surface › subtlest | `#e4f5d6` |
| `--ds-semantic-color-accent3-surface-subtle` | Often paired with accent3-content-strong for soft chips. | `#cbebb2` |
| `--ds-semantic-color-accent3-surface-medium` | Accent3 › surface › medium | `#8cd25a` |
| `--ds-semantic-color-accent3-border-subtle` | Accent3 › border › subtle | `#b2e28d` |
| `--ds-semantic-color-accent3-border-medium` | Accent3 › border › medium | `#8cd25a` |

## Accent 4
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent4-surface-subtle` | Often paired with accent4-content-strong for soft chips. | `#f9c6e0` |
| `--ds-semantic-color-accent4-surface-subtlest` | Accent4 › surface › subtlest | `#f9deec` |
| `--ds-semantic-color-accent4-surface-medium` | Accent4 › surface › medium | `#e64588` |
| `--ds-semantic-color-accent4-content-subtle` | Accent4 › content › subtle | `#f7aace` |
| `--ds-semantic-color-accent4-content-medium` | Accent4 › content › medium | `#e64588` |
| `--ds-semantic-color-accent4-content-strong` | Often paired with accent4-surface-subtle for soft chips. | `#991b44` |
| `--ds-semantic-color-accent4-border-subtle` | Accent4 › border › subtle | `#f7aace` |
| `--ds-semantic-color-accent4-border-medium` | Accent4 › border › medium | `#e64588` |

## Accent 5
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent5-border-medium` | Accent5 › border › medium | `#bc7fcd` |
| `--ds-semantic-color-accent5-border-subtle` | Accent5 › border › subtle | `#dfbde9` |
| `--ds-semantic-color-accent5-content-subtle` | Accent5 › content › subtle | `#dfbde9` |
| `--ds-semantic-color-accent5-content-medium` | Accent5 › content › medium | `#bc7fcd` |
| `--ds-semantic-color-accent5-content-strong` | Often paired with accent5-surface-subtle for soft chips. | `#73407e` |
| `--ds-semantic-color-accent5-surface-subtlest` | Accent5 › surface › subtlest | `#f5eaf9` |
| `--ds-semantic-color-accent5-surface-subtle` | Often paired with accent5-content-strong for soft chips. | `#ead6f1` |
| `--ds-semantic-color-accent5-surface-medium` | Accent5 › surface › medium | `#bc7fcd` |

## Disabled
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-disabled-content-subtlest` | Disabled › content › subtlest | `#f9fafb` |
| `--ds-semantic-color-disabled-content-subtle` | Disabled › content › subtle | `#d1d5db` |
| `--ds-semantic-color-disabled-content-medium` | Often appears together with disabled-surface-medium and disabled-border-medium. | `#9ca3af` |
| `--ds-semantic-color-disabled-surface-medium` | Disabled › surface › medium | `#f9fafb` |
| `--ds-semantic-color-disabled-surface-strong` | Disabled › surface › strong | `#e5e7eb` |
| `--ds-semantic-color-disabled-border-medium` | Disabled › border › medium | `#e5e7eb` |

## Read-only
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-read-only-content-subtle` | Often sits on the read-only surface/border shell. | `#6b7280` |
| `--ds-semantic-color-read-only-content-subtlest` | Read-only › content › subtlest | `#9ca3af` |
| `--ds-semantic-color-read-only-content-medium` | Often paired with read-only-surface-medium and read-only-border-medium. | `#4b5563` |
| `--ds-semantic-color-read-only-surface-medium` | Read-only › surface › medium | `#f9fafb` |
| `--ds-semantic-color-read-only-surface-strong` | Read-only › surface › strong | `#9ca3af` |
| `--ds-semantic-color-read-only-border-strong` | Read-only › border › strong | `#9ca3af` |
| `--ds-semantic-color-read-only-border-medium` | Read-only › border › medium | `#d1d5db` |
| `--ds-semantic-color-read-only-border-subtle` | Read-only › border › subtle | `#f3f4f6` |

## Overlay
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-overlay-surface-medium` | Overlay › surface › medium | `rgba(17, 24, 39, 0.3)` |

## Layout — inverted
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-layout-invert-border-medium-default` | Layout-invert › border › medium-default | `rgba(255, 255, 255, 0.1)` |
| `--ds-semantic-color-layout-invert-border-strong-default` | Layout-invert › border › strong-default | `rgba(255, 255, 255, 0.25)` |
| `--ds-semantic-color-layout-invert-border-strongest-default` | Layout-invert › border › strongest-default | `#ffffff` |
| `--ds-semantic-color-layout-invert-content-subtle` | Example: pressed invert menu item. | `rgba(255, 255, 255, 0.7)` |
| `--ds-semantic-color-layout-invert-content-medium` | Example: tooltip, invert nav/menu. Also often used as the label on filled buttons (example: action, danger, or special variants). | `#ffffff` |
| `--ds-semantic-color-layout-invert-surface-medium-hover` | Example: invert side-nav, invert dropdown items, invert buttons. Often paired with layout-invert-content-medium (or content-subtle when pressed). | `#104a6a` |
| `--ds-semantic-color-layout-invert-surface-medium-default` | Example: tooltip, invert dropdown, invert side-nav, invert button variants. Often paired with layout-invert-content-medium. | `#0e3d59` |
| `--ds-semantic-color-layout-invert-surface-strong-default` | Layout-invert › surface › strong-default | `#114e70` |
| `--ds-semantic-color-layout-invert-surface-medium-selected` | Example: invert side-nav selected/opened. Dark counterpart of layout-surface-medium-selected. | `#0d567f` |

## Disabled — inverted
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-disabled-invert-content-medium` | Often used together with disabled-invert-surface-medium (invert counterpart of the disabled set). | `rgba(255, 255, 255, 0.3)` |
| `--ds-semantic-color-disabled-invert-surface-medium` | Often used together with disabled-invert-content-medium (invert counterpart of the disabled set). | `rgba(255, 255, 255, 0.1)` |

## Danger — inverted
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-danger-invert-content-subtle` | Used when the invert content is pressed. | `rgba(226, 101, 96, 0.7)` |
| `--ds-semantic-color-danger-invert-content-medium` | Example: destructive menu items. | `#e26560` |

## Action — inverted
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-action-invert-surface-subtle` | Action-invert › surface › subtle | `rgba(255, 255, 255, 0.16)` |
| `--ds-semantic-color-action-invert-surface-stronger` | Action-invert › surface › stronger | `rgba(255, 255, 255, 0.72)` |
| `--ds-semantic-color-action-invert-surface-subtlest` | Action-invert › surface › subtlest | `rgba(255, 255, 255, 0.08)` |
| `--ds-semantic-color-action-invert-surface-strong` | Action-invert › surface › strong | `rgba(255, 255, 255, 0.88)` |
| `--ds-semantic-color-action-invert-surface-medium` | Action-invert › surface › medium | `#ffffff` |
| `--ds-semantic-color-action-invert-border-medium` | Action-invert › border › medium | `#ffffff` |

## Neutral — inverted
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-neutral-invert-surface-medium-hover` | Neutral-invert › surface › medium-hover | `rgba(255, 255, 255, 0.88)` |
| `--ds-semantic-color-neutral-invert-surface-medium-active` | Neutral-invert › surface › medium-active | `rgba(255, 255, 255, 0.72)` |
| `--ds-semantic-color-neutral-invert-surface-medium-default` | Neutral-invert › surface › medium-default | `#ffffff` |
| `--ds-semantic-color-neutral-invert-border-subtlest` | Neutral-invert › border › subtlest | `rgba(255, 255, 255, 0.25)` |
| `--ds-semantic-color-neutral-invert-border-medium` | Neutral-invert › border › medium | `#ffffff` |
| `--ds-semantic-color-neutral-invert-content-medium` | Neutral-invert › content › medium | `#1f2937` |