Kommunikation, die im Alltag spürbar entlastet.

Textbausteine (Beispiele)

Direkter Schriftvergleich

Typografische Skala

Do / Don't Beispiele

Implementierungsbeispiele

Beispiel für saubere Text-Hierarchie mit den festgelegten Schriftrollen.

<section>
  <h2>Service-Level und Erreichbarkeit</h2>
  <p>Unser Support reagiert werktags innerhalb von zwei Stunden.</p>
  <button class="btn btn--primary">Anfrage senden</button>
</section>

Passende Token-Zuordnung in CSS.

:root {
  --ob-font-body: "Nunito", "Segoe UI", Arial, sans-serif;
  --ob-font-heading: "Nunito", "Segoe UI", Arial, sans-serif;
  --ob-font-strong: "URW Gothic L Demi", "Nunito", "Segoe UI", Arial, sans-serif;
}

h1 { font-family: var(--ob-font-strong); }
h2, h3, h4 { font-family: var(--ob-font-heading); }
body { font-family: var(--ob-font-body); }

Bildbearbeitung und Overlay

Nur dezente Korrekturen: Kontrast +5 bis +10, Sättigung maximal +6, kein harter Farbstich. Text auf Bildern immer mit Kontrastfläche (hell/dunkel) absichern.

Hero

Einsatz: immer als erste inhaltliche Komponente einer Seite, mit 1 Primär-CTA und maximal 1-2 Sekundäraktionen.

Card-Prinzip

Cards nutzen weiße Flächen, feine Linien und moderate Tiefe. Inhalte bleiben strukturiert, ohne visuelle Überladung. Keine dekorativen Verläufe in Content-Flächen.

MUSS-Checkliste (Release-Gate)

• Jede Seite MUSS genau eine h1, eine sinnvolle Überschriften-Hierarchie und semantische Landmarks (header, nav, main, footer) haben.
• Jede Seite MUSS ein korrektes lang-Attribut und einen eindeutigen, aussagekräftigen title haben.
• Alle Funktionen MÜSSEN vollständig per Tastatur bedienbar sein (Tab, Shift+Tab, Enter, Space, Escape) und dürfen keine Keyboard-Falle erzeugen.
• Der Fokus MUSS immer sichtbar sein, logisch durch die Seite laufen und darf nie per CSS entfernt werden.
• Textkontrast MUSS mindestens 4.5:1 betragen; Kontrast von UI-Komponenten/Fokusindikatoren MUSS mindestens 3:1 betragen.
• Information darf NIE nur über Farbe vermittelt werden; es MUSS immer ein zweiter Hinweis vorhanden sein (Text, Icon, Muster oder Statuslabel).
• Interaktive Elemente MÜSSEN einen eindeutigen Accessible Name haben (keine Buttons/Links nur mit "Hier" oder nur Icon ohne Label).
• Klick- und Touch-Ziele MÜSSEN mindestens 44 x 44 px gross sein oder gleichwertig grossen Abstand besitzen.
• Formulare MÜSSEN programmatisch verknüpfte Labels besitzen; Pflichtfelder, Fehler und Hilfetexte MÜSSEN für Screenreader auslesbar sein.
• Fehlermeldungen MÜSSEN konkret sagen, was falsch ist und wie es zu korrigieren ist; der Fokus MUSS nach Submit zur Fehlerzusammenfassung springen.
• Statusänderungen (z. B. "gespeichert", "geladen", "Fehler") MÜSSEN per aria-live oder gleichwertig angekündigt werden.
• Bilder mit Informationswert MÜSSEN sinnvolle Alt-Texte haben; rein dekorative Bilder MÜSSEN als dekorativ markiert sein.
• Video mit Sprache MUSS Untertitel haben; reine Audioinhalte MÜSSEN ein Transkript haben; Autoplay mit Ton ist nicht zulässig.
• Inhalte MÜSSEN bei 200 % Zoom und bei 320 CSS-Pixel Breite ohne horizontalen Pflicht-Scroll funktionieren (ausser technisch notwendige Ausnahmen wie Datentabellen).
• Animationen/Bewegungen MÜSSEN reduzierbar sein (prefers-reduced-motion); Inhalte dürfen nicht mehr als 3-mal pro Sekunde blinken.
• Authentifizierung darf keine unzumutbare kognitive Hürde erzeugen; es MUSS eine barrierefreie Alternative zu rein visuellen Aufgaben geben.
• Release-Freigabe nur, wenn Kernpfade bestanden sind: Navigation, Suche, Login, Formulare, Checkout, Zahlung und Fehlerszenarien.

Definition of Done: Kein Release ohne bestandenen Keyboard-Test, Screenreader-Schnelltest und dokumentierte Behebung aller kritischen A11y-Defekte.

:root {
  --ob-color-primary: #00A7E6;
  --ob-color-primary-soft: #33B9EB;
  --ob-color-primary-shade-1: #0086B8;
  --ob-color-primary-shade-2: #00648A;
  --ob-color-primary-shade-3: #00435C;
  --ob-color-primary-shade-4: #00212E;
  --ob-color-primary-tint-1: #33B9EB;
  --ob-color-primary-tint-2: #66CAF0;
  --ob-color-primary-tint-3: #99DCF5;
  --ob-color-primary-tint-4: #CCEDFA;
  --ob-color-accent: #F59C00;
  --ob-color-dark: #343537;
  --ob-color-slate: #343537;
  --ob-color-bg: #F5FBFE;
  --ob-color-surface: #FFFFFF;

  --ob-font-body: "Nunito", "Segoe UI", Arial, sans-serif;
  --ob-font-heading: "Nunito", "Segoe UI", Arial, sans-serif;
  --ob-font-strong: "URW Gothic L Demi", "Nunito", "Segoe UI", Arial, sans-serif;

  --ob-radius-sm: 10px;
  --ob-radius-md: 14px;
  --ob-radius-lg: 20px;

  --ob-space-2: 8px;
  --ob-space-3: 12px;
  --ob-space-4: 16px;
  --ob-space-6: 24px;
  --ob-space-8: 32px;
}

{
  "color": {
    "primary": "#00A7E6",
    "primarySoft": "#33B9EB",
    "primaryShades": ["#0086B8", "#00648A", "#00435C", "#00212E"],
    "primaryTints": ["#33B9EB", "#66CAF0", "#99DCF5", "#CCEDFA"],
    "accent": "#F59C00",
    "dark": "#343537",
    "slate": "#343537",
    "background": "#F5FBFE",
    "surface": "#FFFFFF"
  },
  "font": {
    "body": "Nunito",
    "heading": "Nunito",
    "strong": "URW Gothic L Demi"
  },
  "radius": {
    "sm": "10px",
    "md": "14px",
    "lg": "20px"
  }
}