# ATLAS Social Command Center — Design References

Dieses Verzeichnis enthält die offiziellen Design-Referenzbilder für den ATLAS Social Command Center.
**Alle zukünftigen Agenten müssen diese Bilder als verbindliche Design-Vorlage verwenden.**

## Logo & Brand

| Datei | Beschreibung |
|-------|-------------|
| `atlas-logo-symbol.png` | ATLAS OS Logo ohne Text — 3D-Pyramide, Cyan-Glow, Deep Navy Hintergrund |
| `atlas-logo-with-text.png` | ATLAS OS Logo mit "Atlas OS" Schriftzug darunter |

**Logo-Verwendung:** Das 3D-Pyramiden-Symbol (ohne Text) wird in der Sidebar oben links verwendet, ca. 48×48px. Darunter steht "Atlas Social" in Space Grotesk.

## Screen-Referenzen

| Datei | Screen | Wichtigste Elemente |
|-------|--------|---------------------|
| `screen-war-room.png` | War Room (Startseite) | 5 KPI-Karten oben, Signal Cards (4 Karten), Content Pipeline Funnel, Kanal-Status rechts |
| `screen-signale.png` | Signale | Filter-Tabs, Signal-Cards mit Potenzial-Score (0-100), "Als Draft erstellen" + "Zur Kampagne" Buttons, Top-Chancen Sidebar, System-Insights |
| `screen-draft-studio.png` | Draft Studio / Entwürfe | Editor links (Titel, Produkt, UTM, Content-Blöcke, Assets), Multi-Platform-Vorschau rechts (TikTok/Instagram/LinkedIn/X), Freigabe-Status unten |
| `screen-kalender.png` | Kalender & Freigaben | Wochenkalender nach Kanal (TikTok/Instagram/LinkedIn/X/YouTube), Freigaben-Queue darunter als Tabelle |
| `screen-freigaben.png` | Freigaben | Freigaben-Queue Tabelle mit Priorität, Schnellvorschau rechts, Audit-Verlauf, Filter-Tabs |
| `screen-kampagnen.png` | Kampagnen | Kampagnen-Cards (4 Karten), Kampagnen-Timeline, Top Kampagnen Sidebar |
| `screen-produkte.png` | Produkte | Tabelle mit Content-Score, Affiliate-Status, "Als Draft nutzen" Button pro Produkt |
| `screen-analytics.png` | Analytics | KPI-Bar, Performance-Chart (Multi-Line), Reichweite nach Kanal (Donut), Content Performance Tabelle, Performance-Funnel |
| `screen-einstellungen.png` | Einstellungen | Verbundene Kanäle, API & Automatisierung, UTM-Standardregeln, Branding, Freigabe-Workflow, Team |

## Design-System

### Farben
- **Background:** `#0a0e1a` (Deep Space Navy)
- **Surface/Cards:** `#0f1629`
- **Border:** `#1e2d4a`
- **ATLAS Cyan:** `#00a3ff` / `#00d4ff` (Signature Color)
- **Grün (Online/Erfolg):** `#10b981`
- **Amber (Warnung):** `#f59e0b`
- **Rot (Fehler/Dringend):** `#ef4444`
- **Text:** `#e2e8f0` / Muted: `#64748b`

### Typografie
- **Headings:** Space Grotesk (700)
- **Body:** Inter (400/500)
- **Metriken/Zahlen:** Space Mono (400/700)

### Layout
- **3 Spalten:** Sidebar (160px) | Content (flex-grow) | Co-Pilot (320px)
- **Sidebar:** Logo oben, Navigation-Sections (Mission/Content/System), User-Footer unten
- **Co-Pilot:** Immer rechts, ATLAS-Logo als Avatar, "Vorgeschlagene Befehle" als Quick-Actions

### Navigation (aus den Screens)
1. War Room
2. Signale
3. Entwürfe (Draft Studio)
4. Kalender
5. Kampagnen
6. Produkte
7. Freigaben
8. Analytics
9. Einstellungen

### KPI-Karten (War Room)
Jede Karte hat: Icon (farbig), Titel, Großer Zahlenwert, Trend-Indikator (↑↓ % vs. gestern), Mini-Sparkline-Chart unten

### Signal Cards
Jede Karte hat: Kategorie-Tag (SMART HOME/KITCHEN/NEWS/RADAR), Produktbild, Titel, Beschreibung, Typ-Badge + Prioritäts-Badge, "Als Draft erstellen" Button, "Zur Kampagne" Button, Potenzial-Score (Zahl + Trend)

### Co-Pilot Panel
- ATLAS 3D-Logo als Avatar (groß, oben)
- "Dein AI Command Partner" Überschrift
- "Vorgeschlagene Befehle" als Liste mit Pfeil-Buttons
- Eingabefeld unten: "Stelle ATLAS eine Frage oder gib einen Befehl..."
- Disclaimer: "ATLAS kann Fehler machen. Prüfe wichtige Infos."

## Technischer Kontext
- **Postiz API:** https://postiz.atlas-os.ai (Publishing-Engine)
- **Catalog:** https://search.atlas-os.ai/catalog.json (Produktquelle)
- **n8n:** https://n8n.atlas-os.ai (Workflow-Automatisierung)
- **Deploy:** VPS3 (82.165.139.249), /var/www/atlas-social-command-center/
- **Domain:** social.atlas-os.ai → Nginx → Static Files
- **Kein Manus-Hosting** — alles auf System ATLAS