# Uxovia · Design System
Drop-in Design-System für alle Uxovia-Projekte. Dark-first, Glass-Card aesthetic,
EU-souverän, in einer Sprache: **DM Sans + Electric Cobalt auf reinem Schwarz**.
Inspiriert von Landin (Framer-Template), angepasst an Uxovia-Brand
(Cobalt-Blau + Purple-Akzent aus dem Logo-Verlauf).
---
## Files
| Datei | Zweck |
|---|---|
| `tokens.css` | Single Source of Truth — Farben, Typo, Spacing, Radii, Shadows, Motion. Reset & Container-Utilities inklusive. |
| `components.css` | Komplette Component-Library (Buttons, Glass-Cards, Forms, Navigation, Steps, Quote, CTA, Footer …). |
| `index.html` | Styleguide / Component-Showcase. Im Browser öffnen für die komplette Übersicht. |
| `wireframe.html` | Realistische Uxovia-Landing-Page als End-to-End-Template. Kopiervorlage für neue Projekte. |
| `CHANGELOG.md` | Versionierte Zustände (SemVer). Wird bei jeder Änderung mitgepflegt und mit dem passenden Tag gepusht. |
---
## Quick Start
```html
…
```
Das war's. Alles weitere ist klassenbasiert.
---
## Brand-Eckpunkte
- **Primärfarbe:** `#0055FE` (Electric Cobalt) — sparsam, nur für CTAs, Links, Highlights
- **Sekundär:** `#7C5CBF` (Purple) — fast nur im Brand-Gradient sichtbar
- **Background:** `#000000` (reines Schwarz) — Tiefe entsteht über Glass-Surfaces und den Brand-Mesh-Verlauf, nicht über einen farbigen Grund
- **Schrift:** Ausschließlich **DM Sans** (Variable Font, 100–700). Display + Body in 500/600/700, Eyebrows/Code in **Weight 100** (Thin) mit erhöhtem Tracking; Badges/Status-Labels etwas kräftiger in **Weight 500** (Medium).
- **Signatur:** Glass-Cards mit Gradient-Border via `mask-composite`
- **Schatten:** Tief und weich (`0 30px 80px -20px rgba(0,0,0,.55)`)
- **Motion:** Kurz für Interaktion (180–320ms), länger für Page-Reveals (600ms, staggered)
---
## Wichtige Klassen
### Layout
- `.container` (1280px) · `.container-narrow` (1080px) · `.container-tight` (720px)
- `.section` (Padding-Block per `--section-y`)
- `.grid .grid-2 / .grid-3 / .grid-4 / .grid-bento` (mit `.span-2/3/4/6` für Bento)
- `.split` (Media + Content nebeneinander — in `components.css`)
### Typografie
- `.t-hero / .t-display / .t-h1 / .t-h2 / .t-h3 / .t-body-lg / .t-body / .t-small / .t-mono`
- `.eyebrow` — Mono-Uppercase-Label mit Hairline davor
- `.text-gradient` — Brand-Gradient als Text-Fill
- `.italic-serif` — Akzent für emotional aufgeladene Phrasen
### Buttons
- `.btn` Basis · Modifier: `.btn-primary`, `.btn-secondary`, `.btn-ghost`, `.btn-gradient`
- Größen: `.btn-sm`, `.btn-lg`, `.btn-icon`
### Cards
- `.glass` — Standard Glass-Card (gradient-border + top-highlight)
- `.glass-sm` / `.glass-lg` — Padding-Varianten
- `.glass-feature` — mit Brand-Wash im Hintergrund
- `.glass-interactive` — Hover-Lift
### Forms
- `.input`, `.textarea`, `.select`, `.check`, `.switch`
- `.form-group` Wrapper · `.form-label` · `.form-hint`
### Indikatoren
- `.badge` + Modifier (`-brand`, `-success`, `-warn`, `-danger`) mit `.badge-dot`
- `.pill` — locker für Filter / Tags
- `.avatar` / `.avatar-stack`
### Patterns
- `.hero` mit `.hero-grid-bg` (radiales Rastermuster)
- `.section-header` (+ `.center`)
- `.steps` / `.step` / `.step-number` / `.step-content`
- `.quote` mit `.quote-mark / -body / -author / -avatar / -name / -role`
- `.cta` mit eingebettetem Gradient-Glow
### Motion
- `.reveal` + `.reveal-1` … `.reveal-6` für staggered Entrance
- Respektiert `prefers-reduced-motion`
---
## Token-Übersicht (Auszug)
```css
--brand #0055FE /* electric cobalt */
--purple #7C5CBF
--gradient-brand linear-gradient(135deg, #0055FE → #7C5CBF)
--bg #000000 /* page background (pure black) */
--bg-elevated #0A0A0F
--surface rgba(255,255,255,.04)
--text #FFFFFF
--text-2 rgba(255,255,255,.66)
--text-3 rgba(255,255,255,.42)
--font-display "DM Sans"
--font-mono "DM Sans" /* weight 100 (Thin) for eyebrows/labels/code */
--s-1 … --s-11 4px … 160px (4px-Grid)
--r-sm/-md/-lg/-xl/-pill
--dur-fast 180ms
--dur 320ms
--dur-slow 600ms
--ease-out cubic-bezier(.2,.7,.3,1)
```
Vollständig in [`tokens.css`](tokens.css).
---
## Erweitern
**Neues Projekt:**
1. `tokens.css` + `components.css` ins Projekt kopieren
2. `wireframe.html` als Boilerplate forken
3. Inhalte tauschen, Klassen bleiben
**Neue Komponente:**
1. In `components.css` mit Section-Kommentar (`/* ── XX. NAME ── */`)
2. Tokens verwenden, niemals Hex-Werte hardcoden
3. Mobile-First testen (Hauptbruchpunkt: 768/880/960px)
4. Im `index.html` einen Showcase-Block hinzufügen
**Brand-Update:**
- Alle Farb-/Typo-Änderungen passieren in `tokens.css`. Components erben automatisch.
---
## Deployment-Hinweise
**Live:** [`ui.uxovia.ai`](https://ui.uxovia.ai) — Cloudflare Pages (`uxovia-ui`), passwortgeschützt. Deploy aus einem sauberen Staging-Ordner via `npx wrangler pages deploy … --branch=main` (genauer Befehl + Auth in `CLAUDE.md`, Abschnitt „Deployment").
- **Fonts** kommen via Google Fonts CDN. Für DSGVO-strikteren Einsatz: DM Sans lokal hosten (Open Font License, frei selbst-hostbar).
- **Backdrop-Filter** (Glass) hat in alten Browsern (< Chrome 76, < Safari 9) keine Wirkung — fällt sauber auf die Surface-Farbe zurück.
- **mask-composite** für Gradient-Borders: in allen modernen Browsern unterstützt; in alten fällt es auf eine simple Border zurück (manuell `.glass { border: 1px solid var(--border) }` ergänzen, falls Legacy nötig).
---
## Roadmap (V1.1+)
- Light-Mode-Variante (token-only)
- Notion / Pitch-Deck Token-Export (JSON)
- Figma Library (manuell synchron halten)
- Erweiterte Form-Komponenten (Date-Picker, Multi-Select)
- Tabellen / Data-Grids
- Toasts & Modals
- LinkedIn Carousel Template-Set (1080×1080 Slides)