Farbpalette

Unsere Markenfarben definieren die visuelle Identität von Vitale Arbeitskultur.

Verwendung

Token	Wert	Verwendung
--color-brand-primary	#efb708	Primäre Aktionen, Highlights, Badges
--color-brand-secondary	#21474d	Header, Footer, Texte
--color-brand-accent	#a63634	Akzente, Links, wichtige Elemente
--color-neutral-gray	#606060	Beschreibungen, Sekundärtexte

Typografie

Wir verwenden die Schriftart Trenda für alle Texte.

Schriftgrößen

Token	Größe	Verwendung
--font-size-xs	12px	Labels, Hinweise
--font-size-sm	14px	Kleine Texte, Beschreibungen
--font-size-base	18px	Fließtext, Standard
--font-size-lg	40px	Große Überschriften
--font-size-xl	60px	Hauptüberschriften
--font-size-2xl	100px	Hero-Titel

Schriftstärken

Token	Wert	Verwendung
--font-weight-light	300	Elegante Überschriften, Display-Text (2rem+)
--font-weight-medium	500	Fließtext, Standard-Inhalt
--font-weight-bold	700	Hervorhebungen, Buttons, wichtige Elemente
--font-weight-ultra-bold	900	Hero-Titel, maximale Wirkung

Abstände (Spacing)

Konsistente Abstände schaffen visuelle Harmonie. Unser System bietet zwei Varianten:

Primäre Spacing-Tokens (rem)

Verwende diese in 95% der Fälle. Rem-basierte Abstände sind konsistent und vorhersagbar – ideal für Layouts, Grids und strukturelle Elemente.

Token	Wert	Verwendung
--spacing-narrow	3rem	Standard: Kompakte Bereiche, Section-Padding, enge Layouts
--spacing-default	5rem	Standard: Große Sections, Hero-Bereiche, weite Layouts

Typografie-relative Tokens (em) – Optional

Nur bei Bedarf verwenden. Em-basierte Abstände skalieren mit der Schriftgröße – nützlich für textlastige Dokumente, Zitate oder wenn Spacing proportional zur Textgröße sein soll.

Token	Wert	Verwendung
--spacing-text-narrow	3em	Selten: Abstände in Blockquotes, Testimonials mit variablen Schriftgrößen
--spacing-text-default	5em	Selten: Abstände in textlastigen Dokumenten, wo Spacing proportional sein soll

Komponenten

Buttons

Cards

Badges

Design Tokens verwenden

Alle Design Tokens sind als CSS Custom Properties definiert und können direkt verwendet werden:

.my-element {
  color: var(--color-brand-primary);
  font-size: var(--font-size-base);
  padding: var(--spacing-default);
  font-weight: var(--font-weight-bold);
}

CSS-Dateien einbinden

<!-- Design Tokens -->
<link rel="stylesheet" href="css/va-tokens.css">
<!-- Base Styles -->
<link rel="stylesheet" href="css/va-styles.css">

Brand Assets

Logos und Icons für die Verwendung in Anwendungen und Dokumenten. Klicke auf "URL kopieren" um die URL in die Zwischenablage zu kopieren.