Zum Inhalt springen
Zum Inhalt springen

Farben

Forest Green führt, Gold akzentuiert, Zinc trägt. Semantische Tokens abstrahieren Light/Dark — direkte Hex-Werte nur in Ausnahmen.

Forest (Primary)

Unser Markenkern. Forest-700 ist der klassische IVRY-Ton; die helleren Stufen tragen Flächen, die dunklen Typografie. Als Nuxt UI Farbe 'primary' registriert.

Gold (Accent)

Gold wird sparsam eingesetzt — für Upsells, Premium-Features, Erfolgsmomente. Niemals als Grundton. Registriert als Nuxt UI 'secondary'.

Zinc (Neutral)

Zinc löst das alte Stone-Neutral ab — kühler, moderner, besser für beide Color-Modes. Text, Border, Backgrounds basieren darauf.

Semantische Tokens (Light Mode)

Diese Tokens kapseln Light/Dark — im Code immer diese nutzen, nicht die Raw-Farben. Dark-Mode hat identische Namen mit invertierten Werten.

Status-Farben

Für Feedback-UI: Erfolg, Warnung, Fehler, Info. Werden in UAlerts, Badges, Form-Validierung verwendet.

Nutzung

Drei Arten, die Farben anzuwenden — je nach Kontext.

vue
<!-- Als Tailwind-Utility -->
<div class="bg-forest-700 text-gold-400">
  Forest-Hintergrund mit Gold-Text
</div>

<!-- Als semantisches Token (Light/Dark-aware) -->
<div class="bg-bg-elevated text-text-primary border border-border-default">
  Automatisch dark-mode-tauglich
</div>

<!-- Als CSS Custom Property -->
<style>
.box { background-color: var(--accent-primary); }
</style>