Colour

The brand accent is indigo on slate neutrals. Use semantic --s-color-* roles in your own code, not palette values. Swatches on this page follow the live theme, so switch the site theme to see both branches.

Semantic roles

Backgrounds

Role	Use
`--s-color-bg-app`	Page canvas
`--s-color-bg-surface`	Cards, inputs, popovers
`--s-color-bg-surface-hover`	Hover fill, neutral badge and tag, code
`--s-color-bg-interactive`	Primary action fill
`--s-color-bg-interactive-hover`	Primary hover
`--s-color-bg-inverse`	Tooltips and other inverse surfaces
`--s-color-bg-backdrop`	Dialog and drawer backdrop

Token	Value	Preview
`--s-color-bg-app`	Light `#f8fafc` Dark `#020617`
`--s-color-bg-surface`	Light `#ffffff` Dark `#0f172a`
`--s-color-bg-surface-hover`	Light `#f1f5f9` Dark `#1e293b`
`--s-color-bg-interactive`	Light `#4f46e5` Dark `#818cf8`
`--s-color-bg-interactive-hover`	Light `#4338ca` Dark `#a5b4fc`
`--s-color-bg-inverse`	Light `#0f172a` Dark `#f1f5f9`
`--s-color-bg-backdrop`	Light `color-mix(in srgb, #0f172a 50%, transparent)` Dark `color-mix(in srgb, #020617 70%, transparent)`

Colour previews use the live theme. Switch the site theme to see the dark values.

Text

Role	Use
`--s-color-text-primary`	Body and headings
`--s-color-text-secondary`	Supporting text
`--s-color-text-tertiary`	Placeholders, hints, metadata
`--s-color-text-on-interactive`	Text and icons on primary
`--s-color-text-inverse`	Text on `--s-color-bg-inverse`
`--s-color-text-link`, `-hover`	Link text and its hover

Token	Value	Preview
`--s-color-text-primary`	Light `#0f172a` Dark `#f8fafc`
`--s-color-text-secondary`	Light `#475569` Dark `#cbd5e1`
`--s-color-text-tertiary`	Light `#5d6b82` Dark `#94a3b8`
`--s-color-text-on-interactive`	Light `#ffffff` Dark `#020617`
`--s-color-text-inverse`	Light `#f8fafc` Dark `#0f172a`
`--s-color-text-link`	Light `#4f46e5` Dark `#818cf8`
`--s-color-text-link-hover`	Light `#4338ca` Dark `#a5b4fc`

Colour previews use the live theme. Switch the site theme to see the dark values.

Borders

Role	Use
`--s-color-border-subtle`	Decorative dividers and card outlines only
`--s-color-border-strong`	Decorative emphasis, not a control boundary
`--s-color-border-control`	Form-control boundaries and slider or switch tracks (at least 3:1)
`--s-color-border-interactive`	Focus ring and stitch lines (at least 3:1)

Never use border-subtle or border-strong as the only boundary of a control. They are below 3:1 by design. Use border-control.

Token	Value	Preview
`--s-color-border-subtle`	Light `#e2e8f0` Dark `#1e293b`
`--s-color-border-strong`	Light `#cbd5e1` Dark `#334155`
`--s-color-border-control`	`#64748b`
`--s-color-border-interactive`	Light `#6366f1` Dark `#818cf8`

Colour previews use the live theme. Switch the site theme to see the dark values.

Accent effects

Used by the holo glow and the stitch grid. They are translucent mixes of indigo and do not change per theme. See CSS utilities.

Token	Value	Preview
`--s-color-accent-glow`	`color-mix(in srgb, #6366f1 40%, transparent)`
`--s-color-accent-grid`	`color-mix(in srgb, #6366f1 8%, transparent)`
`--s-color-accent-grid-strong`	`color-mix(in srgb, #6366f1 20%, transparent)`

Status colours

Each status has a foreground token for text, icons and borders, and a -bg token for a solid tint fill. Put the foreground on its own -bg (badges, tags, alerts), or on a surface or app background. Do not tint with alpha, because the -bg tokens are solid and keep contrast predictable.

Success

Warning

Danger

Info

<holo-badge variant="success">Success</holo-badge>
<holo-badge variant="warning">Warning</holo-badge>
<holo-badge variant="danger">Danger</holo-badge>
<holo-badge variant="info">Info</holo-badge>

Token	Value	Preview
`--s-color-status-success`	Light `#047857` Dark `#34d399`
`--s-color-status-success-bg`	Light `#ecfdf5` Dark `#022c22`
`--s-color-status-warning`	Light `#b45309` Dark `#fbbf24`
`--s-color-status-warning-bg`	Light `#fffbeb` Dark `#451a03`
`--s-color-status-danger`	Light `#b91c1c` Dark `#f87171`
`--s-color-status-danger-bg`	Light `#fef2f2` Dark `#450a0a`
`--s-color-status-info`	Light `#1d4ed8` Dark `#60a5fa`
`--s-color-status-info-bg`	Light `#eff6ff` Dark `#172554`

Colour previews use the live theme. Switch the site theme to see the dark values.

Do not use the deprecated --p-color-success, --p-color-warning, --p-color-danger and --p-color-info aliases. They fail AA as text.

Palettes

Palettes are primitives. They are listed to show where semantic values come from, not for direct use.

Neutral (slate)

--p-color-neutral-550 is a Hololink UI addition between slate 500 and 600. It is the lightest slate that keeps tertiary text at 4.5:1 on --s-color-bg-surface-hover.

Token	Value	Preview
`--p-color-neutral-0`	`#ffffff`
`--p-color-neutral-50`	`#f8fafc`
`--p-color-neutral-100`	`#f1f5f9`
`--p-color-neutral-200`	`#e2e8f0`
`--p-color-neutral-300`	`#cbd5e1`
`--p-color-neutral-400`	`#94a3b8`
`--p-color-neutral-500`	`#64748b`
`--p-color-neutral-550`	`#5d6b82`
`--p-color-neutral-600`	`#475569`
`--p-color-neutral-700`	`#334155`
`--p-color-neutral-800`	`#1e293b`
`--p-color-neutral-900`	`#0f172a`
`--p-color-neutral-950`	`#020617`

Indigo (brand)

Token	Value	Preview
`--p-color-indigo-50`	`#eef2ff`
`--p-color-indigo-100`	`#e0e7ff`
`--p-color-indigo-200`	`#c7d2fe`
`--p-color-indigo-300`	`#a5b4fc`
`--p-color-indigo-400`	`#818cf8`
`--p-color-indigo-500`	`#6366f1`
`--p-color-indigo-600`	`#4f46e5`
`--p-color-indigo-700`	`#4338ca`
`--p-color-indigo-800`	`#3730a3`
`--p-color-indigo-900`	`#312e81`
`--p-color-indigo-950`	`#1e1b4b`

Status scales

Emerald, amber, red and blue, matching the Tailwind values.

Token	Value	Preview
`--p-color-green-50`	`#ecfdf5`
`--p-color-green-400`	`#34d399`
`--p-color-green-500`	`#10b981`
`--p-color-green-700`	`#047857`
`--p-color-green-950`	`#022c22`

Token	Value	Preview
`--p-color-amber-50`	`#fffbeb`
`--p-color-amber-400`	`#fbbf24`
`--p-color-amber-500`	`#f59e0b`
`--p-color-amber-700`	`#b45309`
`--p-color-amber-950`	`#451a03`

Token	Value	Preview
`--p-color-red-50`	`#fef2f2`
`--p-color-red-400`	`#f87171`
`--p-color-red-500`	`#ef4444`
`--p-color-red-700`	`#b91c1c`
`--p-color-red-950`	`#450a0a`

Token	Value	Preview
`--p-color-blue-50`	`#eff6ff`
`--p-color-blue-400`	`#60a5fa`
`--p-color-blue-500`	`#3b82f6`
`--p-color-blue-700`	`#1d4ed8`
`--p-color-blue-950`	`#172554`

Dark theme

Each themed colour is declared once with light-dark(<light>, <dark>). The branch is chosen by the computed color-scheme of the element using the token.

:root has color-scheme: light dark, so the OS preference decides by default.
data-theme="light" or data-theme="dark" forces a scheme on <html> or any container.
color-scheme inherits, so the choice reaches Shadow DOM and nested containers can flip it locally.

In dark, the interactive fill moves to a lighter indigo (400 and 300) and --s-color-text-on-interactive becomes near-black, so contrast holds. See Theming and dark mode for how to force a scheme and re-brand.

Contrast

All semantic colour pairings meet WCAG 2.2 AA in both themes. A unit test (packages/ui/src/styles/tokens.unit.test.ts) parses tokens.css, resolves var() and light-dark(), and fails CI if a pairing drops below its threshold.

Threshold	Pairings
4.5:1	`text-primary`, `text-secondary` and `text-tertiary` on surface, app and surface-hover. `text-link` on surface and app. `text-on-interactive` on `bg-interactive` and its hover. `text-inverse` on `bg-inverse`. Each status colour on surface, app and its own `-bg`.
3:1	`border-control` and `border-interactive` on surface and app. `bg-interactive` on surface.

If you add a token pairing, add it to that test in the same change.