Design tokens

What apps import

@anwalt.de/ci-tokens ships Corporate Identity values only — brand colours and the Kumbh Sans typeface. Everything else (neutrals, spacing, radii, shadows, form controls) comes from Nuxt UI / Tailwind in consuming apps.

This docs site adds reference tokens locally in docs-tokens.css so live specimens can render without Nuxt UI. Those variables are not published.

Exported CI tokens

Token	CSS variable	Source
Brand blue (slate primary)	--ci-color-brand-blue · --ci-color-primary	CI
Brand orange (accent)	--ci-color-brand-orange	CI
Link blue	--ci-color-text-link	CI
Sans typeface	--ci-font-sans	CI

See Colours for swatches and dark-mode behaviour.

Reference sections (docs + Nuxt UI)

These pages document values used on this site and in Nuxt UI apps. They are not part of the npm export unless an app explicitly overrides Nuxt UI defaults.

Section	Page	Typical source in apps
Neutral colours	Colours	Nuxt UI neutral: zinc
Typography scale	Typography	Nuxt UI / Tailwind defaults
Spacing, radii, shadows	Spacing & elevation	Nuxt UI / Tailwind defaults
Pattern specimens	Patterns	Nuxt UI components (UButton, UBadge, …)

Usage

Any app (no Tailwind):

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

.cta {
  background: var(--ci-color-brand-blue);
  font-family: var(--ci-font-sans);
}

Tailwind v4 + Nuxt UI apps (e.g. PLAI):

@import 'tailwindcss';
@import '@anwalt.de/ci-preset';
@import '@nuxt/ui';
/* App theme layer maps CI brand blue onto Nuxt UI primary scale */

The preset imports ci-tokens and exposes utilities such as bg-brand-blue, bg-brand-orange, text-text-link, and font-sans.

Naming

Published tokens use the --ci- prefix (Corporate Identity):

• --ci-color-brand-* — brand colours
• --ci-color-primary — semantic alias for brand blue
• --ci-color-text-link — link / interactive blue
• --ci-font-sans — corporate typeface

Pattern-specific variables (--ci-button-*, --ci-badge-*, …) exist on this docs site only.