Diese Installation enthält das fertige Design-System, Kopf- und Fußzeile sowie die Templates. Inhalte kommen pro Projekt dazu.
Farben, Schriftgrößen, Abstände und Radien liegen als Variablen in den Website-Einstellungen. Die Klassen für Sektionen, Wrapper und Typografie sind angelegt.
Reset, Utility-Klassen und die Kommentar-Styles liegen im Child Theme, nicht im Custom CSS. Wer ein Projekt startet, tauscht Akzentfarbe und Schrift und baut darauf auf.
.h1 --text-h1
.h2 --text-h2
.h3 --text-h3
.h4 --text-h4
.text-xl --text-2
Größerer Text für Anrisse und Zwischenstände.
.text-l --text-1
Lead-Text, wie er im Hero unter der Überschrift steht.
ohne Klasse --text-0
Normaler Fließtext. So liest sich ein Absatz im Standardfall, inklusive Link im Text, der unterstrichen bleibt.
.text--1 --text--1
Kleinerer Text für Nebeninformationen und Bildunterschriften.
.text--2 --text--2
Kleinster Text für Meta-Angaben.
Primary--color-primary
#0064D2
Secondary--color-secondary
#1D1D1F
Accent--color-accent
#0240E4
Primary auf dunkel--color-primary-on-dark
#6FB4FF
Text 1--color-text-1
#1D1D1F
Text 2--color-text-2
#515154
Text 3--color-text-3
#86868B
Base 1--color-base-1
#FFFFFF
Base 2--color-base-2
#F5F5F7
Base 3--color-base-3
#EDEDF0
Base 4--color-base-4
#E3E3E8
Border 1--color-border-1
#D2D2D7
Border 2--color-border-2
#86868B
Button
Eingabefeld
Radien
--radius-s
8px
--radius-m
12px
--radius-l
20px
Tabelle
| Token | Klein | Groß | Klasse |
|---|---|---|---|
--space-section-xs | 16px | 32px | .section-xs |
--space-section-s | 32px | 64px | .section-s |
--space-section-m | 48px | 96px | .section-m |
--space-section-l | 64px | 128px | .section-l |
--space-section-xl | 80px | 160px | .section-xl |
--space-section-xxl | 96px | 192px | ohne Klasse |
--space-section-inline | 24px | 40px | seitlicher Rand |