Cosmic Dark Mode UI Design System

{
  "type": "UI Design System",
  "theme": "dark mode, space-inspired, glowing accents",
  "header": {
    "label": "DESIGN SYSTEM",
    "title": "COSMIC GRAVITY",
    "subtitle": "A Design Language Inspired by the Universe."
  },
  "layout": {
    "left_column": [
      {
        "title": "COLOR",
        "count": 7,
        "items": [
          {"name": "Cosmic Black", "hex": "#050507"},
          {"name": "Deep Space", "hex": "#0E0F14"},
          {"name": "Soft White", "hex": "#F5F6F8"},
          {"name": "Stardust Gold", "hex": "#F5D28A"},
          {"name": "Night Purple", "hex": "#1A1C2A"},
          {"name": "Dusk Blue", "hex": "#0F1B2A"},
          {"name": "Nebula Teal", "hex": "#0E1F22"}
        ]
      },
      {
        "title": "GRADIENT",
        "count": 1,
        "description": "horizontal bar showing a dark-to-light-to-dark cosmic glow"
      },
      {
        "title": "TYPOGRAPHY",
        "font": "Space Grotesk",
        "hierarchy_count": 4,
        "levels": ["H1 Cosmic Light", "H2 Explore More", "Body Celestial Text", "Caption Orbit Info"]
      }
    ],
    "main_column": [
      {
        "title": "UI COMPONENTS",
        "subsections": [
          {"title": "BUTTON", "count": 3, "labels": ["EXPLORE (Primary)", "CANCEL (Secondary)", "MORE (Ghost)"]},
          {"title": "SLIDER", "count": 1, "value": "72%"},
          {"title": "TOGGLE", "count": 2, "states": ["Off", "On"]},
          {"title": "TAGS", "count": 3, "labels": ["BLACK HOLE", "JUPITER", "ORBIT"]}
        ]
      },
      {
        "title": "CARDS",
        "count": 3,
        "items": [
          {"title": "JUPITER", "subtitle": "ORBIT ARCHIVE", "image": "Jupiter planet"},
          {"title": "BLACK HOLE", "subtitle": "COSMIC EVENT", "image": "Black hole with accretion disk"},
          {"title": "DISTANCE", "value": "778.3 M km", "image": "Concentric orbital rings"}
        ]
      },
      {
        "title": "DATA DISPLAY",
        "count": 3,
        "items": [
          {"title": "ENERGY", "type": "circular progress ring", "value": "87%"},
          {"title": "SIGNAL STRENGTH", "type": "line graph with glowing nodes", "value": "42.6 dB"},
          {"title": "COSMIC NOISE", "type": "audio player UI"}
        ]
      },
      {
        "title": "ICON",
        "count": 7,
        "labels": ["Home", "Planet", "Sparkle", "Signal", "Folder", "Heart", "User"]
      }
    ],
    "bottom_row": [
      {
        "title": "VISUAL ELEMENTS",
        "count": 5,
        "labels": ["BLACK HOLE", "GRAVITY RING", "LIGHT GLOW", "NEBULA DUST", "GLASS SURFACE"]
      }
    ]
  }
}