Guides / Theming & design tokens

Theming & design tokens

A complete light-first visual language with local token overrides and a deliberate dark surface mode.

Core tokens

[data-xsh-ui] {
  --xsh-primary: #244ed8;
  --xsh-ink: #17213a;
  --xsh-surface: #fff;
  --xsh-canvas: #f7f9fc;
  --xsh-line: #e4e9f1;
  --xsh-radius: 11px;
  --xsh-focus: #3b6eff;
}

Tokens apply only inside a declared UI root. Override them on the same root or a more specific nested selector.

Semantic colors

Primary
#244ed8

Ink
#17213a

Canvas
#f7f9fc

Success
#138a60

Danger
#c33545

Warning
#9a5f0d

Info
#2464a3

Line
#e4e9f1

Dark surfaces

<section data-xsh-ui data-xsh-theme="dark">
  <div class="xsh-card">
    <div class="xsh-card__body">Dark-theme card</div>
  </div>
</section>

The default documentation remains light. Dark surfaces are opt-in, including nested themed sections. Confirm contrast after customizing tokens.

Motion preferences

Transitions respond to prefers-reduced-motion: reduce. Interaction feedback remains visible without dependence on animation.