hiss/atlas-social-command-center
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
atlas-social-command-center/docs/design-references/README.md

4 KiB
Raw Permalink Blame History

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