66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
# 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
|