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

2.7 KiB
Raw Blame History

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