---
theme: citeob2b
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 `citeob2b`.

## 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. | `#93b4fd` |
| `--ds-semantic-color-layout-border-medium-hover` | Layout › border › medium-hover | `#d1d5db` |
| `--ds-semantic-color-layout-border-strong-selected` | Layout › border › strong-selected | `#3b76f6` |
| `--ds-semantic-color-layout-border-subtle-default` | Layout › border › subtle-default | `#f3f4f6` |
| `--ds-semantic-color-layout-border-subtle-selected` | Layout › border › subtle-selected | `#bfd3fe` |
| `--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 | `#dbe6fe` |
| `--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. | `#eff4ff` |

## 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. | `subtheme` |
| `--ds-semantic-color-action-content-strong` | Action › content › strong | `subtheme` |
| `--ds-semantic-color-action-content-stronger` | Action › content › stronger | `subtheme` |
| `--ds-semantic-color-action-surface-strong` | Action › surface › strong | `subtheme` |
| `--ds-semantic-color-action-surface-subtlest` | Example: secondary button hover. Often paired with action-border-strong and action-content-strong. | `subtheme` |
| `--ds-semantic-color-action-surface-subtle` | Example: secondary button active/pressed. Often paired with action-border-stronger and action-content-stronger. | `subtheme` |
| `--ds-semantic-color-action-surface-medium` | Example: ds-button primary at rest. Hover/active states typically move to surface-strong/stronger. | `subtheme` |
| `--ds-semantic-color-action-surface-stronger` | Action › surface › stronger | `subtheme` |
| `--ds-semantic-color-action-border-strong` | Action › border › strong | `subtheme` |
| `--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). | `subtheme` |
| `--ds-semantic-color-action-border-stronger` | Action › border › stronger | `subtheme` |

## Action — special variant
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-action-special-surface-strong` | Example: ds-button special on hover. | `#2563eb` |
| `--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. | `#eff4ff` |
| `--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. | `#dbe6fe` |
| `--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. | `#3b76f6` |
| `--ds-semantic-color-action-special-surface-stronger` | Used on active/pressed state. | `#1d58d8` |
| `--ds-semantic-color-action-special-content-strong` | Example: links, outlined special buttons. | `#2563eb` |
| `--ds-semantic-color-action-special-content-stronger` | Used on press/active state. | `#1d58d8` |
| `--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. | `#3b76f6` |
| `--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. | `#3b76f6` |
| `--ds-semantic-color-action-special-border-strong` | Often paired with surface-subtlest and content-strong. | `#2563eb` |
| `--ds-semantic-color-action-special-border-stronger` | Used on press/active. Often paired with surface-subtle and content-stronger. | `#1d58d8` |

## 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 | `#86efac` |
| `--ds-semantic-color-success-border-medium` | Success › border › medium | `#22c55e` |
| `--ds-semantic-color-success-surface-subtlest` | Success › surface › subtlest | `#f0fdf4` |
| `--ds-semantic-color-success-surface-subtle` | Example: tag, icon-tile. Often paired with success-content-strong. | `#dcfce7` |
| `--ds-semantic-color-success-surface-medium` | Success › surface › medium | `#22c55e` |
| `--ds-semantic-color-success-content-strong` | Used on soft success surfaces. Often paired with success-surface-subtle. | `#15803d` |
| `--ds-semantic-color-success-content-medium` | Success › content › medium | `#16a34a` |

## Alert / Warning
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-alert-surface-subtlest` | Alert › surface › subtlest | `#fff7e7` |
| `--ds-semantic-color-alert-surface-medium` | Alert › surface › medium | `#e27f00` |
| `--ds-semantic-color-alert-surface-subtle` | Example: tag/callout fill. Often paired with alert-content-strong. | `#ffeece` |
| `--ds-semantic-color-alert-content-medium` | Alert › content › medium | `#e27f00` |
| `--ds-semantic-color-alert-content-strong` | Used on soft warning surfaces. Often paired with alert-surface-subtle. | `#7c380b` |
| `--ds-semantic-color-alert-border-subtle` | Alert › border › subtle | `#ffcd6c` |
| `--ds-semantic-color-alert-border-medium` | Alert › border › medium | `#e27f00` |

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

## Information
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-information-content-medium` | Information › content › medium | `#05b7ef` |
| `--ds-semantic-color-information-content-strong` | Used on soft info surfaces. Often paired with information-surface-subtle. | `#02658a` |
| `--ds-semantic-color-information-surface-subtlest` | Information › surface › subtlest | `#effaff` |
| `--ds-semantic-color-information-surface-subtle` | Example: info chip/callout fill. Often paired with information-content-strong. | `#dff4ff` |
| `--ds-semantic-color-information-surface-medium` | Information › surface › medium | `#05b7ef` |
| `--ds-semantic-color-information-border-subtle` | Information › border › subtle | `#78dfff` |
| `--ds-semantic-color-information-border-medium` | Information › border › medium | `#05b7ef` |

## Accent 1
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent1-content-medium` | Example: tiles, avatars, hero accents. | `subtheme` |
| `--ds-semantic-color-accent1-content-subtlest` | Accent1 › content › subtlest | `subtheme` |
| `--ds-semantic-color-accent1-content-subtle` | Accent1 › content › subtle | `subtheme` |
| `--ds-semantic-color-accent1-content-strong` | Often paired with accent1-surface-subtle for soft chips. | `subtheme` |
| `--ds-semantic-color-accent1-border-subtle` | Accent1 › border › subtle | `subtheme` |
| `--ds-semantic-color-accent1-border-medium` | Accent1 › border › medium | `#8b5cf6` |
| `--ds-semantic-color-accent1-surface-subtlest` | Accent1 › surface › subtlest | `subtheme` |
| `--ds-semantic-color-accent1-surface-subtle` | Often paired with accent1-content-strong for soft chips. | `subtheme` |
| `--ds-semantic-color-accent1-surface-medium` | Accent1 › surface › medium | `subtheme` |

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

## Accent 3
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent3-content-subtle` | Accent3 › content › subtle | `subtheme` |
| `--ds-semantic-color-accent3-content-medium` | Accent3 › content › medium | `subtheme` |
| `--ds-semantic-color-accent3-content-strong` | Often paired with accent3-surface-subtle for soft chips. | `subtheme` |
| `--ds-semantic-color-accent3-surface-subtlest` | Accent3 › surface › subtlest | `subtheme` |
| `--ds-semantic-color-accent3-surface-subtle` | Often paired with accent3-content-strong for soft chips. | `subtheme` |
| `--ds-semantic-color-accent3-surface-medium` | Accent3 › surface › medium | `subtheme` |
| `--ds-semantic-color-accent3-border-subtle` | Accent3 › border › subtle | `subtheme` |
| `--ds-semantic-color-accent3-border-medium` | Accent3 › border › medium | `subtheme` |

## Accent 4
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent4-surface-subtle` | Often paired with accent4-content-strong for soft chips. | `#ffe6d5` |
| `--ds-semantic-color-accent4-surface-subtlest` | Accent4 › surface › subtlest | `#fff4ed` |
| `--ds-semantic-color-accent4-surface-medium` | Accent4 › surface › medium | `#f97316` |
| `--ds-semantic-color-accent4-content-subtle` | Accent4 › content › subtle | `#fdac74` |
| `--ds-semantic-color-accent4-content-medium` | Accent4 › content › medium | `#f97316` |
| `--ds-semantic-color-accent4-content-strong` | Often paired with accent4-surface-subtle for soft chips. | `#bb3f0c` |
| `--ds-semantic-color-accent4-border-subtle` | Accent4 › border › subtle | `#fdac74` |
| `--ds-semantic-color-accent4-border-medium` | Accent4 › border › medium | `#f97316` |

## Accent 5
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-accent5-border-medium` | Accent5 › border › medium | `#ffd500` |
| `--ds-semantic-color-accent5-border-subtle` | Accent5 › border › subtle | `#ffe40d` |
| `--ds-semantic-color-accent5-content-subtle` | Accent5 › content › subtle | `#fff341` |
| `--ds-semantic-color-accent5-content-medium` | Accent5 › content › medium | `#ffd500` |
| `--ds-semantic-color-accent5-content-strong` | Often paired with accent5-surface-subtle for soft chips. | `#996805` |
| `--ds-semantic-color-accent5-surface-subtlest` | Accent5 › surface › subtlest | `#fefedc` |
| `--ds-semantic-color-accent5-surface-subtle` | Often paired with accent5-content-strong for soft chips. | `#fcfdb4` |
| `--ds-semantic-color-accent5-surface-medium` | Accent5 › surface › medium | `#ffd500` |

## Disabled
| Token | Meaning / Usage | Value |
|---|---|---|
| `--ds-semantic-color-disabled-content-subtlest` | Disabled › content › subtlest | `#f9fafb` |
| `--ds-semantic-color-disabled-content-subtle` | Disabled › content › subtle | `#e5e7eb` |
| `--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). | `#184378` |
| `--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. | `#153666` |
| `--ds-semantic-color-layout-invert-surface-strong-default` | Layout-invert › surface › strong-default | `#19487e` |
| `--ds-semantic-color-layout-invert-surface-medium-selected` | Example: invert side-nav selected/opened. Dark counterpart of layout-surface-medium-selected. | `#1c5793` |

## 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(253, 126, 108, 0.7)` |
| `--ds-semantic-color-danger-invert-content-medium` | Example: destructive menu items. | `#fd7e6c` |

## 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` |