Style Guide

Farben

Palette aus design.yaml.

Note: swatches are filled from the design.yaml palette hex. The generated has-{slug}-background-color / .bg-{slug} CSS goes live after a token rebuild.

white
#FFFFFF
.bg-white

schwarz dark
#161616
.bg-schwarz

offwhite
#F2EEE8
.bg-offwhite

kreide
#E6E2DA
.bg-kreide

nebel
#C7C4BD
.bg-nebel

kohle dark
#4E5051
.bg-kohle

nacht dark
#16191C
.bg-nacht

korall
#FF6F61
.bg-korall

teal
#6EC2B7
.bg-teal

paloma
#93B4D7
.bg-paloma

farbe-1 dark
#007BB7
.bg-farbe-1

farbe-2
#A6D7E5
.bg-farbe-2

farbe-3
#FB8C98
.bg-farbe-3

farbe-4 dark
#00646B
.bg-farbe-4

farbe-5
#FFA265
.bg-farbe-5

farbe-6 dark
#7D5E98
.bg-farbe-6

gischt
#C2D4D1
.bg-gischt

schilf
#92BC97
.bg-schilf

sturm dark
#1B4062
.bg-sturm

duene
#FFE599
.bg-duene

bg-1
#D1EDE7
.bg-bg-1

bg-2
#D7E2E1
.bg-bg-2

bg-3
#B6DDE9
.bg-bg-3

bg-4
#CEDEEC
.bg-bg-4

bg-5
#FFEEC1
.bg-bg-5

Typografie

Die 19 MKdW-Textstile (D22) — die Toggle-Paare mit und ohne Versalien.

Museum Kunst der Westküste

.title · 48px · 700 · h1 · capitals toggle OFF · has-title-font-size · is-style-view-as-title

Museum Kunst der Westküste

.title · 48px · 700 · UPPERCASE · h1 · capitals toggle ON · has-title-font-size · is-style-view-as-title

Museum Kunst der Westküste

.title-thin · 48px · 450 · h2 · capitals toggle OFF · has-title-thin-font-size · is-style-view-as-title-thin

Museum Kunst der Westküste

.title-thin · 48px · 450 · UPPERCASE · h2 · capitals toggle ON · has-title-thin-font-size · is-style-view-as-title-thin

Museum Kunst der Westküste

.feature · 38px · 700 · UPPERCASE · p · has-feature-font-size · is-style-view-as-feature

Museum Kunst der Westküste

.feature-thin · 38px · 450 · UPPERCASE · p · has-feature-thin-font-size · is-style-view-as-feature-thin

Museum Kunst der Westküste

.heading · 32px · 700 · h3 · capitals toggle OFF · has-heading-font-size · is-style-view-as-heading

Museum Kunst der Westküste

.heading · 32px · 700 · UPPERCASE · h3 · capitals toggle ON · has-heading-font-size · is-style-view-as-heading

Museum Kunst der Westküste

.box-head · 25px · 700 · UPPERCASE · p · has-box-head-font-size · is-style-view-as-box-head

Museum Kunst der Westküste

.small-heading · 20px · 700 · h4 · capitals toggle OFF · has-small-heading-font-size · is-style-view-as-small-heading

Museum Kunst der Westküste

.small-heading · 20px · 700 · UPPERCASE · h4 · capitals toggle ON · has-small-heading-font-size · is-style-view-as-small-heading

Museum Kunst der Westküste

.body · 19px · 400 · p · has-body-font-size · is-style-view-as-body

Museum Kunst der Westküste

.eyebrow · 16px · 700 · UPPERCASE · p · has-eyebrow-font-size · is-style-view-as-eyebrow

Museum Kunst der Westküste

.small · 16px · 400 · p · has-small-font-size · is-style-view-as-small

Museum Kunst der Westküste

.teaser-text · 22px · 400 · p · has-teaser-text-font-size · is-style-view-as-teaser-text

Museum Kunst der Westküste

.box-head-thin · 25px · 450 · p · has-box-head-thin-font-size · is-style-view-as-box-head-thin

Museum Kunst der Westküste

.badge · 27px · 700 · p · has-badge-font-size · is-style-view-as-badge

Museum Kunst der Westküste

.subhead · 28px · 700 · p · has-subhead-font-size · is-style-view-as-subhead

Museum Kunst der Westküste

.heading-thin · 32px · 450 · p · has-heading-thin-font-size · is-style-view-as-heading-thin

Museum Kunst der Westküste

.teaser-title · 36px · 700 · UPPERCASE · p · has-teaser-title-font-size · is-style-view-as-teaser-title

Museum Kunst der Westküste

.teaser-title-thin · 36px · 450 · p · has-teaser-title-thin-font-size · is-style-view-as-teaser-title-thin

Museum Kunst der Westküste

.badge-thin · 28px · 400 · p · has-badge-thin-font-size · is-style-view-as-badge-thin

Museum Kunst der Westküste

.display · 64px · 700 · p · has-display-font-size · is-style-view-as-display

Abstände

Fluide Spacing-Skala --s* · Utilities .mt-*/.mb-*/.pt-*/.pb-*/.gap-*.

0

var(--s0) · 0→0px · .mt-0

4

var(--s4) · 4→4px · .mt-4

8

var(--s8) · 8→8px · .mt-8

12

var(--s12) · 8→12px · .mt-12

16

var(--s16) · 12→16px · .mt-16

20

var(--s20) · 16→20px · .mt-20

24

var(--s24) · 16→24px · .mt-24

32

var(--s32) · 24→32px · .mt-32

40

var(--s40) · 24→40px · .mt-40

48

var(--s48) · 24→48px · .mt-48

64

var(--s64) · 40→64px · .mt-64

72

var(--s72) · 32→72px · .mt-72

80

var(--s80) · 48→80px · .mt-80

96

var(--s96) · 48→96px · .mt-96

132

var(--s132) · 96→132px · .mt-132

144

var(--s144) · 64→144px · .mt-144

Radius

Eck-Radien.

var(--radius-md)

var(--radius-pill)

var(--radius-full)

Buttons

Core-Button mit Theme-Styling.

Mehr erfahren

Outline

Core-Blöcke

Restyled WordPress-Kernblöcke.

Überschrift H2

Fließtext-Absatz mit einem Link und fettem Wort.

Erster Listenpunkt
Zweiter Listenpunkt
Dritter

Ein Zitat als Kernblock.
Quelle

Restyled core blocks in 20-blocks/: accordion-v4, box, button, combined-title, group (container/grid/sidebar), heading, hr, image, list, navigation, paragraph, posts

Custom-Blöcke

Eigene Theme-Blöcke (gx/*).

p-highlight — Inline-Highlight (Format) · Beispiel

wichtige Passage im Fließtext.