Design System

Gästehaus Helbighof — Styleguide

Interne Token-Referenz: Farben, Typografie, Abstände, Komponenten.

Farben

brand · Markengrün

#60725a

--color-brand

brand-on-dark (WCAG AA)

#8fa887

--color-brand-on-dark

warm-stone

#867f6f

--color-warm-stone

blush

#ffe7d9

--color-blush

gold-accent (sparsam)

#f2c060

--color-gold-accent

anthracite (Header/Footer)

#2e2f33

--color-anthracite

anthracite-soft

#3d3f44

--color-anthracite-soft

page · Seitengrund

#f9f8f3

--color-page

cream

#f3f0e7

--color-cream

taupe

#9c9288

--color-taupe

taupe-deep

#6f665e

--color-taupe-deep

white · Karten/Forms

#ffffff

--color-white

Semantische Tokens

--color-text anthracite Standard Fließtext

--color-text-muted mix anthracite/warm-stone Sekundärer Text

--color-bg page #f9f8f3 Body / Sektionen

--color-accent brand #60725a Links / Akzente

--color-border mix anthracite/stone/white Trennlinien, Cards

Typografie

Font-Stack

system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

Headings teilen sich die Body-Schrift (--font-heading: var(--font-body)). Datenschutzkonform, keine externen Loader.

Schriftgrößen

--text-base 1.0625rem · 17px Body

--text-lg 1.125rem · 18px Lead

--text-xl 1.3rem · 20.8px Card-Titel

--text-2xl clamp(1.72rem … 2.28rem) H1 Standard

--text-hero clamp(2.5rem … 4rem) Hero

--text-hero-display clamp(2.85rem … 5rem) Hero-Display

Layout & Abstände

--gutter clamp(1rem, 4vw, 2rem) Container Inline-Padding

--container-max 72rem · 1152px Max Content-Breite

--section-y clamp(3.5rem, 8vw, 6rem) Section Padding-Block

--section-y-tight clamp(2.5rem, 5vw, 4rem) Tight-Section

--header-height clamp(3.72rem … 6.35rem) Fixe Kopfzeile

Radius & Shadow

--radius-sm

0.25rem · 4px

--radius-md

0.375rem · 6px

--shadow-soft

sehr dezent

Buttons

Primär – .btn

Klasse .btn aus globals.css. Markengrün, einheitlich für alle Aktionen.

Section-Flächen

.section

Seitengrund #f9f8f3

cream

Wechselfläche

.section--brand-surface

Markengrün als Fläche

anthracite

Header / Footer