# ATLAS Social Command Center — Design System

> **Für zukünftige Agenten:** Alle Design-Referenzbilder liegen in `docs/design-references/`.
> Das README dort ist die verbindliche Spezifikation. Immer zuerst lesen!
> 9 Referenzbilder: 32486-32498 (screen-war-room, screen-signale, screen-draft-studio,
> screen-kalender, screen-freigaben, screen-kampagnen, screen-produkte, screen-analytics,
> screen-einstellungen + 2x Logo)

## Gewählter Ansatz: Bloomberg Terminal × Raumschiff-Brücke

Exakt wie in den 9 Referenzbildern definiert. Diese Bilder sind die Ground Truth.

### Design Movement
Operational Intelligence Interface — Bloomberg Terminal × NASA Mission Control × Creator Studio.
Dark Navy, Cyan-Glow, dichte Informationsarchitektur, 3D-Pyramiden-Logo.

### Color Philosophy
- **Background:** #0a0e1a (Deep Space Navy) — OKLCH: oklch(0.12 0.03 265)
- **Surface/Cards:** #0f1629 — OKLCH: oklch(0.15 0.03 265)
- **Border:** #1e2d4a — OKLCH: oklch(0.22 0.05 265)
- **ATLAS Cyan:** #00d4ff — OKLCH: oklch(0.82 0.18 210) — Signature Color
- **Grün:** #10b981 / Amber: #f59e0b / Rot: #ef4444
- **Text:** #e2e8f0 / Muted: #64748b

### Logo (KRITISCH)
Das echte ATLAS OS Logo ist eine 3D-Pyramide mit Cyan-Glow auf Deep Navy.
- Referenz: docs/design-references/atlas-logo-symbol.png (ohne Text)
- In Sidebar: Symbol (~40px) + "Atlas Social" Text
- Im Co-Pilot: Größeres Symbol (~80px) als Avatar

### Typography
- Headings: Space Grotesk (700)
- Body: Inter (400/500)
- Metrics/Numbers: Space Mono (400/700)

### Layout: 3 Spalten
- Sidebar: 160px (Logo, Nav, ATLAS STATUS, User-Footer)
- Content: flex-grow
- Co-Pilot: 320px (Logo-Avatar, Vorgeschlagene Befehle, Chat-Input)

### Navigation (aus Screens)
MISSION: War Room, Signale, Entwürfe, Kalender
CONTENT: Kampagnen, Produkte, Freigaben, Analytics
SYSTEM: Einstellungen

### KPI-Karten (War Room)
5 Karten: Heute geplant / Entwürfe offen / Freigaben nötig / Kanäle verbunden / Affiliate-Potenzial
Jede Karte: Icon, Titel, Großer Wert, Trend-%, Mini-Sparkline

### Signal Cards
Kategorie-Tag, Produktbild, Titel, Beschreibung, Potenzial-Score (0-100),
Empfohlene Plattform, "Als Draft erstellen" + "Zur Kampagne" Buttons

### Co-Pilot Panel
Header: Logo + "ATLAS Co-Pilot" + BETA Badge
Body: 3D-Logo Avatar, "Dein AI Command Partner", Vorgeschlagene Befehle (4-6 Quick-Actions)
Footer: Eingabefeld + Sende-Button + Disclaimer

## Style Decisions
- Dark Mode only, kein Toggle
- ATLAS 3D-Pyramiden-Logo aus docs/design-references/ verwenden
- Alle Metriken in Space Mono
- Status-Dots pulsieren
- Hover: Cyan-Glow (box-shadow: 0 0 12px rgba(0,212,255,0.3))
- Aktive Nav-Items: Left-Border-Indicator in Cyan
- ATLAS STATUS Footer in Sidebar: "Systems Operational" + grüner Dot