Spacing & elevation

Nuxt UI — values below are docs reference tokens (docs-tokens.css), aligned with Tailwind defaults. In Nuxt apps use Tailwind spacing/radius/shadow utilities and Nuxt UI component defaults — they are not exported from @anwalt.de/ci-tokens.

Spacing

Token	CSS variable	Value	Source
1	--ci-spacing-1	0.25rem (4px)	Nuxt UI
2	--ci-spacing-2	0.5rem (8px)	Nuxt UI
3	--ci-spacing-3	0.75rem (12px)	Nuxt UI
4	--ci-spacing-4	1rem (16px)	Nuxt UI
6	--ci-spacing-6	1.5rem (24px)	Nuxt UI
8	--ci-spacing-8	2rem (32px)	Nuxt UI
12	--ci-spacing-12	3rem (48px)	Nuxt UI

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--ci-spacing-4);
  padding: var(--ci-spacing-6);
}

Border radii

Preview	Token	CSS variable	Value	Source
	Small	--ci-radius-sm	0.25rem	Nuxt UI
	Medium	--ci-radius-md	0.375rem	Nuxt UI
	Large	--ci-radius-lg	0.5rem	Nuxt UI
	Full (pill)	--ci-radius-full	9999px	Nuxt UI

Shadows

Token	CSS variable	Use	Source
Small	--ci-shadow-sm	Subtle elevation — inputs, chips	Nuxt UI
Medium	--ci-shadow-md	Cards, dropdowns	Nuxt UI

shadow-sm

shadow-md

Breakpoints

Reference values for custom media queries. In Nuxt apps use Tailwind sm–xl breakpoints (Nuxt UI defaults).

Name	CSS variable (docs)	Min width	Source
sm	--ci-breakpoint-sm	640px	Nuxt UI
md	--ci-breakpoint-md	768px	Nuxt UI
lg	--ci-breakpoint-lg	1024px	Nuxt UI
xl	--ci-breakpoint-xl	1280px	Nuxt UI

@media (min-width: 768px) {
  .sidebar {
    width: 16rem;
  }
}

/* or with the token: */
@media (min-width: var(--ci-breakpoint-md)) {
  .sidebar {
    width: 16rem;
  }
}