From e4d9f9513a836d2628ad3678823fa8df302252a0 Mon Sep 17 00:00:00 2001 From: Pascal Oelmann Date: Tue, 5 May 2026 03:01:31 +0200 Subject: [PATCH] Outfit + JetBrains Mono familienweit (Mai 2026) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wechsel von Source Serif 4 + Inter zu Outfit für Headlines + Body. Kein --font-serif-Token mehr — semantisch falsch wenn er Sans ausliefert. Konsumenten-Repos müssen mit-aktualisiert werden: - Tailwind-Klasse font-serif → font-sans - Token --font-serif aus global.css entfernen Begründung: 88 % kleinere Font-Bandbreite (102 KB statt 833 KB), klarere geometrische Grundstimmung, bessere Markendifferenzierung über Akzentfarbe statt Schriftmischung. --- brand-system.md | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/brand-system.md b/brand-system.md index f9832a7..5514f2a 100644 --- a/brand-system.md +++ b/brand-system.md @@ -18,7 +18,7 @@ Konsequenz: Wenn auf einer SlimCore-Site „ein Produkt der digiFORMER GmbH" ste Die Familienzugehörigkeit wird **nicht über Farbe** hergestellt, sondern über drei andere Ebenen, die auf jeder Site identisch sind: -1. **Typografisches System** — Source Serif 4 für Headlines, Inter für Body, JetBrains Mono für technische Marker. Skalen, Gewichte und Sentence-case-Regeln gleich. +1. **Typografisches System** — Outfit für Headlines + Body (single-font-Setup), JetBrains Mono für technische Marker. Skalen, Gewichte und Sentence-case-Regeln gleich. 2. **Strukturelles Vokabular** — nummerierte Sektionen (`01`–`04`), Mono-Eyebrows in Tertiärfarbe, Editorial-Layout mit viel Weißraum, eine Akzentfarbe statt Farbflächen-Show. 3. **Status-Glyphen** — `●` `◐` `○` `◌` werden überall identisch genutzt (siehe §5). @@ -156,35 +156,41 @@ Identisch über alle Marken-Oberflächen. ### 4.1 Font-Stacks ```css ---font-serif: "Source Serif 4", Georgia, serif; ---font-sans: "Inter", system-ui, sans-serif; ---font-mono: "JetBrains Mono", ui-monospace, monospace; +/* Headlines + Body — eine geometrisch-moderne Sans für die ganze Marke */ +--font-sans: "Outfit", system-ui, sans-serif; + +/* Technische Marker — der Familien-Anker, der über alle Marken konstant bleibt */ +--font-mono: "JetBrains Mono", ui-monospace, monospace; ``` -Alle drei Schriften sind unter SIL OFL lizenziert und werden **self-hosted** ausgeliefert (keine Google-Fonts-CDN — DSGVO). +**Wechsel von Source Serif 4 + Inter zu Outfit (2026-05):** Das ursprüngliche Setup mit Editorial-Serif für Headlines und Inter für Body wurde verworfen — Begründungen: 88 % kleinere Font-Bandbreite (102 KB statt 833 KB), bessere Differenzierung der Produktmarken untereinander durch einzelne Akzentfarbe statt Schrift-Mischung, klarere geometrische Grundstimmung passend zur „pragmatischen, nicht idealistischen" Tonalität (siehe §11 produktbeschreibung). + +Outfit und JetBrains Mono sind unter SIL OFL lizenziert und werden **self-hosted** ausgeliefert (keine Google-Fonts-CDN — DSGVO). ### 4.2 Hierarchie | Rolle | Familie | Größe | Gewicht | Letter-Spacing | Line-Height | |---|---|---|---|---|---| -| Display (Hero) | Serif | 48–56px | 500 | -0.015em | 1.05 | -| H1 | Serif | 32–40px | 500 | -0.015em | 1.10 | -| H2 | Serif | 24–32px | 500 | -0.005em | 1.20 | -| H3 | Serif | 20px | 500 | 0 | 1.30 | +| Display (Hero) | Sans | 48–56px | 500 | -0.015em | 1.10 | +| H1 | Sans | 32–40px | 500 | -0.01em | 1.15 | +| H2 | Sans | 24–32px | 500 | -0.005em | 1.20 | +| H3 | Sans | 20px | 500 | 0 | 1.30 | | Body Lead | Sans | 17px | 400 | 0 | 1.55 | | Body | Sans | 16px | 400 | 0 | 1.65 | | Body small | Sans | 13px | 400 | 0 | 1.55 | | Eyebrow | Mono | 11px | 500 | 0.08em | 1.20 (uppercase) | | Caption | Mono | 11px | 400 | 0.04em | 1.35 | +Hinweis: Letter-Spacing-Werte sind gegenüber dem alten Serif-Setup leicht erhöht (Display von -0.015 auf -0.01em bei H1, Line-Height bei Display von 1.05 auf 1.10) — geometrische Sans braucht etwas mehr Atem zwischen den Buchstaben als ein Editorial-Serif. + ### 4.3 Regeln - **Sentence case** überall. Niemals Title Case. ALL CAPS nur für Mono-Eyebrows. -- **Maximal zwei Gewichte:** 400 regular + 500 medium. Niemals 600 oder 700. -- **Niemals mid-sentence bolding.** Hervorhebungen sind Sache der Akzentfarbe oder kursiver Schrift. +- **Maximal zwei Gewichte:** 400 regular + 500 medium. Headline-Highlight darf 550–600 nutzen, um optische Verdünnung dunkler Schrift auf hellem Akzentfarben-Hintergrund auszugleichen. +- **Niemals mid-sentence bolding.** Hervorhebungen sind Sache der Akzentfarbe (Background-Highlight) oder kursiver Schrift. - **Maximale Zeilenbreite:** 60–70 Zeichen (`max-w-[65ch]`) für Fließtext. -- **Mono für „technisch":** Stack-Bezeichnungen, Status-Labels, Sektions-Nummern (`01`/`02`), Versions-Marker, Timestamps. -- **Serif für „inhaltlich":** Headlines, eventuell Pull-Quotes, Editorial-Pull-Outs. +- **Mono für „technisch":** Stack-Bezeichnungen, Status-Labels, Sektions-Nummern (`01`/`02`), Versions-Marker, Timestamps, Wortmarke (Logo-Schriftzug). +- **Sans für „inhaltlich":** Headlines, Pull-Quotes, Body-Text — alles, was kein technischer Marker ist. Kein Serif-Mix mehr. --- @@ -240,7 +246,7 @@ Konsequenzen, die jedes Projekt-Briefing reflektieren muss: - Build-Pipelines, Deployment-Infrastruktur, CDN, DNS und Bot-Schutz folgen derselben Regel — was die Site ausliefert, den Build orchestriert oder Traffic terminiert, ist Teil des Pfades. - Schriftarten, Icons, JS-Libraries werden self-hosted ausgeliefert, niemals von US-CDNs eingebunden. - Wenn eine Funktion nur über einen US-Anbieter verfügbar wäre, fällt die Funktion weg oder wird selbst gebaut. -- Open-Source-Komponenten von US-Entwicklern oder US-Firmen (z. B. React, Next.js, Tailwind, Source Serif 4) sind erlaubt, solange sie self-hosted ausgeliefert werden und keine Telemetrie an die Mutter-Org senden. +- Open-Source-Komponenten von US-Entwicklern oder US-Firmen (z. B. React, Next.js, Tailwind, Outfit) sind erlaubt, solange sie self-hosted ausgeliefert werden und keine Telemetrie an die Mutter-Org senden. ### 7.2 Whitelist — bestätigte aktive Vendors