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 7 MKdW-Textstile.

Museum Kunst der Westküste
.h1-big · 48px · 700 · UPPERCASE · h1 · has-h-1-big-font-size · is-style-view-as-h1-big
Museum Kunst der Westküste
.h1-thin · 48px · 450 · p · has-h-1-thin-font-size · is-style-view-as-h1-thin
Museum Kunst der Westküste
.h2 · 32px · 700 · UPPERCASE · h2 · has-h-2-font-size · is-style-view-as-h2
Museum Kunst der Westküste
.h3 · 28px · 700 · h3 · has-h-3-font-size · is-style-view-as-h3
Museum Kunst der Westküste
.h4 · 24px · 700 · UPPERCASE · h4 · has-h-4-font-size · is-style-view-as-h4
Museum Kunst der Westküste
.h5-infoblock · 20px · 700 · h5 · has-h-5-infoblock-font-size · is-style-view-as-h5-infoblock
Museum Kunst der Westküste
.bodytext · 20px · 400 · p · has-bodytext-font-size · is-style-view-as-bodytext

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.