Orbital Integration Ecosystem

# Orbital Integration Ecosystem

{
  "summary": "A 'Cyber-Technical' design system in dark mode, characterized by glowing lime (#ccff00) highlights, glassmorphism surfaces, and complex circular orbital animations. It conveys a sense of autonomous power and technical precision through mono-spaced typography and a bento-style feature architecture.",
  "style": {
    "description": "Futuristic Cyber-Tech style using a dark 'Obsidian' base (#0a0a0a), vibrant 'Lime' (#ccff00) accents, and multi-layered glassmorphism. Typography uses Space Grotesk for high-impact headers and JetBrains Mono for utility text. Interaction design focuses on 'float' animations, 'orbital' rotations, and neon-pulse hover states.",
    "prompt": "### Visual Theme\n- **Base Background**: Obsidian (#0a0a0a) with a fixed subtle 60px x 60px white grid pattern (5% opacity) and a 5% opacity noise overlay SVG filter.\n- **Colors**: Primary: Lime (#ccff00), Secondary: White/60% for body, Accent: Obsidian Surface (#0c0c0c).\n- **Glassmorphism**: Cards use `background: rgba(255, 255, 255, 0.03)`, `backdrop-filter: blur(16px)`, and a `1px border: rgba(255, 255, 255, 0.1)`.\n\n### Typography\n- **Headings**: 'Space Grotesk', font-weights: 600, 700. Features tight tracking and leading (~0.95) for a compressed, professional look.\n- **Technical Text**: 'JetBrains Mono'. Used for labels, badges, and code-like metadata. Tracking: 0.2em to 0.3em, uppercase.\n- **Body Text**: 'Space Grotesk', font-weight: 300 or 400. Color: White at 50-60% opacity.\n\n### Animations & Micro-interactions\n- **Float**: 6s ease-in-out infinite loop (`translateY(-20px)` at 50%).\n- **Neon Pulse**: `box-shadow: 0 0 30px rgba(204, 255, 0, 0.3)` on hover, with a 1.05x scale transform using `cubic-bezier(0.4, 0, 0.2, 1)`.\n- **Orbital Spin**: Constant linear rotation for rings. Inner ring: 80s, Middle: 120s (reverse), Outer: 160s.\n- **Selection**: Background of Lime (#ccff00) with Black text."
  },
  "layout_and_structure": {
    "description": "A structured landing page featuring a center-aligned header, a split hero section, a complex orbital ecosystem visualization, and a large-scale bento grid.",
    "prompts": [
      {
        "part": "Navigation",
        "prompt": "Sticky header with a centered navigation capsule. The capsule is a pill-shaped glassmorphism card (`bg-white/3`, `blur-16px`). Navigation links in 14px font-weight 500. A prominent 'Live' indicator badge on the right using a pulsing lime dot and uppercase JetBrains Mono text."
      },
      {
        "part": "Hero Section",
        "prompt": "Two-column grid (12-column layout). Left (col-span-7): Huge 8xl heading with an italic gradient span (Lime to White/50). Secondary action button is a glass-border pill. Right (col-span-5): A floating glassmorphism card containing a mock 'Kanban' or 'System' interface with status indicators (red/yellow/green dots) and animated pulse elements. Background glows in lime (#ccff00) at 5% opacity with 120px blur."
      },
      {
        "part": "Orbital Integration Hub",
        "prompt": "A centralized visualization section. Left: Text context with large stats separated by vertical dividers. Right: Three concentric rings (`border-lime/10`) with a central glowing hub (144px width). Inner Ring: 6 large icons on a 140px radius. Middle Ring: 10 medium icons on a 250px radius (rotating reverse). Outer Ring: 9 small icons on a 360px radius. All icons must counter-rotate to stay upright. Include a pulsing '+800' pill on the outer ring."
      },
      {
        "part": "Bento Feature Grid",
        "prompt": "A 4-column, 3-row grid. Card styles: Glassmorphism with 2.5rem border-radius. Highlights include a 2x2 large feature card with nested category pills, and a specific high-contrast Lime (#ccff00) card with black text for key calls-to-action or mentions."
      },
      {
        "part": "Step-by-Step Contrast Section",
        "prompt": "A full-width high-contrast section using a light gray background (#e5e5e5) and dark obsidian text. 4-column layout with large circular step numbers (01, 02, etc.) outlined in 2px black. This provides a visual break from the dark mode theme."
      },
      {
        "part": "CTA & Footer",
        "prompt": "CTA: Massive glassmorphism card (20px padding) with a centered 8xl heading and a giant 'Neon Pulse' button. Footer: Dark background with a massive background text watermark ('CLAWHERD') at 15vw font-size, 3% opacity. Grid of 5 columns for links and a technical status bar at the very bottom."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Orbital Ring System",
      "description": "A complex solar-system style visualization for ecosystem partners.",
      "prompt": "Container: Relative, flex-center. Create 3 SVG or CSS circles for paths (`border: lime/10`). Icons are placed using `absolute` positioning with `rotate(Xdeg) translateY(-Ypx)`. The parent container rotates (`animate-orbit-spin`), and the child icon container rotates in reverse (`animate-orbit-spin-reverse`) at the exact same speed to keep icons upright. Add random animation delays to nested 'float' animations for organic movement."
    },
    {
      "component": "Neon Pulse Primary Button",
      "description": "A high-visibility CTA button with external glow.",
      "prompt": "Background: #ccff00. Text: Black, Bold. Border-radius: Full (pill). Box-shadow: `0 0 30px rgba(204, 255, 0, 0.3)`. On hover, increase shadow to 50px and scale to 1.05. Padding: 16px 32px for standard, 24px 48px for hero/CTA."
    }
  ],
  "special_notes": "MUST: Maintain the JetBrains Mono font for all metadata and labels to reinforce the 'command center' aesthetic. MUST NOT: Use solid borders; always use low-opacity white (10%) or lime (30%) borders to maintain the glass effect. DO: Ensure all rotating icons use a nested counter-rotation animation so they remain legible while orbiting."
}