Großunternehmen · Deutschland
SAP · Deutsche Bank · Bosch · Commerzbank
Gestaltungsleitfaden
Style Guide
Digital by Default — verbindliche Gestaltungsgrundlagen für Online und Print.
01 Marke
Positionierung
Digital by Default — ein Blog über Datenschutz, Informationssicherheit und digitale Souveränität von Falk Schmidt. Die Marke tritt editorial auf: nah an einer Fachpublikation, nicht an einer Agenturseite.
Gestaltungsprinzipien
- Ruhe durch Raster. Großzügiger Weißraum, strikter 4-pt-Rhythmus.
- Typografie trägt. Serif für Leitsätze, Sans für Fließtext, Mono für Labels.
- Farbe spart. Dominierend off-white und near-black; ein sattes Blau akzentuiert.
- Kein Zierrat. Haarlinien statt Boxen, 80-px-Akzentstrich statt Dekor.
- Evidenz vor Effekt. Zahlen, Zitate, Referenzen — keine Buzzwords.
Claim
„Datenschutz, Informationssicherheit und digitale Souveränität — sachlich, belegbar, mit Paragraph hinterlegt."
Leitsatz · Themenfokus des Blogs.
Sprachgebrauch
- Anrede: Sie (formell, konsistent).
- Juristische Zitierweise: Art. 6 Abs. 1 lit. f DSGVO, § 5 DDG.
- Tonalität: präzise, unaufdringlich, ohne Übertreibungen.
02 Logo
Markenzeichen
Das Logo besteht aus zwei Grautönen, die spiegelbildlich zur Umgebung gesetzt sind:
- Quadrat + Punkt außerhalb tragen den Vordergrund-Ton der jeweiligen Umgebung (also den Farbton der sekundären Schrift).
- Buchstaben „dbd" + die zwei Punkte im Quadrat tragen den Hintergrund-Ton — sie sind als Negativform aus dem Quadrat ausgespart und verschmelzen mit dem Hintergrund.
So bleibt das Logo in jeder Umgebung optisch ruhig — egal ob heller Body, dunkler Header oder dunkler Footer.
Auf hellem Hintergrund (logo.svg) 
Auf dunklem Hintergrund (logo-on-dark.svg) Farbcodes
Auf hellem Hintergrund (public/logo.svg) | Quadrat + äußerer Punkt | #3A3A38 | = --color-text-muted (Body-Sekundärtext) |
| Buchstaben + innere Punkte | #FAFAF7 | = --color-bg (Body-Hintergrund) | |
Auf dunklem Hintergrund (public/logo-on-dark.svg) | Quadrat + äußerer Punkt | #A7A7A5 | ≈ 65 % Header-Foreground auf BG (gleicher Ton wie die Nav-Schrift) |
| Buchstaben + innere Punkte | #0E0E0E | = --color-header-bg (Header-/Footer-Hintergrund) |
Quelle: _Material/digitalbydefault_logo.svg. Die zwei
ausgespielten Varianten werden via sed-Replace daraus
erzeugt — Original-Farben #3c3c3b (Quadrat/äußerer
Punkt) und #c2c1c1 (Buchstaben/innere Punkte) werden
durch die Werte oben ersetzt.
Einsatz im UI
| Header | logo-on-dark.svg | 36 px Desktop, 30 px Mobil |
| Footer | logo-on-dark.svg | 44 px Desktop, 36 px Mobil |
| Favicon | favicon.svg (= Kopie von logo.svg) | — |
| Light-Sektionen (zukünftig) | logo.svg | ≥ 24 px Höhe |
Don'ts
- Nicht verzerren, rotieren oder beschneiden.
- Keinen Schlagschatten, Outline oder Verlauf.
- Nicht in markenfremde Farben einfärben — nur die vier Hex-Werte oben sind kanonisch.
- Nicht auf unruhigem Bildhintergrund ohne Abdeckfläche platzieren.
- Die hellere und die dunklere Form gehören immer zusammen — kein „Solo"-Einsatz nur eines Tons.
03 Farbsystem
Basis: warmes Off-White (Porzellan) mit einem Near-Black, der minimal ins Warme kippt.
Akzent: ein sattes Blau (#003cf0). Burgunder bleibt seltenen
Sonderfällen (Fehler) vorbehalten. Palette für
sRGB (Bildschirm). CMYK-Werte sind Richtwerte — vor Druck mit ICC-Profil und Proof
abstimmen.
Basis & Text
PorzellanGrundfläche#FAFAF7
Warm-GrauSektion / Card#F2F1ED
Near-BlackText / Headline#0E0E0E
Text MutedUntertitel#3A3A38
Text FaintMono-Labels#595954
Akzent (Alltag)
BlauLinks, Buttons, Akzentlinie#003CF0
Blau HoverHover / Focus#0030C0
Blau FaintBadge / Tint#E3EAFF
Akzent (Besonders — sparsam!)
BurgunderFehler / Tupfer#6B1F28
Burgunder FaintHinweis-BG#F4E8E9
Linien
HairlineTrennlinie 1 px#E5E4DF
Linie starkRahmen / Divider#CDCCC6
Farbregeln
- Höchstens zwei Akzentfarben pro Layout (Blau + optional Burgunder).
- Burgunder niemals flächig — nur als Strich, Stichpunkt oder sehr kleines Feld.
- Fließtext in Near-Black; Meta/Untertitel in Text Muted/Faint.
- Dunkle Sektionen auf
#0B0B0B, nicht auf pures Schwarz.
04 Typografie
Einheitlich IBM Plex — selbstgehostet, keine externe Verbindung. Drei Schnitte: Sans für Sprache, Serif für Leitsätze, Mono für Marker und technische Details.
IBM Plex Sans · Primär
Digital by Default
Enterprise Architect · Datenschutz-Jurist · Projektmanager
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789 · ÄÖÜß
Gewichte: Regular 400 (& Italic), Medium 500, SemiBold 600, Bold 700.
IBM Plex Serif · Leitsätze
„Unklarheit kostet."
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Gewichte: Regular 400 (& Italic), Medium 500 (& Italic).
IBM Plex Mono · Labels & UI
01 — Leistungen
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
Gewichte: Regular 400, Medium 500. Labels UPPERCASE · letter-spacing: 0.04em.
Typo-Skala (Web)
--text-xs | 0.75 rem · 12 px | Mono-Labels, Caption |
--text-sm | 0.875 rem · 14 px | Meta-Text, Form-Hint |
--text-base | 1 rem · 16 px | Body (Standard) |
--text-lg | 1.125 rem · 18 px | Lead-Paragraph |
--text-xl | 1.375 rem · 22 px | H3 klein, Subhead |
--text-2xl | 1.75 rem · 28 px | H3, Card-Title |
--text-3xl | 2.25 rem · 36 px | H2 |
--text-4xl | 3 rem · 48 px | H1 (Standard) |
--text-5xl | 4 rem · 64 px | Hero klein |
--text-6xl | 5.25 rem · 84 px | Hero groß |
--text-7xl | 7 rem · 112 px | Stat-Zahl / Manifest |
Zeilenhöhe & Laufweite
--leading-tight | 1.1 | Hero-Headlines |
--leading-snug | 1.25 | H1–H3 |
--leading-normal | 1.55 | Fließtext |
--leading-loose | 1.75 | Lange Lesestrecken |
--tracking-tight | −0.02 em | Hero |
--tracking-snug | −0.01 em | H1–H3 |
--tracking-wide | +0.04 em | Mono-Labels |
--tracking-wider | +0.1 em | Display-Labels |
Text-Utilities
Zwei globale Klassen für Fließtext-Seiten. Wer sie kombiniert, muss wissen was er tut — sie stapeln sich kumulativ.
.lead · einleitender Absatz
Ich denke systemisch, plane voraus und arbeite bevorzugt dort, wo Komplexität auf Strukturbedarf trifft.
font-size: --text-lg · color: --color-text-muted.
Kein eigener Font — erbt IBM Plex Sans vom <body>. Setzt keinen
margin-top, daher von Haus aus eng am vorigen Element.
.prose · Lesestrecken-Wrapper
Regulärer Fließtext in .prose erhält automatisch
max-width: --max-reading.
Aufeinanderfolgende Absätze bekommen margin-top: --space-4.
Hervorhebungen erhalten volle Textfarbe zurück.
Wrapper-Klasse um zusammenhängenden Textblock. Enthält Regeln für
p + p (Abstand), p (max-width), h2,
ul und strong. Nicht mit .lead
verwechseln — Kombination ist möglich, dann wirkt .lead nur auf den
einzelnen Absatz.
05 Raster & Abstände
Alle Abstände folgen einem 4-px-Grundraster. Tokens in rem definiert
(1 rem = 16 px). Für Print: 1 pt ≈ 0,353 mm; die mm-Spalte ist Orientierung.
Skala
--space-1 | 0.25 rem · 4 px · 1.06 mm | Mikro-Gap (Icon ↔ Text) |
--space-2 | 0.5 rem · 8 px · 2.12 mm | Enger Gap |
--space-3 | 0.75 rem · 12 px · 3.18 mm | Kleiner Gap |
--space-4 | 1 rem · 16 px · 4.23 mm | Absatz zu Label |
--space-5 | 1.25 rem · 20 px · 5.29 mm | Formular-Gap |
--space-6 | 1.5 rem · 24 px · 6.35 mm | Container-Padding |
--space-8 | 2 rem · 32 px · 8.47 mm | Absatz-Abstand |
--space-10 | 2.5 rem · 40 px · 10.58 mm | Grid-Gap |
--space-12 | 3 rem · 48 px · 12.70 mm | Block ↔ Block |
--space-16 | 4 rem · 64 px · 16.93 mm | Section kompakt |
--space-20 | 5 rem · 80 px · 21.17 mm | Akzentstrich-Länge |
--space-24 | 6 rem · 96 px · 25.40 mm | Section Standard |
--space-32 | 8 rem · 128 px · 33.87 mm | Hero-Padding |
--space-40 | 10 rem · 160 px · 42.33 mm | Seiten-Intro |
Visuelles Lineal
4
8
16
24
48
96
160
Weißraum-Regeln
- Section-Padding vertikal
--space-24(96 px). Hero oben--space-40, unten--space-16. - Absatz → Absatz
--space-4. Absatz → neue Überschrift--space-8. - Cards padding
--space-8rundum. - Akzentstrich: 80 × 4 px, Blau, darüber
--space-4, darunter--space-6. - Nie kleiner als 4 px — sonst bricht der Rhythmus.
06 Layout
Container
--max-content | 75 rem · 1200 px | Standard (Grids, Header) |
--max-narrow | 56 rem · 896 px | Rechtstexte, Formulare |
--max-reading | 42.5 rem · 680 px | Lange Lesestrecken |
Section-Rhythmus
Drei Hintergrund-Töne wechseln ab. Nie zweimal die gleiche Farbe hintereinander.
A · Porzellan
#FAFAF7B · Warm-Grau
#F2F1EDC · Dunkel
#0B0B0BEcken, Linien, Schatten
--radius-sm | 3 px | Tags, Chips |
--radius-md | 8 px | Inputs, Buttons |
--radius-lg | 16 px | Cards |
--border-hair | 1 px · #E5E4DF | Section-Divider |
--border-strong | 1 px · #CDCCC6 | Form-Rahmen |
sm
md
lg
Schatten sind weich und warm — kein harter Schlagschatten.
07 Komponenten
Section-Header
.section-header
01 — Leistungen
Klarheit schaffen.
Button
.btn
Pull-Quote · Testimonial
.pull-quote
„Falk hat Struktur gebracht, wo keine war — und auf jedem Meeting den roten Faden." B.B. · Wiesbaden
Lead-Quote · Leitsatz
.lead-quote
„Unklarheit kostet."
Referenz-Kachel
.ref-card
Formularfeld
.form-group · Label + Input
Link (Inline)
.link-inline
Beispiel: Mehr dazu im Datenschutz-Abschnitt.
1 px Unterstrich in Linie-stark; Hover → Blau.
08 Bildsprache
Ja
- Portrait: Tageslicht, neutraler Hintergrund, ruhiger Blick.
- Detail-Stills: Bücher, Notizen, Hände — dokumentarisch.
- Architektur: klare Linien, graphischer Ausschnitt.
- Farbigkeit entsättigt, leicht warm.
Nein
- Keine Stock-Klischees (Handshake, Sprint-Board).
- Kein HDR, keine übersättigten Farben.
- Keine Vignetten, keine Filter-Looks.
- Icons ersetzen keine Bilder.
Icon-Set · Business (massiv)
Für inhaltstragende Kacheln (Leistungsfelder, Nutzen, Gründe) verwendet
die Marke ein einheitliches Icon-Set in solidem, massivem Business-Stil.
Einfarbig, ausschließlich currentColor (standardmäßig
--color-accent = Blau). 48 × 48-Raster, 4 px
Sicherheitsrand. Keine Strichstärken — Form entsteht aus Flächen,
nicht aus Linien.
Verwendung
-
Inline per
<svg><use href="#icon-…"/></svg>— Farbe folgtcurrentColor. -
Für externe Nutzung liegen alle Icons als Einzeldateien in
/icons/*.svgbereit. - Mindestgröße 24 px. Standardgröße 40–64 px. Für Hero-Teaser 72–96 px.
-
Farbe: Blau
#003CF0auf hellem Hintergrund; Off-White#FAFAF7auf Blau. Burgunder nur für besondere Anlässe, nie als Dauerfarbe. - Niemals kombinieren mit Outline-Icons (z. B. Lucide, Feather) — die Bildwirkung wäre inkonsistent.
Abstände & Rahmen
Icon in Kachel: 4 × 4-Raster-Quadrat mit optischem Zentrum. Abstand
zum Titel darunter var(--space-4). Kein Rahmen, kein
Schatten, kein Farbkreis hinter dem Icon — das Icon selbst trägt
die Bildfläche.
09 Tonalität
So klingt die Marke
- Präzise. Eine Aussage pro Satz.
- Ruhig. Keine Ausrufezeichen. Keine Superlative.
- Faktisch. Referenzen, Paragraphen, Zahlen — keine Versprechen.
- Zurückhaltend persönlich. Ich-Form dort, wo es Bezug schafft.
Vermeiden
- Marketing-Floskeln („ganzheitlich", „maßgeschneidert", „innovativ").
- Englische Fachbegriffe, wenn ein deutscher Begriff passt.
- Emoji im Fließtext.
- Selbstlob ohne Beleg.
Beispiele
Nicht so
„Wir bieten innovative, maßgeschneiderte Lösungen, die Ihr Unternehmen ganzheitlich in die digitale Zukunft führen!"
Besser
„Enterprise-Architektur und Datenschutz — strukturiert, belegbar, mit Paragraph hinterlegt."
10 Web → PDF
Diese Seite ist via Browser-Druck direkt als PDF exportierbar. Das Print-CSS ist
in der Datei enthalten (@media print).
| Seitenformat | A4 Hochformat |
| Seitenränder | 22 mm oben · 20 mm rechts · 22 mm unten · 22 mm links |
| Basisschrift | 10 pt · IBM Plex Sans |
| Sidebar & Site-Chrome | ausgeblendet |
| Sections | starten auf neuer Seite (page-break-before: always) |
| Farben | werden gedruckt (print-color-adjust: exact) |
| Links | URLs stehen in Klammern neben dem Link-Text |
| Fußzeile | „Digital by Default · Style Guide · Seite n" via @page |
Empfohlene Druck-Einstellungen
- Hintergrundgrafiken aktivieren (damit Farb-Swatches sichtbar bleiben).
- Kopf- und Fußzeilen des Browsers deaktivieren.
- Skalierung 100 % (kein „An Seite anpassen").
- Empfohlen: Chromium-basierte Browser (beste Print-CSS-Unterstützung).
11 Barrierefreiheit
Ziel: durchgängig WCAG 2.2 AA. Mindestens 4.5:1 für normalen Text, 3:1 für großen Text (ab 18 pt bzw. 14 pt bold) und UI-Komponenten.
Kontraste im Einsatz
| Kombination | Kontrast | WCAG |
| Near-Black #0E0E0E auf Porzellan | ≈ 18:1 | AAA |
| Text Muted #3A3A38 auf Porzellan | ≈ 10:1 | AAA |
| Text Faint #595954 auf Porzellan | ≈ 5.9:1 | AA |
| Text Faint #595954 auf Warm-Grau | ≈ 5.5:1 | AA |
| Blau #003CF0 auf Porzellan | ≈ 7:1 | AAA |
| Porzellan auf Dunkel #0B0B0B | ≈ 18:1 | AAA |
Regeln
- Interaktive Elemente haben sichtbaren Fokus (3 px Ring Blau).
- Icons sind nie die einzige Träger einer Information — stets Text oder
aria-label. - Formularfelder haben sichtbares
<label>, nicht nur Placeholder. - Bildalternativen sind aussagekräftig (nie „Bild" oder „Foto").
- Kein Autoplay-Video, keine aufdringliche Bewegung.