HORIZON Minimalist Command Dashboard

# HORIZON Minimalist Command Dashboard

{
  "summary": "A sophisticated, data-rich command center for high-stakes business operations. It prioritizes clarity and focus by removing visual noise in favor of hairline borders, significant whitespace, and a high-contrast palette of deep obsidian and tactical accents (Gold, Coral, Mint).",
  "style": {
    "description": "The style is defined by its use of the OKLCH color space for vibrant but controlled tones, 'Instrument Sans' for a modern editorial feel, and thin 0.5px borders. It uses subtle transparency (white/5%) and backdrop filters instead of heavy shadows.",
    "prompt": "Create a minimalist dark-themed dashboard using the following specs: \n- **Color Palette (OKLCH)**: \n  - Background: `oklch(0.09 0.012 255)` (Deep Obsidian)\n  - Sidebar: `oklch(0.07 0.012 255)`\n  - Surface: `oklch(0.12 0.012 255)`\n  - Accents: Gold `oklch(0.82 0.12 95)`, Coral/Alert `oklch(0.70 0.22 20)`, Mint/Success `oklch(0.75 0.18 165)`, Amber/Warning `oklch(0.76 0.16 75)`\n- **Typography**: \n  - Primary Font: 'Instrument Sans'\n  - Headers: 24px, medium weight, tight tracking\n  - Labels: 10px, uppercase, 0.2em letter-spacing, bold\n  - Body: 14px, muted `oklch(0.58 0.008 255)` for secondary text\n- **Borders**: 0.5px (hairline) using `white/5%` or `white/10%` opacity.\n- **Micro-interactions**: Subtle 2s pinging animations for status dots, 150ms transitions on hover, and custom 4px thin scrollbars."
  },
  "layout_and_structure": {
    "description": "A fixed-sidebar layout with a sticky header and a single-column scrollable main area that expands into multi-column bento grids for metrics and item lists.",
    "prompts": [
      {
        "part": "Sidebar",
        "prompt": "Width: 256px (w-64). Fixed to the left. Border-right: 0.5px `white/5%`. Top section contains a compact logo with a 32px rounded square icon and uppercase subtitle (8px, tracking-widest). Navigation uses 40px height items with 12px icons, active state indicated by a Gold border-left (2px) and a subtle `white/5%` background."
      },
      {
        "part": "Sticky Header",
        "prompt": "Height: 56px (h-14). Backdrop-blur: 12px. Background: Background color at 80% opacity. Right-aligned items including a notification bell with a Coral dot and a 32px circular avatar with a subtle 1px border."
      },
      {
        "part": "KPI Status Strip",
        "prompt": "Horizontal container with 32px padding (p-8). Divide into 4-5 flex-1 sections using vertical hairline dividers. Each section contains a 10px uppercase label and a 24px semibold value. Right-most section includes a 'Pipeline Health' visualization using 4 small rounded bars (some filled Mint, others low-opacity Mint)."
      },
      {
        "part": "Command Brief (Bento Card)",
        "prompt": "Large card with a header containing a title and an 'AI Scout' badge (Gold text on `white/5%` background). Layout: 2/3 width Priority Queue with actionable list items (each with a 6px status dot); 1/3 width AI Insights panel with `white/1%` background and a small horizontal 'Conviction Score' progress bar."
      },
      {
        "part": "Active Packages Grid",
        "prompt": "3-column grid (on desktop). Cards feature a 32px padding, a progress bar at the bottom with a 'Committed' label, and status badges in the top right (Active, Warmup, Critical). Hover state: border color shifts to Gold at 30% opacity."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Status Indicator Dot",
      "description": "A dual-layered pulsing dot for system status.",
      "prompt": "A 8px circular container. Inside, one 8px dot with `animate-ping` at 75% opacity and one 8px static dot, both colored Mint `oklch(0.75 0.18 165)`. Used for 'System Active' signals."
    },
    {
      "component": "Hairline Progress Bar",
      "description": "Thin, high-precision progress tracking.",
      "prompt": "Full-width 6px height track with `white/5%` background. Inner bar uses Gold `oklch(0.82 0.12 95)` with a smooth transition. Above the bar, use 12px font for 'Committed' status labels."
    }
  ],
  "special_notes": "MUST: Maintain the 0.5px border weight to ensure the 'luxury' feel. DO NOT: Use standard 1px borders or heavy box shadows. MUST: Use OKLCH values for color consistency across display types. DO: Use 8px spacing increments for layout but 4px increments for micro-spacing."
}