Getting started

The design system ships as two npm packages:

Package	Use when
`@anwalt.de/ci-tokens`	Any app — Corporate Identity export (brand colours + font)
`@anwalt.de/ci-preset`	Tailwind CSS v4 apps — maps CI tokens into `@theme`

Nuxt UI is the base design system in production apps (neutrals, spacing, components). Import CI tokens on top — do not duplicate Nuxt UI scales in your app unless you have an explicit override.

Install

pnpm add @anwalt.de/ci-tokens
# Tailwind apps only:
pnpm add @anwalt.de/ci-preset

Packages are published to the organisation npm registry (CodeArtifact). Configure your package manager to use that registry before installing.

Use tokens (no Tailwind)

Import the CSS file once at your app entry:

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

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

Load Kumbh Sans via @fontsource/kumbh-sans, @nuxt/fonts, Google Fonts, or self-hosted files.

Use the Tailwind preset (Nuxt UI apps)

@import 'tailwindcss';
@import '@anwalt.de/ci-preset';
@import '@nuxt/ui';

The preset exposes CI utilities such as bg-brand-blue, bg-brand-orange, text-text-link, and font-sans. Map brand blue in an app theme file — PLAI uses --color-ui-primary (text-ui-primary) while Nuxt UI primary stays orange.

Spacing, radii, neutrals, and component styling come from Nuxt UI defaults unless your app overrides them.

Legacy colour names

@anwalt.de/ci-preset maps older Tailwind utility names to canonical CI tokens:

Legacy utility	Use instead
`brand-blue-dark`	`brand-blue` → `--ci-color-brand-blue`
`accent-blue`	`text-link` → `--ci-color-text-link`

Prefer the canonical names in new code.

Migrating from the broad token export

Older @anwalt.de/ci-tokens / @anwalt.de/ci-preset builds exported neutrals, spacing, type scale, radii, and shadows as --ci-* / Tailwind theme keys. The slim CI export keeps only brand colours + Kumbh Sans. Everything else belongs to Nuxt UI / Tailwind (or your app theme).

Removed from the npm packages

Was in old export	Use instead
`--ci-color-text`, `--ci-color-text-muted`	Nuxt UI / Tailwind text colours (`text-default`, `text-muted`, …) or app tokens
`--ci-color-surface`, `--ci-color-surface-muted`, `--ci-color-border`	Nuxt UI surface / border tokens
`--ci-spacing-`, `--ci-radius-`, `--ci-shadow-*`	Tailwind / Nuxt UI spacing & radius scales
`--ci-font-size-`, `--ci-font-weight-`, `--ci-line-height-*`	Tailwind type scale
Preset theme keys `--color-text`, `--color-text-muted`, `--color-surface`, …	Same as above — do not expect `text-text` / `bg-surface` from `ci-preset`
Preset `--text-`, `--spacing-`, `--radius-`, `--shadow-`, `--breakpoint-*`	Tailwind / Nuxt UI defaults

Docs-site specimens still use those names via local docs-tokens.css — that file is not published.

Consumer checklist

Import order: tailwindcss → @anwalt.de/ci-preset → @nuxt/ui → app theme.
Grep for removed CSS variables / utilities (--ci-color-text, text-text-muted, bg-surface, …) and replace with Nuxt UI or app theme tokens.
Keep using CI utilities that remain: bg-brand-blue, bg-brand-orange, text-text-link, font-sans.

PLAI audit (frontend-plai)

PLAI already layers Nuxt UI + a local theme.css (--ui-text-muted, --ui-primary, …). App code uses Nuxt UI classes such as text-muted, not the removed preset keys (text-text, bg-surface). The slim preset is compatible with the ANW-6846 pilot path; no PLAI call-site rewrite is required for the removed neutrals/spacing maps.

Dark mode

CI link colour adjusts in dark mode:

<html data-ci-theme="dark"></html>

Neutral dark mode is handled by Nuxt UI Color Mode in apps. See Colours.

Framework mapping

Pattern pages on this site are framework-agnostic reference specimens — HTML markup, CI CSS classes, and minimal vanilla JS where interaction is required (Modal, Tooltip, Tabs).

They define the visual and interaction contract (variants, accessibility, keyboard behaviour). Consuming apps should not copy-paste ci-* markup into production templates.

Reading token sources

Live pattern examples show small badges:

Badge	Meaning
CI	Corporate Identity — exported in `@anwalt.de/ci-tokens` (brand blue, brand orange, link blue, Kumbh Sans)
Nuxt UI	Framework default — zinc neutrals, spacing, radii, component structure

Example: a primary blue button is CI (--ci-color-brand-blue). An outline button is mostly Nuxt UI neutrals with CI only if you choose a brand-coloured variant.

This site shows	Use in Nuxt / PLAI instead
`ci-button`	`UButton` + `@anwalt.de/ci-preset`
`ci-modal`	`UModal` — Escape closes, focus returns to trigger