Frontend Stack

Framework

Design-Token-Flow

Figma (Untitled UI Pro Variables v8.0)
  ↓ Figma Dev Mode / Style Dictionary Export
CSS Custom Properties (design-tokens.css)
  ↓
Tailwind config (theme.extend) — optional
  ↓
Komponenten

Keine hardcodierten Hex-Werte in Komponenten — ausschließlich CSS Custom Properties.

CSS-Konventionen

• Logical Properties durchgehend: margin-inline-start statt margin-left
• Text-Alignment: start/end, nicht left/right
• Focus-Ring: outline: 2px solid #2BFEBB; outline-offset: 2px — nie outline: none
• Max-Width: max-width: 72ch für Body-Text

Animation-Implementierung

/* ✅ Erlaubt */
transform, opacity, grid-template-rows

/* ❌ Verboten — Layout-Thrash */
width, height, padding, margin

/* Easing */
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-enter:    cubic-bezier(0.22, 1, 0.36, 1);
--ease-exit:     cubic-bezier(0.55, 0, 1, 0.45);

/* Durations */
--dur-micro:   80ms;
--dur-short:  120ms;
--dur-medium: 220ms;
--dur-long:   350ms;

/* Reduced Motion — Pflicht */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Icon-Library

Single Source: Untitled UI Icons (seit §11.7, 2026-05)

npm install @untitled-ui/icons-react

Größen: 16 px (dense) · 20 px (default) · 24 px (hero/empty-state)
Heroicons-Migration: system.md §11.7

Browser-Support