# 360VIER Design System — Vollständige Dokumentation

> Maschinenlesbare Beschreibung des visuellen Systems von [360vier.de](https://www.360vier.de/).
> Passend zur 360VIER-Philosophie „für Menschen **und** Maschinen": diese Datei macht das
> Design-System für KI-Systeme, Tools und Entwickler:innen direkt verwertbar.
> Verwandte Maschinen-Dateien: [`/llms.txt`](https://www.360vier.de/llms.txt) · [`/llms-full.txt`](https://www.360vier.de/llms-full.txt)

## Version & Metadaten
- **Name:** 360VIER Design System
- **Version:** 1.0 (extrahiert aus dem Live-Theme, Stand 2026-06)
- **Marke:** 360VIER — Digitalagentur, Standorte Köln & Frankfurt, seit 2012
- **Claim:** „Digitale Plattformen für Menschen und Maschinen."
- **Footer-Signatur:** „shaping the digital"
- **Grundmodus:** Dark-first (helle Flächen als Kontrastausnahme)
- **Token-Quelle:** CSS Custom Properties des WordPress-Themes (Präfix `--` und `--wp--preset--*`)

## Markenkern (Voice & Positionierung)
- **Duale Zielgruppe:** Jede Fläche adressiert gleichzeitig **menschliche Besucher** und **Maschinen** (Crawler, LLMs, Suchsysteme). Semantik, Struktur und Inhalt sind Designparameter, nicht nur Code.
- **Vier Kompetenzfelder, eine Plattformlogik:** Digital Platforms · Data Enablement · AI Enablement · Business Systems.
- **Beweisführung:** 500+ Projekte, B2B-Mittelstand, seit 2012, Tech rund um WordPress, HubSpot, Daten & Chatbots.
- **Sprache:** Deutsch, direkt, kompetent, nahbar (Ansprache „Ihr/Eure"). Plattform-statt-Website-Denken.

## Farbpalette

**Akzent (Lime / Grass) — die Markenfarbe:**
- Accent Lime: `#a0d868` (`--green-400`, `--accent-bg`)
- Accent Grass: `#81ba49` (`--green-500`, `--wp--preset--color--green`)
- **Accent-Gradient:** `linear-gradient(97deg, #a0d868 56.22%, #81ba49 103.72%)` (`--accent-gradient` / `--green-gradient`) — Primär-Buttons & Highlights

**Kernneutrale:**
- Schwarz: `#000` (`--black`, `--text-color`, `--accent-color`, `--icon-base`)
- Weiß: `#fff` (`--white`, `--bg-color`)
- Dark / Near-Black: `#141417` (`--gray-800`, `--wp--preset--color--dark`)

**Graustufen (Skala):**
| Token | Hex |
|---|---|
| `--gray-50` | `#f7f7f7` |
| `--gray-100` | `#ebebeb` |
| `--gray-200` | `#adadad` |
| `--gray-300` | `#86888f` |
| `--gray-400` | `#73757d` |
| `--gray-500` | `#4a4b60` |
| `--gray-600` | `#595b62` |
| `--gray-700` | `#2f2f3c` |
| `--gray-800` | `#141417` |

**Flächen-Gradients:**
- **Dark (primäre dunkle Fläche):** `linear-gradient(52deg, #131626 22.11%, #1f2421 62.93%, #3c5340)` (`--dark-gradient`) — der charakteristische Schwarz-→-Tannengrün-Verlauf
- **Dark-Sektion (Variante):** `linear-gradient(136deg, #1f2026 10.21%, #111216 104.55%)`
- **Light:** `linear-gradient(142deg, #f7f7f7 15%, #ebebeb 75%)` (`--light-gradient`)
- **Green-/Gray-transparent:** dezente, durchsichtige Verläufe für „Blur-Bubbles" (dekorative Hintergrund-Glows, z. B. `--blur-bubble-light-mint` = `#a0d868` 12 % auf Weiß)

**Einsatzregel:** Hierarchie wird über Graustufen geführt (Schwarz → gray-700 → gray-400). Das Lime ist **reserviert** für primäre Aktionen, States und Highlights — nie als Flächenfüllung.

## Typografie

**Schriftfamilien:**
- **Primär:** `"NeuzeitGrotesk", sans-serif` (`--primary-font-family`) — UI, Überschriften **und** Fließtext
- **Sekundär:** `"DINMONO", serif` (`--secondary-font-family`) — technische Labels, Daten, Mono-Kontexte

**Schriftschnitte (bewusst minimal):**
- Light: `300` (`--font-weight-secondary`)
- Regular: `400` (`--font-weight-default`) — **Default für Headlines UND Body**
- Bold: `700` (`--font-weight-bold`) — sparsam

> **Prinzip:** Die gesamte Typo-Hierarchie entsteht durch **Größe und Farbe, nicht durch Fettung.** Überschriften laufen in Weight 400.

**Größenskala:**
| Token | rem | px | Einsatz |
|---|---|---|---|
| `--font-size-display` | 5rem | 80px | Hero-Display (Footer „shaping the digital" skaliert responsiv bis ~156px) |
| `--font-size-h1` | 3.5rem | 56px | Seitentitel |
| `--font-size-h2` | 2.75rem | 44px | Sektionstitel |
| `--font-size-h3` | 2.25rem | 36px | Untertitel |
| `--font-size-h4` | 2.21rem | ~35px | |
| `--font-size-h5` | 1.66rem | ~27px | |
| `--font-size-h6` | 1.25rem | 20px | |
| `--font-size-text-intro` | 1.5rem | 24px | Intro-/Lead-Text |
| `--font-size-text` | 1.25rem | 20px | **Body-Default** |
| `--font-size-text-index` | 1rem | 16px | |
| `--font-size-text-small` / `--font-size-nav` | 0.875rem | 14px | Small / Navigation |

**Zeilenhöhen:** Body `1.5` (`--line-height-text`) · Display tight `4.6rem` (`--line-height-display`) · Basis `1`.
**Letter-Spacing:** überwiegend `normal`; Body-Default 20px / 30px Zeilenhöhe, Farbe `#000`.

## Layout & Abstände

**Spacing-Skala (4px-Basis):**
| Token | Wert |
|---|---|
| `--size-2xs` | 0.25rem (4px) |
| `--size-xs` | 0.5rem (8px) |
| `--size-sm` | 0.75rem (12px) |
| `--size-md` | 1rem (16px) |
| `--size-2md` | 1.5rem (24px) |
| `--size-lg` | 2rem (32px) |
| `--size-xl` | 4rem (64px) |
| `--size-2xl` | 5rem (80px) |
| `--size-3xl` | 7.5rem (120px) |

**Block-Gap (Standard-Abstand zwischen Blöcken):** `24px` (`--wp--style--block-gap`)

**Container:**
- Content: `70rem` / 1120px (`--content-size`)
- Wide: `85rem` / 1360px (`--wide-size`)
- Header-Höhe: `7.1875rem` / 115px (`--header-height`)
- Außenabstand (Gutter): `max(1rem, calc((100vw - 70rem) / 2 + 1rem))` (`--content-size-space`)

## Border-Radius

| Token | Wert | Einsatz |
|---|---|---|
| `--rounded` | 1rem (16px) | Standardflächen |
| `--rounded-md` | 1.1rem | Karten/Menüs |
| `--rounded-lg` | 1.75rem (28px) | große Container |
| `--rounded-full` | 99rem | Pills, Buttons, Avatare |

## Elevation & Schatten

Charakteristisch sind **harte Offset-Schatten** (neo-brutalistisch) statt weicher Blur-Schatten:
- **Natural:** `6px 6px 9px rgba(0, 0, 0, 0.2)` (`--wp--preset--shadow--natural`)
- **Sharp:** `6px 6px 0px rgba(0, 0, 0, 0.2)` (`--wp--preset--shadow--sharp`)
- **Crisp:** `6px 6px 0px rgb(0, 0, 0)` (`--wp--preset--shadow--crisp`) — voller harter Schlagschatten
- **Outlined:** `6px 6px 0px -3px rgb(255,255,255), 6px 6px rgb(0,0,0)` (`--wp--preset--shadow--outlined`)
- **Deep:** `12px 12px 50px rgba(0, 0, 0, 0.4)` (`--wp--preset--shadow--deep`) — tiefe Hervorhebung

## Motion

- **Default-Transition:** `all 0.75s` mit Spring-Easing (`--ease-spring-20`) — bewusst lang & federnd
- **Easing-Bibliothek:** Spring-Stufen `--ease-spring-10` … `--ease-spring-80` plus klassische Kurven (`--ease-in/out-quad|cubic|quart|quint|expo|circ`), z. B. `--ease-out-expo: cubic-bezier(0.19,1,0.22,1)`
- **Signatur:** weiche, „schwungvolle" Bewegungen — Bewegung unterstreicht den Plattform-Charakter, ohne hektisch zu wirken.
- `prefers-reduced-motion` respektieren.

## Komponenten-Tokens

**Buttons (`.dhsv-button`):**
- **Form:** durchgehend Pill (`border-radius` ≈ `--rounded-full`)
- **Schrift:** 20px, Weight 400, `letter-spacing: normal`, kein Uppercase
- **Primary:** Accent-Gradient als Hintergrund, **schwarze** Schrift, Padding ~`14.4px 49.5px`, kein Schatten
- **Secondary:** heller/outline-Verlauf, **weiße** Schrift (auf dunklem Grund)
- **Full-Width-Variante** verfügbar (`.full-width`)
- Beispiel-CTAs: „Zur Anfrage", „Projekt starten", „AI-Readiness prüfen"

**Links:** Farbe `#000`, `text-decoration: none`, Weight 400.

**Navigation:** NeuzeitGrotesk, 14px (`--font-size-nav`), auf dunklem Header in Weiß.

## Content-Richtlinien (Voice & Tone)

- **Sprache:** Deutsch. Direkte, kompetente Ansprache (informelles „Ihr/Eure").
- **Headlines:** Satz-Schreibweise (sentence case) mit **abschließendem Punkt** — z. B. „Digitale Plattformen für Menschen und Maschinen."
- **Leitmotiv:** stets die Dualität **Menschen ↔ Maschinen** mitdenken („Websites werden nicht mehr nur von Menschen besucht. Sie werden von Maschinen verarbeitet.").
- **Wortwelt:** Plattform statt Website, „Plattformlogik", „Kompetenzfelder", „Wandel", „Enablement", „AI-Readiness".
- **Aktionen:** Verb + Objekt („Projekt starten", „AI-Readiness prüfen").
- **Beweise konkret benennen:** Zahlen ausschreiben (500+ Projekte, seit 2012), Standorte (Köln, Frankfurt).

## Best Practices (Do's & Don'ts)

**Do:**
- Dark-first denken: dunkle Gradient-Flächen mit gezielten Lime-Akzenten.
- Lime ausschließlich für primäre Aktion, State & Highlight reservieren.
- Eine Schrift (NeuzeitGrotesk), ein Default-Weight (400) — Hierarchie über **Größe & Farbe**.
- Alle CTAs als Pills (`--rounded-full`).
- Harte Offset-Schatten (crisp / outlined) als Signatur für Karten & Hervorhebung.
- Lange, federnde Transitions (0.75 s Spring) für ein hochwertiges Plattform-Gefühl.
- Inhalte für Menschen **und** Maschinen strukturieren (Semantik, klare Hierarchie, maschinenlesbare Daten).

**Don't:**
- Hierarchie nicht über fette Schriftschnitte erzwingen.
- Akzent-Grün nicht als großflächige Füllung verwenden.
- Pills nicht beliebig mit scharfen Ecken mischen.
- Weiche Blur-Schatten nicht dort einsetzen, wo der harte Offset-Look die Marke trägt.
- State nicht allein über Farbe signalisieren — mit Label/Icon kombinieren.