Design Style Guide

1 — Farbpaletten

Primär (fbPrim)

fbPrim

fbPrim1

fbPrim2

fbPrim3

fbPrim4

fbPrim5

fbPrim6

fbPrim7

fbPrim8

Akzent (fbAcc)

fbAcc

fbAcc1

fbAcc2

fbAcc3

fbAcc4

fbAcc5

fbAcc6

fbAcc7

fbAcc8

Sekundär (fbSec)

fbSec

fbSec1

fbSec2

fbSec3

fbSec4

fbSec5

fbSec6

fbSec7

fbSec8

Neutral (fbGray)

fbGray

fbGray1

fbGray2

fbGray3

fbGray4

fbGray5

fbGray6

fbGray7

fbGray8

2 — Semantische Farbrollen

Heading-OnBase

Text-OnBase auf Bg-Base. Link-OnBase

Bg-Base · Text-OnBase · Link-OnBase

Heading-OnBase

Text-OnBase auf Bg-Base-Soft. Link-OnBase

Bg-Base-Soft · Text-OnBase · Link-OnBase

Heading-OnBase

Text-OnBase auf Bg-Surface. Link-OnBase

Bg-Surface · Text-OnBase · Link-OnBase

Heading-OnEmphasisMain

Text-OnEmphasisMain. Link-OnEmphasisMain

Bg-EmphasisMain · Heading · Text/Link

Heading-OnEmphasisAlt

Text-OnEmphasisAlt. Link-OnEmphasisAlt

Bg-EmphasisAlt · Heading/Text/Link

Status: Erfolg — Bg-Success

Status: Warnung — Bg-Warning

Status: Fehler — Bg-Error

Status: Info — Bg-Info

3 — Typografie

Headings H1 – H6 · BodyHeading

Heading-H1

Überschrift Ebene 1 — Licht und Schatten im Design

Heading-H2

Überschrift Ebene 2 — Form, Farbe und Proportion

Heading-H3

Überschrift Ebene 3 — Struktur und Rhythmus

Heading-H4

Überschrift Ebene 4 — Raum und Weißraum

Heading-H5

Überschrift Ebene 5 — Detail und Feinheit

Heading-H6

Kategorie-Label

Heading-BodyHeading

Kompakter Abschnittstitel

Body-Text L / M / S

Text-BodyLarge

Gute Typografie schafft Ordnung und Lesbarkeit — sie lenkt den Blick und gibt dem Inhalt Struktur. Beispiel-Link im Large-Text

Text-Body

Schrift ist das Fundament visueller Kommunikation. Jede Entscheidung über Größe, Gewicht und Abstand beeinflusst, wie Inhalte wahrgenommen werden. Gut gewählte Typografie hält sich zurück und lässt den Inhalt sprechen. Beispiel-Link im Body-Text

Text-BodySmall

Begleittext für Metaangaben, Bildunterschriften und ergänzende Informationen. Link im BodySmall

Spezialstile

Text-Display

Design & Gestaltung

Text-XL-Display

Jetzt loslegen.

Text-Label

Label · Kategorie · Abschnitt

4 — Buttons

Main (Bg-EmphasisMain)

StdBtn-Main-Full-Large-A