Colours

Brand colours

CI export — shipped in @anwalt.de/ci-tokens.

Brand slate (#385273) is the primary brand colour and main CTA. Orange is an accent (badges, optional highlight buttons). Link blue is for inline links, focus rings, and informational accents.

Token	CSS variable	Hex
Brand blue (slate) — primary	`--ci-color-brand-blue` · `--ci-color-primary`	`#385273`
Brand orange — accent	`--ci-color-brand-orange`	`#fd5f04`
Link blue	`--ci-color-text-link`	`#155dfc`

Neutral colours

Nuxt UI — reference values on this site (docs-tokens.css). In PLAI and other Nuxt apps, use Nuxt UI semantic colours (text-default, text-muted, bg-default, border-default) backed by the zinc neutral scale.

Token	Reference variable (docs only)	Hex
Text	`--ci-color-text`	`#18181b` (zinc-900)
Text muted	`--ci-color-text-muted`	`#71717b` (zinc-500)
Surface	`--ci-color-surface`	`#ffffff`
Surface muted	`--ci-color-surface-muted`	`#f4f4f5` (zinc-100)
Border	`--ci-color-border`	`#e4e4e7` (zinc-200)

Dark mode

CI export adjusts link blue in dark mode. Nuxt UI handles neutral inversion via Color Mode in apps.

Preview

	Brand orange (unchanged)	`--ci-color-brand-orange`
	Text (docs reference)	`--ci-color-text` → `#fafafa`
	Surface (docs reference)	`--ci-color-surface` → `#18181b`
	Text link (CI export)	`--ci-color-text-link` → `#60a5fa`

<!-- CI link colour in dark mode -->
<html data-ci-theme="dark"></html>

Usage

@import '@anwalt.de/ci-tokens/tokens.css';

.cta {
  color: var(--ci-color-brand-blue);
}

For surfaces and borders in Nuxt apps, prefer Nuxt UI utilities (bg-default, border-default) instead of re-importing neutral tokens.