SOS Designsystem

Was macht SOS Designsystem?

Künstlerische Ausrichtung

Erlesen, ruhig, bürgernah, menschenzentriert. Denke an ein redaktionelles Magazin trifft auf eine Einsatzzentrale – souverän, nicht alarmistisch.

Mach: Übergroße redaktionelle Überschriften, großzügige Negativräume, ein stark linksbündiges Raster mit bewusster Asymmetrie, gelegentlich randlose Abschnitte, dezente filmische Beleuchtung (maximal ein weicher radialer Farbverlauf pro Abschnitt), zurückhaltendes Glas nur bei Overlays, akzentuiertes Rot als präzises Stilmittel.

Mach nicht: Neon-Glühen, gesättigte rote Hintergründe, Emoji-Grafiken, generische Dashboard-Karten überall, schwebende Karten mit starken Schlagschatten, durchgehend rotierende Objekte, mehrere konkurrierende Farbverläufe, Partikelhintergründe.

Faustregel: Wenn Rot mehr als ~5% einer Ansichtsfläche bedeckt, ist es zu viel.

Farbtoken

Einmalig definieren in src/app/globals.css unter Tailwind v4 @theme. Komponenten verwenden ausschließlich Token-Utilities (bg-ink, text-paper, text-accent), niemals rohe Hex-Werte.

Token	Wert	Verwendung
--color-ink	#101318	Primärer dunkler Hintergrund
--color-ink-raised	#1B2027	Dunkle Oberflächen, Telefonrahmen, Karten auf Dunkel
--color-ink-line	#2A313B	Trennlinien auf Dunkel
--color-paper	#F5F6F7	Helle Abschnittshintergründe
--color-paper-line	#E1E4E8	Trennlinien auf Hell
--color-accent	#D93642	Akzent: CTAs, Schlüsselmarkierungen, Statuspunkte
--color-accent-strong	#B8232F	Akzenttext auf hellem Hintergrund (AA auf #F5F6F7)
--color-accent-soft	#F6E8EA	Abgetönte Hintergründe, Badges auf Hell
--color-text-dark	#171A20	Fließtext auf Hell
--color-text-light	#F7F8FA	Fließtext auf Dunkel
--color-muted-dark	#9AA2AD	Gedämpfter Text auf Dunkel (≥ 4,5:1 auf #101318)
--color-muted-light	#5E6672	Gedämpfter Text auf Hell (≥ 4,5:1 auf #F5F6F7)

Kontrasthinweise:

• #858D98 (bereitgestellter gedämpfter Wert) besteht auf Dunkel nur für große Texte; für Fließtext --color-muted-dark verwenden.
• Weißer Text auf #D93642-Buttons liegt bei ~4,6:1 – OK für Button-Labels ab 16px halbfett. Nach jeder Änderung prüfen.
• Roter Text auf hellem Hintergrund muss --color-accent-strong verwenden.
• Status niemals nur durch Farbe darstellen – immer mit Label oder Icon kombinieren.

Statusfarben (nur im Tracking-Abschnitt): Ausstehend = Amber #C98A1B + Uhr-Icon, Laufend = Akzent-Rot + pulsationsloser Punkt, Abgeschlossen = Grün #2F8F5B + Haken-Icon. Immer beschriftet.

Typografie

• Schriftart: eine variable Sans via next/font/google (bevorzugt: Inter Tight für Display + Inter für Fließtext, oder Geist allein). display: "swap", subset latin, max. 2 Familien.
• Überschriften: Gewicht 600–700, enge Laufweite (-0.03em bis -0.045em), Zeilenhöhe 0.95–1.05.
• Fließtext: Gewicht 400, Zeilenhöhe 1.6, max. Breite ~65 Zeichen.
• Anreißer: 12–13px, Großbuchstaben, tracking-[0.18em], Gewicht 500, gedämpfte Farbe, oft mit einer kurzen roten Linie davor.

Fludie Skala (in @theme als --text-* ablegen):

--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);    /* hero h1 */
--text-h2:      clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3:      clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body:    1rem;  /* 1.0625rem auf ≥ md */
--text-small:   0.875rem;
--text-eyebrow: 0.8125rem;

Bei 320px muss die Heldenüberschrift ohne Überlauf passen – teste speziell „Every Second Matters.".

Layout & Abstände

• Container: max-w-[1440px], Seitenabstand clamp(1.25rem, 4vw, 4rem).
• 12-Spalten-Raster auf ≥ lg; asymmetrische Spans (z. B. 7/5, 5/7, offset-1).
• Vertikaler Abschnittsrhythmus: clamp(5rem, 10vw, 10rem) oben/unten.
• Abstandsskala: 4px Basis (Tailwind-Standard). Bevorzuge Schritte von 6, 8, 12, 16, 24, 32.
• Radius: 6px für kleine Steuerelemente, 14px für Karten, Telefonrahmen ~2.6rm außen.

Oberflächen & Abschnittsrhythmus

Wechsele zwischen dunklen und hellen Abschnitten, um Kapitel zu schaffen: Held (dunkel) → Über uns (hell) → So funktioniert's (dunkel) → Kategorien (hell) → Showcase (dunkel, randlos) → Registrieren (hell) → Tracking (dunkel) → Koordination (hell) → FAQ (hell) → Finaler CTA (dunkel, filmisch) → Fußzeile (dunkel).

Beleuchtung: maximal ein radial-gradient pro dunklem Abschnitt, niedrige Deckkraft (≤ 0,18), roter oder kühlgrauer Farbton. Statisch – niemals animiert.

Glas: bg-white/5 + backdrop-blur-md + 1px ink-line-Rand, nur auf der Navigation und kleinen Overlays. Keine großen verschwommenen Paneele (Leistung).

Komponenten

• Primärer Button: Akzent-Hintergrund, heller Text, mind. 48px Höhe, 20–28px horizontaler Abstand, dezentes Pfeil-Icon, das bei Hover um 2px verschoben wird.
• Sekundärer Button: transparent, 1px Rand (ink-line auf Dunkel / paper-line auf Hell), gleiche Größe.
• Kein Store/Download-Button – diese Seite hat keine Installations-CTAs, siehe CLAUDE.md „Geltungsbereich: Showcase, nicht Installations-Trichter".
• Anreißer: rote 24px-Linie + Beschriftung in Großbuchstaben.
• DraftBadge: kleine amber-umrandete Pille „Entwurf – ausstehende Bestätigung"; nur in Abschnitten mit Entwurfsinhalten.
• Kategorie-Kachel: Icon (24px lucide, Strichstärke 1.5) + Titel + einzeilige Beschreibung; haardünner Rand, kein starker Schatten; Hover = Randfarbenwechsel + 2px Anhebung.
• Telefonrahmen: siehe Skill app-screenshot-showcase.

Ikonografie

Nur lucide-react, Strichstärke 1.5, Größen 20/24/32. Ein Icon pro Konzept; Icons unterstützen Text, ersetzen ihn nie.

Checkliste vor Abschluss der visuellen Arbeit

• Nur Token verwendet; keine rohen Hex-Werte in Komponenten
• Rot-Verwendung zurückhaltend; Status nicht nur farblich
• Überschriftenhierarchie auf einen Blick lesbar; ein dominantes Element pro Ansichtsfläche
• Hell-Dunkel-Rhythmus intakt
• Kontrast für jede neue Farbkombination geprüft
• Sieht bei 320px beabsichtigt aus, nicht nur verkleinert