Designsystem

Alles, was das Aussehen von fabianmebus.com bestimmt: Farben, Schriften, Raster, Bausteine und ihre Regeln. Die Beispiele auf dieser Seite nutzen dasselbe Stylesheet wie alle anderen Seiten und zeigen deshalb immer den aktuellen Stand.

Auf einen Blick

Schriftschnitte

4

Textstile

8

Farb-Tokens

17

Button-Arten

3

Raster

12 px

Hauptumbruch

1024 px

Grundsätze

• Ein dunkles Farbschema: Es gibt keine helle Variante. Hell wird es nur auf Papier.
• Mobile first: Die Grundregeln beschreiben die schmale Ansicht ab 320 px. Eine Media Query ab 1024 px macht aus der gestapelten Karte die liegende.
• Eckig: keine runden Ecken, keine Verläufe als Schmuck. Verläufe gibt es nur als Masken, die Foto und Raster auslaufen lassen.
• Kupfer sparsam: als Fläche nur im Primär-Button, sonst als Akzent in Schrift, im Punkt des Leitsatzes und im Raster.
• Tokens statt fester Werte: Jede Farbe steht genau einmal im Stylesheet. Auch die Werte auf dieser Seite werden daraus gelesen.
• Ohne JavaScript: Gestaltung und Bedienung kommen vollständig aus HTML und CSS.

Farben

17 Farb-Tokens, alle in :root. Bei Schriften und Bedienelementen steht der Kontrast zum Hintergrund dabei, auf dem sie stehen.

Flächen

• --color-page #141311 Seitenhintergrund
• --color-card #1C1A17 Karte und Textseiten
• --color-card-border #2E2A25 1,3:1 auf der Seite Kartenrand, Linien in Tabellen und Kacheln (dekorativ)
• --color-control-bg-hover #24211D Fläche des Umriss-Buttons bei Hover
• --color-shadow rgba(0, 0, 0, 0.45) Schatten der Karte auf der Startseite
• --color-photo-print #141311 Fläche hinter dem Foto im Druck

Schrift

• --color-text-strong #FFFFFF 17,3:1 auf der Karte Leitsatz und Überschriften
• --color-text #F3F1ED 15,3:1 auf der Karte Button-Text und Links
• --color-text-body #D6D2CB 11,5:1 auf der Karte Fließtext der Textseiten
• --color-text-muted #A9A49C 7,0:1 auf der Karte Kurztext der Karte, Einleitungen, Fußzeile
• --color-accent-text #E07A45 5,8:1 auf der Karte Kupfer als Schrift: Rollen, Zwischenüberschriften, Fokusrahmen
• --color-success #5FBF7A 7,6:1 auf der Karte Testergebnisse auf „Über diese Seite“

Kupfer und Bedienelemente

• --color-accent #C2531A 3,7:1 auf der Karte Primär-Button, Punkt im Leitsatz, Raster
• --color-accent-hover #A8441A Primär-Button bei Hover
• --color-on-accent #FFFFFF 4,6:1 auf Kupfer Text auf Kupfer
• --color-control-border #746E65 3,4:1 auf der Karte Rahmen der Umriss-Buttons, Unterstreichung der Links
• --color-control-border-hover #A9A49C 7,0:1 auf der Karte Rahmen bei Hover

Im Druck bekommen diese Tokens andere Werte, alles andere bleibt gleich:

Typografie

Zwei Schriftfamilien: FM Sans für Text, FM Mono für alles, was ordnet und beschriftet. Dahinter stehen IBM Plex Sans und IBM Plex Mono, verkleinert auf die Zeichen, die die Website braucht. Die Schriftlizenz SIL OFL erlaubt das, verbietet für veränderte Fassungen aber den Namen „Plex“.

• FM Sans 300: nur der Name im Logo
• FM Sans 400: Fließtext und Einleitungen
• FM Sans 600: Leitsatz, Überschriften und Buttons
• FM Mono 500: Rollen, Zwischenüberschriften, Rücklink, Bildunterschriften und Fußzeile

Zusammen sind die vier Dateien rund 50 KB groß. Vorgeladen werden nur Sans 400 und 600. Bis die Schriften da sind, steht der Text in Arial und Courier New, deren Maße so angepasst sind, dass beim Wechsel nichts springt.

Schriftgrößen

• Führung ist für mich Verantwortung, kein Titel.

  Leitsatz · FM Sans 600 · 40 px / 1,14 · Laufweite −0,01 em · schmaler 32, 28 oder 25 px

• Designsystem

  Seitentitel · FM Sans 600 · 40 px / 1,14 · schmaler 30 px

• Engineering Manager · Head of Frontend Engineering

  Rollen · FM Mono 500 · 15,5 px · schmaler 13 oder 12 px

• Zwischenüberschrift

  Zwischenüberschrift · FM Mono 500 · 14 px · schmaler 13 px · Laufweite 0,02 em

• Hinweis, etwas kleiner und zurückhaltender als der Fließtext: als Einleitung unter dem Seitentitel oder für den Stand ganz unten.

  Hinweis · FM Sans 400 · 15 px / 1,6

• Fließtext der Textseiten mit großzügigem Zeilenabstand, damit sich auch lange Rechtstexte gut lesen lassen.

  Fließtext · FM Sans 400 · 16 px / 1,65

• Kurztext auf der Karte der Startseite.

  Kurztext · FM Sans 400 · 15 px / 1,6 · schmaler 14,5 oder 13,5 px

• Bildunterschrift und Fußzeile

  Beschriftung · FM Mono 500 · 13 px · Laufweite 0,02 em

Logo

• Zeichen: das FM-Zeichen als SVG direkt im HTML, in der Textfarbe, Seitenverhältnis 389 : 200.
• Name: echter Text in FM Sans 300, Versalien per CSS, Laufweite 0,42 em. Ein negativer Rand gleicht die Laufweite rechts aus, damit der Name optisch mittig sitzt.
• Maße: Alles hängt an einer Größe, --logo-width. Die Höhe des Zeichens ist Breite × 200 / 389, Abstand und Schriftgröße des Namens sind je 10 % der Breite.
• Rolle: Auf der Startseite ist das Logo die einzige Überschrift erster Ordnung, auf allen anderen Seiten der Link zur Startseite.

Raster und Flächen

• Raster: eine Kachel von 12 × 12 px mit einem Quadrat von 3 × 3 px in Kupfer, rechts achtfach vergrößert. Wiederholt über die ganze Seite, mit 85 % Deckkraft.
• Auslaufen: Eine Maske blendet das Raster diagonal aus, ab 1024 px zwischen 90 und 600 px, darunter zwischen 30 und 300 px.
• Reine Dekoration: Das Raster ist ein Pseudo-Element ohne eigenes HTML. Im Kontrastmodus und im Druck entfällt es.
• Karte: Fläche --color-card, 1 px Rand, auf der Startseite ein weicher Schatten (0 40px 80px). Das Foto läuft über eine Maske in die Karte aus.

Layout und Umbrüche

Ein Hauptumbruch bei 1024 px, dazu drei Feinstufen für die gestapelte Karte:

Feste Höhen gibt es nirgends, nur Mindesthöhen. So schneidet weder 400 % Zoom noch ein größerer Zeilenabstand etwas ab.

Bausteine

Buttons

• Drei Arten: Primär in Kupfer für die wichtigste Handlung, Umriss für die zweite, Textlink für die dritte. Oben jeweils Normal, Hover und Tastaturfokus.
• Form: mindestens 44 px hoch, eckig, FM Sans 600 in 14 px, ohne Umbruch. Der Rand ist immer da, notfalls transparent, damit im Kontrastmodus jeder Button einen Rahmen hat.
• Je nach Breite: „Kontakt speichern“ ist unter 1024 px ein Umriss-Button und darüber ein Textlink.

Textseiten

Über diese Seite, Impressum, Datenschutz, die 404-Seite und diese Seite teilen sich eine Vorlage und dieselben Bausteine:

Fußzeile

Ganz unten auf dieser Seite zu sehen: FM Mono in 13 px, Links mit einer Klickfläche von mindestens 24 px Höhe. Die Trenner setzt das CSS, Screenreader lesen sie nicht vor. Die Sprachwahl steht hinter einem Strich als „DE / EN“: Die aktuelle Sprache ist hell und kein Link, die andere führt zur selben Seite in dieser Sprache. Screenreader hören nur diesen Link, ausgeschrieben und in seiner Sprache vorgelesen.

Zustände und Barrierefreiheit

• Hover: nur ein Farbwechsel, in 150 ms.
• Fokus: immer sichtbar, als 2 px breiter Rahmen in --color-accent-text mit 3 px Abstand. Ein Fokusrahmen wird nie entfernt, ohne dass etwas Gleichwertiges an seine Stelle tritt.
• Kontrast: Fließtexte mindestens 7:1, alle anderen Texte mindestens 4,5:1, Rahmen von Bedienelementen mindestens 3:1.
• Klickflächen: Buttons 44 px hoch, alle übrigen Links mindestens 24 px.
• Weniger Bewegung: Wünscht das System weniger Bewegung, entfallen alle Übergänge.
• Kontrastmodus: Das Raster entfällt, der Browser setzt Systemfarben ein, der Fokusrahmen nimmt die Farbe für Hervorhebungen.

Druck

• Schwarz auf Weiß: Die Druckfarben aus dem Abschnitt Farben ersetzen die Bildschirmfarben. Raster, Flächen, Rahmen und Schatten entfallen, der Seitenrand beträgt 20 mm.
• Startseite als Visitenkarte: Sie passt auf eine Seite. E-Mail und LinkedIn werden zu Text, Website und Kontaktdatei zu QR-Codes, die beim Veröffentlichen entstehen.
• Ausnahme Designsystem: Farbfelder, Raster und Buttons auf dieser Seite behalten die Bildschirmfarben, auch wenn im Druckdialog die Hintergrundgrafiken aus sind. Sie zeigen, wie die Website aussieht.
• Textseiten: Rücklink, Navigation und Screenshots entfallen. In der Fußzeile steht nur die Adresse der Website.
• Nur im CSS: Was ausschließlich im Druck erscheint, steht im Stylesheet, nicht im HTML.

Im Code

• Ein Stylesheet: site.css in nummerierten Abschnitten, von den Tokens bis zum Druck. Astro legt es als eigene Datei ab, nie inline, weil die Content Security Policy nur Stylesheets vom eigenen Server erlaubt.
• Klassen nach BEM: Block, Element und Variante, zum Beispiel btn--primary oder article__heading.
• Keine Inline-Styles: Auch die Farbfelder oben haben deshalb je eine eigene Klasse.
• Astro-Komponenten: Logo, Fußzeile und die Vorlage der Textseiten gibt es je einmal, in beiden Sprachen genutzt.