Design System

Icon / Favicon — favicon.svg · 256 × 256

Logo Standard (gestapelt) — logo.svg · 314 × 154

Logo Alt (horizontal) — logo-alt.svg · 583 × 118

Abstände · 4 px Grid

Border Radius

Rahmen (Borders)

Schatten (Shadows)

Focus · Adaptive Ring — Cyan-Family · 3-Layer-Stack

Stacked-Shadow-Pattern: 2 px page-bg Band → 2 px Cyan-Ring → 4 px Halo @ 0.20. Eine Regel (:focus-visible) für alle Oberflächen — der Ring passt sich dem Hintergrund an. WCAG 2.4.7 AA / 2.4.11 AA / 2.4.13 AAA.

Hinweis für spätere Komponenten-Arbeit. Auf surface--teal sind --color-accent und --color-focus-ring auf Weiß überschrieben. Das funktioniert für einfache Buttons und Links gut — bei komplexeren Kombinationen (z. B. Badge auf Button, Icon-Button, aktive Nav-Items) sollte man prüfen, ob Weiß-auf-Weiß-Konstellationen entstehen oder ob weitere Token-Overrides nötig sind.

Motion · Easing + Duration + Reduced-Motion

Breakpoints · Mobile-first

--bp-sm --bp-md --bp-lg --bp-xl · Gutters: --spacing-sm / --spacing-lg / --spacing-xl (8 / 24 / 32 px)

Container-Breiten

OpenType-Features

Das System setzt font-variant-numeric: slashed-zero global auf body. Mono-Elemente und Ziffern in Komponenten erhalten zusätzlich tabular-nums.

Display im Kontext · t-accent auf drei Surfaces

.t-accent (IBM Plex Serif Italic Bold) als einzige Akzent-Stimme der Marke. Regel: eine italic-Geste pro View — entweder inline im Heading oder als ganzer Pull-Quote-Satz, nie zwei gleichzeitig. Phrase-Level, nie mitten im Wort.

Fließtext im Kontext · Body + Headings auf zwei Hintergründen

Realistische Anordnung — h3, h4, Body und Small auf Paper und Card-Bg mit annotierten Kontrastverhältnissen.

Brand-Subset · 24 Icons

Nur diese Icons für neue UI-Elemente verwenden — Ergänzungen nach Abstimmung.

• eye
• ear
• hand-pointing
• magnifying-glass
• check-circle
• warning
• info
• x-circle
• file-text
• list-checks
• keyboard
• code
• graduation-cap
• chat-circle-text
• user
• arrow-right
• certificate
• globe
• device-mobile
• headphones
• envelope
• chart-bar
• shield-check
• lightbulb

Icon-Weights · Regular · Bold · Fill (Light/Thin/Duotone unbenutzt)

Icon-Größen

Barrierefreiheit & Verwendung

Inline-Code

Tastenkombinationen — <kbd>

Hervorhebung — <mark>

Ausgabe & Variablen — <samp>, <var>

Varianten

Größen

Als Link · Deaktiviert

Badges — gefüllt

Badges — Outline

Badges — mit Dot

Badges — Outline mit Dot · Status

Tags

Checkboxen, Radio & Toggle

Form-Validierung · 8 Zustände

Alle States eines E-Mail-Feldes — Default, Focus, Error, Success, Required, Disabled, Submit-Fehler-Summary und Inline-Confirmation.

Standard mit Caption

/* Semantische Farbtokens */
--color-accent: light-dark(var(--_teal-600), var(--_teal-400));
--color-text:   light-dark(var(--_gray-950), var(--_paper));
--color-bg:     light-dark(var(--_paper), var(--_gray-950));

Nummeriert mit Diff

---
interface Props {
    variant?: "primary" | "secondary";
    variant?: "primary" | "secondary" | "ghost" | "danger";
    href?: string;
    disabled?: boolean;
}
---

Ink-Variante (dark)

/* Cyan-family, 3-layer focus — band + ring + halo */
:focus-visible {
    outline: 2px solid transparent;
    box-shadow:
        0 0 0 2px    (--bg),
        0 0 0 4px    (--focus-ring),
        0 0 0 8px    (--focus-ring-halo);
}

Audit-Findings · Default · Mono Numerics + Status Pills

WCAG-Ratio + APCA Lc gegen die jeweils relevante Surface. APCA-Werte vorläufig (W3C Draft) — WCAG-Verhältnisse bleiben verbindlich.

Compact + Bordered · BFSG-Schwellen

Standard · WCAG-Stichprobe

Service Card — Tagline oben · Tags + CTA unten

Eyebrow-Tagline im card__body oben, card__footer mit Tags links und card__cta rechts.

Feature Card — Icon · kein card__body-Wrapper

Muted Card — Sekundäre Inhalte

FAQ · Grouped, nummerierte Eyebrows · Default expanded

Compact · Blog-Artikel TOC (Mobile)

Single · Audit-Finding mit kollabiertem Detail

Rich · Icon-tiled Cards · With Current + Done States

1. 01

   Erstgespräch

   30 Minuten, kostenlos. Ausgangslage, Ziele, Passung — bevor wir Verträge anfassen.

   30 Min · Kostenlos

2. 02

   Bestandsaufnahme

   Automatisierter Scan und erste manuelle Sichtung. Sofort-Einschätzung inklusive.

   ½ Tag

3. 03

   Audit & Bericht

   Manuelle Prüfung, Screenreader-Tests, priorisierter Maßnahmenplan. Tickets, keine PDFs.

   5–15 Werktage

4. 04

   Umsetzung & Begleitung

   Sparringspartner, Reviewer oder direkt im Code. WCAG → Pull Requests.

   nach Bedarf

Vertikal · Narrow Column · With Progress Line + State Markers

Hero · Opener / Section Divider · Outlined Numerals · On Paper

1. Kostenlos

   01

   Erstgespräch

   30 Minuten, ohne Vertrag. Wir klären, ob wir zueinander passen.

2. ½ Tag

   02

   Bestandsaufnahme

   Scan, manuelle Sichtung, Sofort-Einschätzung.

3. 5–15 Tage

   03

   Audit & Bericht

   Manuelle Prüfung, Screenreader-Tests, priorisierter Plan.

4. Optional

   04

   Umsetzung

   WCAG → Pull Requests. Direkt im Code, wenn gewünscht.

Kompakt · Sidebar / Card Use

Default · Serif Italic 400 + Teal Keyline + Mono Attribution

Bei jeder Gestaltungsentscheidung: hilft dieses Element beim Verstehen — oder ist es nur Schmuck? Schmuck wird gestrichen.

Large · Hero / Opening Quote

Barrierefreies Design ist kein Kompromiss — es ist der höchste Standard, den gutes Design erreichen kann.

Small · Inline within Long-form Article

„Accessible by default" heißt: ich muss mich später nicht erinnern, was ich vergessen habe.

Pull-Quote auf Ink-Surface — Italic Emphasis kippt zu Raw Amber

1 · Größen — SM 32 · MD 48 (Default) · LG 80

aria-hidden="true" auf dem Avatar — Name wird aus dem Kontext (Byline) gelesen.

2 · Square — Logo-Slot / Organisation

--radius-sm statt 50 % — für Org-/Logo-Slots in Testimonials.

3 · Ring — Brand-Akzent Outline (Theme-aware)

2 px page-bg Band + 2 px var(--accent) — Teal in Light, Cyan in Dark.

4 · Byline — Drei Dichten

5 · Im Kontext — Testimonial-Karte

Author-Hero — Komposition aus bestehenden Bausteinen

Avatar · Card · Eyebrow · Body · Accent-Italic · Outline-Badges · Mono-Meta-Liste — kein neuer Component-Code nötig.

Hero · Count-Up Animation (Scroll into View)

Hero · With Serif Italic Accent + Decimal Count-Up

Stat Row · Drei Stats, Hard-Rule Treatment

Hero · On Ink Surface

Nummeriert (Default) · mit Hinweis-Boxen

Icons · ohne Titel

Ohne Kategoriefilter

Mit Kategoriefilter · Vanilla JS Progressive Enhancement

Cards (Default) · Grid 3 Spalten

Liste · kompakt · 2-spaltig ab 48rem

Reales Beispiel · Farbkontrast-Befund

Beispiel · Fehlende Alt-Texte

Press · Text-Fallback (Default)

Reference · Gemischt anonym / nicht-anonym · Text-Fallback

Reference · Vollständig anonym

Horizontal (Default) · BFSG-Fristen

Vertikal · Projektphasen

BFSG → EN 301 549 → WCAG 2.2 → DIN

Default-Content (Farbe als einziges Signal)

Varianten

Ohne Titel

A11Y-Annotation

Standard

Mit Betonung (em)

Abweichender Autor

A11Y-Annotation

Inline — Abkürzung (abbr)

Konformitätserklärungen nach WCAGWeb Content Accessibility Guidelines — internationaler Standard für digitale Barrierefreiheit (W3C) sind für viele Anbieter unter dem BFSGBarrierefreiheitsstärkungsgesetz — deutsches Umsetzungsgesetz der EU-Richtlinie 2019/882, gültig ab Juni 2025 ab Juni 2025 Pflicht.

Inline — Erstdefinition (dfn)

Der Begriff ScreenreaderAssistive Technologie, die Bildschirminhalte in Sprache oder Braille-Ausgabe überträgt — genutzt von blinden und sehbehinderten Menschen ist zentral für das Verständnis von Barrierefreiheit.

Block — mit Quelle und Link

Block — ohne Quelle

Audit

Systematische Überprüfung eines digitalen Produkts auf Konformität mit WCAG-Erfolgskriterien. Umfasst automatisierte Tests, manuelle Prüfung und Screenreader-Tests.

A11Y-Annotation

Direktes Zitat — mit Link

Direktes Zitat — ohne Link

Normverweis — abweichendes Label

Paraphrase (paraphrase-Prop)

A11Y-Annotation

1 · Compliance-Baseline

Das System zielt auf WCAG 2.2 AA als Minimum. AAA wird gehalten, wo es nicht mit Lesbarkeit, Wartbarkeit oder Brand-Voice kollidiert — das ist häufiger als oft angenommen, aber nicht überall.

APCA wird zusätzlich geprüft, weil WCAG-Kontrast bei sehr hellen oder warmen Hintergründen (z. B. --paper #F7F4EE) systematisch optimistische Werte liefert. APCA Lc ≥ 75 für Body, Lc ≥ 60 für Large Body, Lc ≥ 45 für Non-Text.

Wo WCAG und APCA divergieren, gewinnt das strengere der beiden. Token-Kommentare in colors_and_type.css notieren beide Werte pro Paarung.

2 · Kontrast-Matrix

Vollständige Audit-Tabelle der Token-Paarungen. Werte WCAG · APCA Lc gegen die jeweils relevante Surface (--paper oder --ink).

2.1 Text auf Surface (Paper #F7F4EE)

2.2 Text auf Ink (Dark / .surface--ink)

2.3 Borders + UI-Cues (Non-text WCAG 1.4.11)

border-subtle ist explizit als dekorative Trennung in bereits gegliedertem Inhalt deklariert. Niemals als Border eines interaktiven Elements oder Inputs — dafür ist border-default da.

3 · Focus-Order & Skip-Link

DOM-Order = Focus-Order. Wir nutzen kein tabindex > 0. Skip-Link ist erstes fokussierbares Element auf jeder Seite, springt zum <main id="main">.

Fokus-Ring · Was zu erwarten ist. Stacked-Shadow-Pattern: 2 px page-bg Band → 2 px Cyan-Ring → 4 px Halo @ 0.20. Eine Regel ( :focus-visible) für alles. Auf hellen Surfaces nutzt sie --focus-light #0E8A82 (3.83 auf Paper, UI 1.4.11 ✓), auf dunklen --focus-dark #4FD1C5 (10.14 auf Ink, AAA).

4 · Tastatur-Map

Pro Komponente: was passiert, welche Tasten greifen, was nicht greift.

5 · Screenreader-Konventionen

5.1 aria-live & Status-Regionen — Drei Stufen, klar getrennt

5.2 Versteckter Text — .sr-only

Klassisches visually hidden-Pattern, in utilities.css definiert. Verwendung: Icon-only Button-Labels, Kontext für Links (<a>Mehr<span class="sr-only"> — zum Audit-Beispiel</span ></a>), zusätzliche Tabellenhinweise.

5.3 Beschriftungs-Regeln

5.4 Tooltip — bewusst kein Component

Statt Hover-Bubble: sichtbarer Hinweis-Text unter dem Feld (.field__hint), via aria-describedby verknüpft. Keine versteckte Information, kein Touch-/Reduced-Motion-Problem, kein z-index-Kampf.

6 · Reduced Motion

@media (prefers-reduced-motion: reduce) setzt alle Transitionen auf 0,01 ms. Die Regel ist ausnahmslos — kein "wir lassen aber den Erfolgs-Bounce drin". Faustregel: Funktion bleibt, Bewegung geht.

7 · Dialog — optionales Pattern

Im System bewusst nicht gebaut, aber dokumentiert für den Fall, dass eine Funktion es braucht (Kontakt-Overlay, Cookie-Banner). Wenn ja: das native <dialog> nutzen, keinen Custom-Builder.

<dialog id="contact" aria-labelledby="contact-title">
  <h2 id="contact-title">Anfrage senden</h2>
  <!-- Formular-Inhalt -->
  <button type="button" data-close>Schließen</button>
</dialog>

document.querySelector('[data-open]')
  .addEventListener('click', () => contact.showModal());
document.querySelector('[data-close]')
  .addEventListener('click', () => contact.close());

showModal() handhabt automatisch: Focus-Trap innerhalb des Dialogs, Esc schließt, Rest der Seite ist programmatisch inert. Setze inert zusätzlich auf <body>-Kindern für Browser, die noch nicht voll konform sind.

Initialer Fokus aufs erste Form-Feld oder den primären Action-Button — nicht aufs Schließen-Kreuz. Bei Schließen: Fokus zurück auf das Trigger-Element.

8 · Forced Colors / Windows High Contrast

Wir setzen outline: 2px solid transparent auf jeden Focus-Ring. Das System rendert den Ring als box-shadow-Stack, der in Forced-Colors-Mode unsichtbar wäre — aber die transparente outline wird vom System auf Highlight umgefärbt und übernimmt nahtlos.

Status-Icons (Check, Warning, X) tragen die Bedeutung in Form, nicht in Farbe. Selbst wenn der OS-Modus alle Farben auf zwei Werte herunterbricht, bleibt der Status erkennbar.

9 · Was wir nicht tun

10 · Checkliste vor Launch

Pragmatisches Minimum für jeden neuen Screen:

• Tab-Reise einmal komplett — kein Trap, keine versteckten Stops, Focus-Ring überall sichtbar.
• Skip-Link sichtbar bei erstem Tab, springt zum Main-Heading.
• Headings in Reihenfolge (H1 → H2 → H3, nicht H1 → H3).
• Bilder haben alt (nie absent, "" für Deko).
• Formulare haben sichtbare <label>, Fehler haben aria-describedby.
• Kontrast der wichtigsten Paarungen mit APCA gegengecheckt (nicht nur WCAG).
• Reduced-Motion einmal mit OS-Setting reduce durchgeklickt.
• SR-Test auf die Hauptaktion (NVDA oder VoiceOver) — wird das richtige Element angekündigt?
• Forced-Colors mit Windows-High-Contrast-Mode geprüft.
• Mobile-Touch-Targets ≥ 44 × 44 px (WCAG 2.5.5).