81 lines
4 KiB
Markdown
81 lines
4 KiB
Markdown
# 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
|