Designsystem des Bergneustädter Weihnachtsmarkts: gemeinsame Farben, fließende Schriftgrößen und Abstände sowie sieben wiederverwendbare BEM-Klassen.
wm-red
#C1292E
wm-ink
#181717
wm-paper
#FFFFFF
wm-border
#D8D8D8
Open Sans · wm-text · clamp(1rem, 0.95rem + 0.25vw, 1.125rem). Überschriften verwenden Galada und die Variablen wm-h1, wm-h2 und wm-h3.
Kleine Schrift · wm-small · clamp(0.875rem, 0.85rem + 0.125vw, 1rem).
wm-space-xs: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem)
wm-space-sm: clamp(0.75rem, 0.5rem + 1vw, 1.25rem)
wm-space-md: clamp(1rem, 0.5rem + 2vw, 2rem)
wm-space-lg: clamp(1.5rem, 1rem + 2vw, 3rem)
wm-space-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem)
Gemeinsamer Seitenrahmen: 5 % Außenabstand links und rechts, 2 % oben und unten, 1px-Rahmen in #D8D8D8 und Schatten nach außen.
page__section · Abschnittsabstand
page__content · Inhaltsgruppen
page__row · responsive Reihen
page__card · Karten
page__gallery · Bilderraster
page__image · Bilder
page__button · Schaltflächen