DESIGN SYSTEM & LIVING STYLEGUIDE

VBCI UI Styleguide

Das modulare, barrierefreie und intrinsisch-responsive Design-System des Vereins zur Bekämpfung chronischer Infektionen e.V.

1. Farbpalette & Semantische Tokens

Alle Farben erfüllen die strengen WCAG 2.2 Kontrastanforderungen (AA / AAA) für optimale Lesbarkeit auf allen Bildschirmen.

Primary (Waldgrün) #2C4C3E / var(--primary) Kontrast 8.7:1 (AAA)

Primary Dark (Tiefgrün) #1E352B / var(--primary-dark) Kontrast 12.8:1 (AAA)

Accent Warm (Terracotta) #A8532C / var(--accent-warm) Kontrast 4.9:1 (AA)

Accent Dark (Kupferbraun) #73341C / var(--accent-text) Kontrast 8.5:1 (AAA)

Secondary (Creme) #F3EFEA / var(--secondary) Flächen & Karten

Background (Warmweiß) #FCFBF9 / var(--background) Seitenhintergrund

2. Button-System & Varianten

Vollständig standardisierte Button-Hierarchien mit aktiven Tastatur- und Touch-Zuständen (:hover, :active, :focus-visible, :disabled).

2.1 Varianten (Styles)

2.2 Buttons auf dunklen / Gradienten-Hintergründen

2.3 Größen & Formen

2.4 Buttons mit Icons

E-Mail senden PDF Download Spenden via PayPal

3. Callouts & Alert-Boxen

Strukturierte Hinweis- und Warnhinweisboxen zur visuellen Führung von Patienten und Lesern.

Information: Dies ist ein allgemeiner Information-Callout im Design-System des VBCI e.V.

Medizinischer Hinweis: Die auf dieser Website bereitgestellten Informationen dienen der Aufklärung und ersetzen keine ärztliche Diagnose oder Therapie.

Erfolgreich: Ihre Angaben wurden erfolgreich verarbeitet und übermittelt.

Wichtiger Warnhinweis: Bei akuten Notfällen oder lebensbedrohlichen Zuständen wählen Sie bitte unverzüglich den Notruf (112).

4. Badges & Status-Chips

Standard Badge Primary Badge Warm Accent Badge

5. Karten & Container

Basis-Karte (.card)

Sanfter Schlagschatten, 1px Border und weiche Ecken nach Design-System.

Aktion ausführen

Secondary Card

Verwendet sanften Creme-Hintergrund für sekundäre Inhalte und Teaser.

Mehr erfahren

Accent Card

Mit farblicher Kante zur Kennzeichnung besonderer Veröffentlichungen oder Forschung.

Publikation ansehen

Interaktiver Demo-Zielbereich

Dies ist die definierte Ziel-Fläche für alle interaktiven #demo-Beispiellinks und Buttons innerhalb dieses Styleguides. Bei Aktivierung eines Demo-Links navigiert der Browser direkt zu diesem barrierefreien Fokus- und Ansichtsbereich.

Ankerziel aktiv: #demo Zurück nach oben