VA Design System

Styleguide und Design Tokens für Vitale Arbeitskultur

Farbpalette

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

Primary
#efb708
Secondary
#21474d
Accent
#a63634
Gray
#606060

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.

Heading 1 - Titel

Font: Trenda Medium 60px / Line-height: 1.2

Heading 2 - Untertitel

Font: Trenda Medium 60px / Line-height: 1.2

Body Text - Dies ist ein Beispiel für Fließtext. Unsere Standardschriftgröße beträgt 18px mit einem Zeilenabstand von 1.5 für optimale Lesbarkeit.

Font: Trenda Medium 18px / Line-height: 1.5

Highlight Text - Hervorgehobener Text mit Trenda Bold für wichtige Informationen.

Font: Trenda Bold 18px / Line-height: 1.5

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

Abstände (Spacing)

Konsistente Abstände schaffen visuelle Harmonie.

Narrow Spacing (3em)
Default Spacing (5em)
Token Wert Verwendung
--spacing-narrow 3em Kompakte Bereiche, enge Layouts
--spacing-default 5em Standard-Abschnitte, normale Layouts

Komponenten

Buttons

Cards

Card Titel

Dies ist eine Beispiel-Card. Cards werden verwendet, um Inhalte zu gruppieren und visuell abzugrenzen.

Badges

ZUKUNFT AKTUELL WICHTIG

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">