Collection Page- Visual Discovery Wall

# Collection Page- Visual Discovery Wall

{
  "summary": "An editorial collection wireframe featuring a rhythmic alternation between dense product grids, expansive typographic blocks, and asymmetrical featured sections, all unified by a strict black-and-white 'blueprint' aesthetic.",
  "style": {
    "description": "The style is 'Minimalist Brutalist.' It relies on three distinct font layers: Cabinet Grotesk for bold display headings, Satoshi for clean body text, and Azeret Mono for technical UI labels and metadata. Colors are strictly #000000, #FFFFFF, and varying shades of neutral gray (#F0F0F0, #D4D4D4). UI elements feature sharp 0px corners, 1px solid black borders, and image placeholders containing a diagonal 'X' cross-hatch pattern.",
    "prompt": "Create a design using a monochrome palette: Primary White (#FFFFFF), Primary Black (#000000), and Accent Gray (#F0F0F0). Typography: Display titles in 'Cabinet Grotesk' (Extrabold, tracking-tighter, 64px-128px), body text in 'Satoshi' (Regular, 18px), and metadata/UI labels in 'Azeret Mono' (Medium, 10px-12px, uppercase, tracking-widest). All containers must have 1px solid black borders. Use 'wireframe-img' placeholders: light gray boxes (#F0F0F0) with two diagonal lines forming an 'X' from corner to corner. Buttons should be rectangular with 1px black borders, transitioning to solid black background with white text on hover. Spacing should be generous (80px-120px between sections) to create an editorial rhythm."
  },
  "layout_and_structure": {
    "description": "A vertically-scrolling layout that uses alternating 'content density' to maintain interest—switching from complex grids to simple text-heavy sections.",
    "prompts": [
      {
        "part": "Fixed Navigation",
        "prompt": "A 64px high fixed header with a 1px bottom border. Left: Bold display logo. Center: Horizontal links in monospace 10px font with 24px gaps. Right: Search bar (rounded capsule shape, border only) and utility icons (shopping bag, menu)."
      },
      {
        "part": "Hero Section",
        "prompt": "Full-width section (85vh height). Background is a faint wireframe-img pattern. Content overlay: Top-left tag in monospace; center-left huge display heading (9xl) with one italicized word indented. A 1px vertical border line precedes the body paragraph and a call-to-action button."
      },
      {
        "part": "Rhythmic 4-Column Grid",
        "prompt": "A grid row with 1px internal dividers. Four columns, each containing a 3:4 aspect ratio wireframe image, a display-style title (lg), a monospace category label, and a price on the right."
      },
      {
        "part": "Editorial Quote Block",
        "prompt": "Centered typographic section on a neutral gray (#F5F5F5) background. Padding: 120px vertical. Elements: Quote icon, 6xl display text for a large quote, a horizontal 100px black divider, a mono-font paragraph, and an underlined 'READ STORY' link."
      },
      {
        "part": "Featured Split Section",
        "prompt": "50/50 split layout. Left side: Large square wireframe-img. Right side: Content with 80px-100px padding. Includes a monospace 'Featured' tag, 7xl multi-line title, two 'pill' tags (square corners, 1px border), and a bento-style materials/fit grid (two boxes with gray backgrounds)."
      },
      {
        "part": "Full 6-Column Collection Grid",
        "prompt": "Dense product section with 1px borders between items. Header includes 2xl bold title and pagination metadata in mono font. Grid: 6 columns on desktop, each containing a small wireframe image and price metadata below."
      },
      {
        "part": "Structural Footer",
        "prompt": "Sectioned by 1px top border. 4-column layout: Column 1: Large logo and copyright. Column 2-3: Nested link lists with monospace bold headers. Column 4: Newsletter signup with 1px border input and solid black subscribe button."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Wireframe Image Placeholder",
      "description": "The signature 'X' marked box representing image content.",
      "prompt": "Box with background #F0F0F0 and 1px border #000000. Overlaid with two 1px lines (#D4D4D4) connecting (0,0) to (100%,100%) and (0,100%) to (100%,0)."
    },
    {
      "component": "Interactive Monospace Button",
      "description": "Primary action element with high-contrast state change.",
      "prompt": "Rectangular container, 1px black border, white background. Font: Azeret Mono, 12px, uppercase, 2px tracking. Hover effect: animate background to #000000 and text to #FFFFFF over 0.2s ease-in-out."
    }
  ],
  "special_notes": "MUST: Maintain perfect horizontal and vertical alignment; all borders should meet precisely. MUST: Use 'Azeret Mono' for all numeric values and UI metadata. MUST NOT: Use any border-radius/rounded corners except for the search bar capsule. MUST NOT: Include any drop shadows or gradients outside of the placeholder 'X' lines."
}