Vibekit

Design System & Styling

DESIGN.md, Tailwind CSS v4 Theme-Tokens und Dark Mode Konfiguration.

Die Datei DESIGN.md im Projektstamm ist die verbindliche Quelle der Wahrheit für das visuelle Erscheinungsbild des Produkts. Sie enthält oben Design-Tokens als YAML und darunter klare Layout- und Interaktionsregeln.

Wie die Teile zusammenhängen

  • DESIGN.md: Hier werden alle gestalterischen Entscheidungen getroffen.
  • apps/web/app/globals.css: Überträgt diese Entscheidungen in CSS-Variablen (:root, .dark) und den Tailwind v4 @theme-Block.
  • apps/web/modules/ui/components: Enthält wiederverwendbare Basiskomponenten (Button, Card, Dialog), die ausschließlich diese Tokens nutzen.

Fügen Sie niemals rohe Hex-Farben in Komponenten ein. Nutzen Sie semantische Klassen wie bg-primary, text-foreground, border-border und ring-ring.

On this page