Skip

— Design-System —

Stil & Design.

Eine kompakte Referenz: Farben, Schrift, Buttons, Bildbehandlung, Bewegung und Tabus. Diese Seite zieht aus denselben CSS-Variablen wie der Rest der Site — was hier neben dem Logo steht, gilt überall.

— Kapitel 01 —

Logo-Lockups.

Wortmarke, hell auf dunkel für Hero-Hintergründe, dunkel auf hell für gescrollte Navigation und Drucksachen. Die SVG-Variante ist die Master-Datei.

Gut Nehmten
Gut Nehmten

Master-SVG: /images/logo.svg · 1200 × 371 px · currentColor-Fill

— Kapitel 02 —

Farbsystem.

Dreizehn Token. Sage ist die einzige Markenfarbe, Warm ist Akzent und Link, alle Inks sind warme Grautöne.

Sage
#C5D6D0
Primärfläche / Buchungs-Sektion
Sage-d
#A8BFB7
Trennlinien, Hover
Sage-l
#DDE6E2
Highlight-Tabellenzeilen
Warm
#957B5F
Akzent, Eyebrow, Links
Warm-d
#6F5A41
Button-Hover
Warm-l
#B79C82
Akzent auf Dark-BG
BG
#FAF7F2
Canvas / Body
BG Deep
#F1ECE3
Alternierende Sektionen
BG Paper
#FFFFFF
Karten auf BG Deep
Ink
#1A1A1A
Headlines, Buttons
Ink-2
#3A3A3A
Body-Text
Ink-3
#6F6A65
Meta, Caption
Ink-4
#A39E96
Feine Linien

— Kapitel 03 —

Typografie.

Jost in den Strichstärken 200–700. Kein Italics — Emphasis trägt Warm-Color statt Schrägstellung.

Display · clamp(48,7.5vw,104)
Ferienhäuser am Plöner See
H1 · clamp(32,4vw,56)
Vier Häuser, vier Charaktere.
H2 · clamp(26,3vw,40)
Klein, hell, direkt am Wasser.
H3 · clamp(20,2vw,26)
Auf dem Gut
Lede · clamp(18,1.5vw,22)
Familienbesitz seit 1768 — vier Ferienhäuser am Ufer des Großen Plöner Sees, eingebettet in tausend Hektar Wald.
Body · 17px / 1.65
Das Ferienhaus ist für zwei Personen gedacht. Das Schlafzimmer ist als offene Galerie über dem Wohnraum angelegt, mit einem gemütlichen Doppelbett und einem Fenster mit Aussicht über den See.
Eyebrow · 11px, 0.32em
Estate · Forest · Lake
Meta · 11px, 0.26em
— Haus II / IV —

— Kapitel 04 —

Buttons & Links.

Vier Button-Varianten, plus der Link-Arrow. Alle in Versalien mit Tracking, kein Border-Radius.

Primary · auf hellem BG

Anfragen Mehr erfahren

Auf dunklem BG

Häuser ansehen Das Gut entdecken

Link-Arrow · Hover dehnt den Pfeil

Alle vier Häuser

— Kapitel 05 —

Formular-Felder.

Bewusst minimal — kein Border-Radius, nur Bottom-Border, Warm-Color im Focus-State.

Disabled-Submit demonstriert den Phase-1-Mock-State im Buchungs-Formular.

— Kapitel 06 —

Karten-Muster.

Property-Band für die Startseite, Estate-Band für die Gut-Seite, Testimonial-Card für Sozial-Beweis.

Drei Tage Stille, Wasser, Wald — wir kommen zurück.
Familie K.
Hamburg · Backhaus
Seehaus-Cover
— Haus II / IV —
Seehaus

Direkt am Wasser, für zwei.

1.000
Hektar Wald

— Kapitel 07 —

Kalender-Legende.

Vier Zustände — frei, belegt, Anreisetag (Halb-Dreieck unten-rechts), Abreisetag (Halb-Dreieck oben-links). Sage als einzige Buchungsfarbe.

15
Frei
15
Belegt
15
Anreisetag
15
Abreisetag

— Kapitel 08 —

Bildbehandlung.

Aspect-Ratios für die wichtigsten Container. Alle Bilder durchlaufen Sharp → WebP + AVIF + Blur-Placeholder.

16:9 — Hero
16:9 — Hero
4:5 — Property Card
4:5 — Property Card
3:4 — Galerie
3:4 — Galerie

— Kapitel 09 —

Bewegung.

Sechs Motion-Token. Alle teilen sich dieselbe Easing-Kurve. Bei prefers-reduced-motion wird alles statisch.

Ken-Burns (Hero)
scale(1) → scale(1.08) translate(-1.5%, -1%) · 28–32 s · alternate · cubic-bezier(.22,.61,.36,1)
Image-Hover
scale(1) → scale(1.04) · 1.8 s · cubic-bezier(.22,.61,.36,1)
Scroll-Reveal
opacity 0 → 1 + translateY(28 → 0) · 1 s · stagger 0.1 / 0.2 / 0.3 / 0.4 s
Counter-Animation
0 → Zielwert · 1.4 s · ease-out cubic · trigger via IntersectionObserver threshold 0.4
Nav-State-Switch
background, backdrop-filter, padding, border · 0.35 s · cubic-bezier(.22,.61,.36,1)
Button-Hover
background, color, border · 0.3 s · cubic-bezier(.22,.61,.36,1)

— Kapitel 10 —

Do & Don't.

Was die Marke trägt — und was sie nicht verträgt.

✓ Do

  • Großzügiger Whitespace zwischen Sektionen (clamp 72–140 px vertikal)
  • Bilder vom Gut, nie Stockfotografie
  • Warm-Color für Emphasis und Links — niemals Italics
  • Kalender und Buchungs-Form in derselben Sage-Section
  • Drei bis vier Testimonials, ruhig, keine Sterne-Floods
  • JSON-LD für jede Property-Seite (LodgingBusiness + Offer)

✗ Don't

  • Keine Karussell-Slider mit Pfeilen oder Punkten
  • Keine Stockfotografie, keine Lens-Flares
  • Keine knalligen Akzentfarben außerhalb der Sage / Warm-Palette
  • Keine Italics für Emphasis — Warm + 400er Weight reichen
  • Kein Border-Radius auf Buttons und Karten
  • Keine Tracking-Pixel ohne dokumentierten Auftragsverarbeitungsvertrag