FOB SDK | Production Documentation

# FOB SDK | Production Documentation

{
  "summary": "A sophisticated, developer-centric documentation interface with a cyberpunk edge. The design emphasizes code readability and technical hierarchy through specific font pairings (Cabinet Grotesk and Space Grotesk) and a triad of neon accent colors against a pitch-black, glass-textured backdrop.",
  "style": {
    "description": "The style is defined by a 'Tech-Noir' aesthetic. It features three primary font families: Cabinet Grotesk (Display, 800-900 weight), Satoshi (Body), and Space Grotesk (Monospace). The color palette is strictly #050505 for backgrounds, with #00f2ff (Cyan), #ff00e5 (Magenta), and #adff00 (Lime) used for categorization and interaction feedback. Visual textures include a 40px square grid overlay (opacity 3%) and a vertical scanline animation.",
    "prompt": "Create a UI with a deep background #050505. Background must feature a subtle grid pattern using linear-gradient lines every 40px at 3% opacity. Typography: Use 'Cabinet Grotesk' for H1/H2 headers (900 weight, uppercase, tight tracking), 'Satoshi' for body text (400 weight, 60% opacity white), and 'Space Grotesk' for technical labels (700 weight, 10px size, 0.2em tracking). Colors: Primary Cyan (#00f2ff), Secondary Magenta (#ff00e5), Accent Lime (#adff00). Glassmorphism: Cards should have background: rgba(255, 255, 255, 0.02), backdrop-filter: blur(12px), and a 1px border of rgba(255, 255, 255, 0.05). Animations: Add a top-to-bottom scanline effect using a 2px high gradient at 10% opacity moving every 10s. Code blocks should be #0d0d0d with 1px white/10% borders and custom syntax highlighting using the brand neons."
  },
  "layout_and_structure": {
    "description": "A robust documentation layout consisting of a fixed top navigation bar, a persistent left-hand sidebar for hierarchical navigation, and a wide central scroll area for content sections. Sections are divided into logical blocks using large headers and horizontal dividers.",
    "prompts": [
      {
        "part": "Fixed Header",
        "prompt": "Height 80px, background #050505 at 80% opacity with blur. Left: Square icon container with 12px radius and bold logo. Center: Navigation links in uppercase Space Grotesk, 10px, 0.2em tracking. Right: Prominent CTA button in Cyan #00f2ff with black text and a 20px cyan glow on hover."
      },
      {
        "part": "Sticky Sidebar",
        "prompt": "Width 288px (72rem), sticky to top 80px. Content organized by uppercase category headers at 30% opacity. Links: 14px Satoshi font, transition to white on hover. Active state: 2px Cyan left border and subtle background tint rgba(0,242,255,0.05)."
      },
      {
        "part": "Content Sections",
        "prompt": "Spacing: 128px (32rem) between major sections. Use 'glass-card' containers for grouped information (32px padding, 24px corner radius). Headers: Mix font weights (e.g., 'SDK Installation' in 900 weight, '& Setup' in Cyan colored weight)."
      },
      {
        "part": "Code Snippet Component",
        "prompt": "Background #0d0d0d, padding 24px, border-radius 12px. Include a 'Copy' button in the top right (opacity 20%, turns Cyan on hover). Syntax highlighting: Reserved words in Magenta, Strings in Lime, Variables/Numbers in Cyan."
      },
      {
        "part": "API Endpoint List",
        "prompt": "Row-based layout. Each row is a glass-card with hover:bg-white/5. Left: HTTP method badge (GET in Cyan, POST in Lime, PATCH in Magenta) fixed-width 48px. Center: Monospace method name and brief description. Right: Status badges (e.g., 'Auth: Required') with 1px border."
      },
      {
        "part": "Footer",
        "prompt": "Background black/40%, border-top white/5%. 4-column grid for logo/summary, protocol links, connect links, and status. Bottom bar with copyright and legal links in 10px Space Grotesk, 20% opacity."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Numbered Execution Card",
      "description": "A card for step-by-step logic flows.",
      "prompt": "A glass-card with a 48px square badge in the top-left containing a bold number. The badge color should alternate between Cyan and Magenta. Layout is a 1/3 text description and 2/3 code block split on large screens."
    },
    {
      "component": "Error Code Reference Table",
      "description": "A high-density table for technical reference.",
      "prompt": "Table with 0.2em tracked uppercase headers on white/5% background. Rows separated by 1px white/5% borders. Error codes highlighted in Magenta. Hover state for rows should slightly brighten the background."
    }
  ]
}