atlas-social-command-center/docs/design-references

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