Intern

Style Guide

Design-System-Referenz für oakwoodgolfclub.de. Zeigt jede Farbe, jede Schrift, jede Komponente in situ. Noch nicht verlinkt in der Navigation — erreichbar via direkte URL /style-guide. noindex, damit Google nichts findet.

Quelle aller Tokens: app/globals.css (Tailwind v4 @theme). Alle Komponenten leben in components/. Änderungen passieren dort, nicht hier.

01 · Farben

Palette

Traditional-Modern-Golf — Fairway-Grün als Brand-Accent, Gold sparsam als Premium-Signal. Kontrast-Werte sind gegen Parchment (hellen Grund) getestet, sofern nicht anders angegeben.

Ink

--color-ink

rgb(10, 10, 10)

Base text. Dark surfaces (Footer, CTA-Dark).

AAA on parchment (20.1 : 1)

Parchment

--color-parchment

rgb(250, 250, 250)

Page background. Card surfaces. Light text on dark.

Muted

--color-muted

rgb(75, 85, 99)

Secondary text, captions, helper-copy. AA on parchment.

AA on parchment (6.97 : 1)

Border

--color-border

rgb(229, 231, 235)

Hairlines, dividers, input-borders (via /15 opacity).

Fairway

--color-fairway

rgb(27, 102, 64)

Primary brand accent. Links, primary button, focus ring.

AAA on parchment (7.2 : 1)

Fairway Hover

--color-fairway-hover

rgb(42, 138, 82)

Hover state for primary links and buttons. Brighter than fairway for clear state change.

Gold

--color-gold

rgb(212, 161, 46)

Premium-Akzent — NIE als Flächenfarbe. Footer-Überschriften, Eyebrows auf dunklem Grund, Hover-Accent.

AAA on ink (8.17 : 1) · 2.95 : 1 on fairway (decorative only!)

Gold Deep

--color-gold-deep

rgb(122, 90, 14)

Dunkles Gold für kleinen Text auf hellem Grund (Eyebrows auf parchment). AA-safe.

AA on parchment (5.94 : 1)

Sand

--color-sand

rgb(243, 234, 212)

Warm background-wash. Sparsam eingesetzt für Akzent-Sections.

02 · Typografie

Schrift-System

Zwei Schriften, sparsam kombiniert. Headings in Playfair Display (self-hosted via next/font), Body in Inter. Kerning tight (−0.01em) auf Headings — kein Sport-Look, kein Newspaper-Look.

h1 · font-heading · text-6xl · tracking-tight

Noch ein Jahr dabei.

h2 · font-heading · text-4xl · tracking-tight

300+ Golfer vertrauen uns.

h3 · font-heading · text-2xl · tracking-tight

Die Geschichte

h4 · font-heading · text-xl

Was uns anders macht

Body · font-body (Inter) · text-lg · leading-relaxed

Fernmitgliedschaft im Golfclub für 55 Euro pro Jahr — mit offizieller Mitgliederkarte, akzeptiert auf rund 95 % der österreichischen Golfplätze.

Body · text-base · text-ink/75

Der Oakwood Golf Club ist seit 2009 eine Fernmitgliedschaft für Golferinnen und Golfer in der DACH-Region, die keinen klassischen Heimatplatz brauchen oder wollen.

Eyebrow · text-xs · uppercase · tracking-[0.2em] · text-gold-deep

Seit 2009

Small · text-xs · text-muted

Wir antworten in der Regel innerhalb weniger Tage.

03 · Buttons

Button-System

Drei Varianten: Primary (solid fairway), Secondary (outline parchment), Ghost (text link). Disabled-State immer via opacity-60 + cursor-not-allowed.

Auf dunklem Grund

04 · Formulare

Formular-Primitive

Alle Formulare der Site nutzen diese Primitive aus components/forms/FormField.tsx. Konsistenz über Kontakt / Signup / Renewal.

Text · required

Text · mit Error

Bitte eine gültige E-Mail eingeben.

Datum

Select — matched height

05 · Flächen

Surfaces & Cards

Drei Haupt-Surface-Typen: Parchment (Default), Sand (Warm-Akzent), Ink/Fairway (Dark-Sections für CTAs und Footer).

Parchment Card

Default-Fläche

Page-Background, Form-Wrapper, Info-Asides.

Sand Wash

Warm-Akzent

Sparsam — für Abschnitte, die ruhen sollen.

Ink Surface

Dark-Section

Footer, CTA-Closer, Dark-Mode-Kandidat.

Fairway

Brand-Punctuation

Closing-CTA, Hero-Akzent, Footer-Border.

Success Banner

Form-Success-State

Nach erfolgreichem Form-Submit.

Error Banner

Form-Error-State

Bei technischen Problemen oder Validierungsfehlern.

06 · Spacing & Layout

Container & Rhythmus

Ein einziger Container — .container-page, 72rem (1152px) Max-Width, responsive Padding. Vertikaler Rhythmus über py-20 / py-24 auf Section-Ebene.

.container-page: max-width: 72rem (1152px) · mx-auto · px-5 (640+) px-6 (1024+) px-8
Section-Padding vertikal: py-20 md:py-24 — 80px mobil, 96px Desktop. Jede Hauptsection.
Card-Padding: p-5 (Form-Group), p-6 (Standard-Card), p-8 (Hero-Block)
Form-Spacing: gap-6 (Field-Abstand), gap-4 (Field-Sub-Grid, z. B. PLZ + Ort)
Border-Radius: rounded-sm durchgängig. Keine pillfoermigen Buttons, keine rounded-xl-Cards. Ruhig und klassisch.
Focus-Ring: outline 2px fairway · offset 2px · radius 2px. Nur auf :focus-visible (keyboard-only).

07 · Assets

Favicons

Aktuell aktiv: GolfHole auf Fairway-Grund (temporärer Start-Zustand). Legacy-Icons von 2017 (WordPress-Avada-Theme-Uploads) und frühere Stern-Entwürfe stehen daneben zum Vergleich. Finaler Brand Mark noch nicht definiert — siehe BACKLOG #18.

Aktuell aktiv · /app/icon.svg

GolfHole-Motiv · Fairway-Grund

64 × 64 SVG · ~400 B · scaliert auf jede Größe

Aus components/icons/GolfIcons.tsx (GolfHole), skaliert auf 64×64, Stroke 4 für Lesbarkeit bei 16px. Fairway (#1b6640) Grund + Parchment (#fafafa) Mark. Temporäre Übergangslösung.

Real-Size Tab

Oakwood Golf Club

Bookmark 32px

Touch 64px

Vorher · oakwoodgolfclub.de (WordPress, seit 2017)

favicon.png

16 × 16 PNG · 3.5 KB

Offiziell verlinkt im <head>. Grünes Motiv, aber bei 16px schwer lesbar.

favicon.png · 4× skaliert

Pixelated-Render

Macht das 16px-Pixel-Raster sichtbar. Zeigt, wie wenig Detail das Original hat.

apple-touch-icon.jpg

124 × 149 JPEG · 7.3 KB

Nicht quadratisch (soll 180×180). Glossy Highlights, Web-2.0-Look. Beste Quelle für das Motiv.

/favicon.ico (Root)

80 × 80 PNG · 4.1 KB

⚠ Das ist das WordPress-Default-“W”. Kein OGC-Branding. Unbrauchbar.

Verworfen · Stern-Entwürfe (zu generisch, kein Golf-Bezug)

Variante A · Hell

Parchment Ground · Fairway Mark

Ruhig, matcht die Site-Grundfläche. Im Safari-Tab auf weißem Grund weniger präsent.

Variante B · Fairway

Fairway Ground · Parchment Mark

Markanter im Tab-Listing, Brand-Signal sofort erkennbar. Meine persönliche Empfehlung.

Variante C · Ink / Gold

Ink Ground · Gold Mark

Premium-Optik, matcht den Footer. Gold als sparsamer Akzent — riskiert Country-Club-Kitsch.

Real-Size-Vorschau · wie sie im Browser-Tab aussehen

Variante A · 16px

Variante B · 16px

Variante C · 16px

Legacy · 16px

Status: Diese drei Stern-Varianten wurden verworfen — zu generisch, kein Golf-Bezug. Ersetzt durch das GolfHole-Motiv (oben, aktuell aktiv) als temporäre Lösung. Finale Logo-/Brand-Mark-Entscheidung siehe BACKLOG #18.

08 · Icons

Icon-System

Zwei Familien. Lucide (lucide-react 1.8.0) für UI-Standards — 1500 Icons, stroke-basiert, tree-shakeable. Custom Golf-Icons aus eigener Feder — Lucide hat keine Golf-Marks, also zeichnen wir sie im selben Stil (24×24, stroke 1.75, currentColor). Alternative Libraries (Heroicons / Material / Phosphor) bewusst abgelehnt: zu SaaS / zu Google / zu expressive.

Kontakt · Lucide

Mail

E-Mail-Adressen

Phone

Telefon-Link

MapPin

Postanschrift

Navigation · Lucide

ArrowRight

CTA-Button-Suffix

ChevronRight

Breadcrumb, Link

ChevronDown

Select, Accordion

Mobile-Nav

Close, Dismiss

Status · Lucide

CheckCircle2

Form-Success

AlertCircle

Form-Error

Info

Info-Box

Check

Consent-OK

Mitgliedschaft · Lucide

CircleUserRound

Einzel-Mitglied

Users

Flight, 4er-Tarif

IdCard

Mitgliederkarte

CreditCard

Banküberweisung

Calendar

12-Monats-Laufzeit

Golf · Custom SVG

GolfFlag

Pin-Flag auf Green — Primär-Marker

GolfBall

Ball mit Dimples

GolfTee

Tee mit Ball, Abschlag

GolfClub

Schläger (Putter-Stil)

GolfScorecard

Scorecard, Punkte

GolfHole

Loch mit Pin

GolfFairway

Course-Silhouette

GolfHandicap

Hcp (H + Down-Pfeil)

In Context · so werden sie eingesetzt

info@oakwoodgolfclub.de
+49 (160) 385 9135

Offizielle Mitgliederkarte
Kein Auto-Renewal
95 % Platz-Akzeptanz in Österreich

Seit 2009

300+ Mitglieder, DACH-Region.

Social · hell · Custom SVG

Social · dunkel · Footer

← Zurück zur Startseite