Gentleman Boxing Club - Sophisticated Champagne Edition

# Gentleman Boxing Club - Sophisticated Champagne Edition

{
  "summary": "A premium, dark-themed design system using champagne gold gradients (#C8A882), heavy uppercase typography, and noise-textured backgrounds to create a sense of exclusivity and masculine elegance.",
  "style": {
    "description": "The style is defined by its muted, sophisticated luxury. It pairs heavy sans-serif headings ('Cabinet Grotesk') with delicate, italicized serifs ('Boska') for narrative elements. The primary color is a deep black (#0A0A0A) paired with a refined champagne gold gradient (from #8B7B6F to #E8DCC4). Micro-interactions focus on subtle grayscale-to-color transitions and elegant view-transition fades. Borders are thin (1px) and low-opacity (5%) to maintain a minimalist but structured feel.",
    "prompt": "Create a design with a deep charcoal/black background (#0A0A0A) and a refined champagne gold accent (#C8A882). Use 'Cabinet Grotesk' for bold, uppercase, italicized headlines with tight leading (0.85). Use 'Satoshi' for clean UI elements and 'Boska' (Italic) for storytelling copy. Apply a 'gold-gradient' (linear-gradient 135deg, #8B7B6F 0%, #C8A882 25%, #E8DCC4 50%, #D4B8A3 75%, #9B8B7E 100%) with an 8% opacity noise texture overlay for all primary accents. UI elements should feature 1px borders using rgba(200, 168, 130, 0.25). Buttons should be rectangular with 0px border-radius. Images should use 'mix-blend-luminosity' or high-contrast grayscale, transitioning to full color on hover."
  },
  "layout_and_structure": {
    "description": "A vertically-stacked layout featuring full-width immersive hero sections, asymmetrical bento-grid feature blocks, and a high-contrast white-background call-to-action section for visual impact.",
    "prompts": [
      {
        "part": "Navigation Bar",
        "prompt": "Fixed top header, 72px height, #0A0A0A background with a bottom border of 5% white. Left side: Branding with a diamond-shaped icon (square rotated 45 degrees) containing a single character. Center: Nav links in 10px uppercase 'Satoshi', tracking 0.25em. Right side: Solid white 'Apply' button with black text, 10px font size, tracking 0.2em."
      },
      {
        "part": "Hero Section",
        "prompt": "Full-height section with background image at 30% opacity using mix-blend-luminosity. Text content left-aligned: 11px uppercase champagne gold tagline, followed by 5XL-8XL Cabinet Grotesk italicized headlines. Content must include a short serif-italic description and dual-action buttons: one solid champagne-gradient and one transparent with a 10% white border."
      },
      {
        "part": "Feature/Concept Section",
        "prompt": "Two-column grid. Column 1: Vertical 4:5 aspect ratio image with 1px border; include a floating 160x160px champagne-gradient square at the bottom-right corner for statistics. Column 2: Text block with 10px uppercase champagne tagline, 4XL headline, and dual-paragraph serif-italic body copy. Bottom of column includes a 2-column sub-grid for secondary USPs divided by a 5% white top border."
      },
      {
        "part": "Membership Tiers",
        "prompt": "Centered section heading with subtitle. Grid of two cards: Card 1 (Standard): #0A0A0A background, 1px 5% white border, hover-effect border-gold-refined/40. Card 2 (Premium): Solid black background, 1px gold-refined border (50% opacity), with a 'Most Exclusive' gold badge in the top right. Cards include 4XL pricing and checkmark icon lists (11px uppercase bold)."
      },
      {
        "part": "Community/Gallery Marquee",
        "prompt": "Horizontal scrolling container. Each card is 360px wide. Features a square grayscale image that reveals color on hover. Heading is gold-text 'Cabinet Grotesk', subtitle is 9px uppercase tracking-0.2em white/30. Add subtle padding and custom scrollbar styles."
      },
      {
        "part": "High-Contrast CTA Section",
        "prompt": "Full-width section with background-color #FFFFFF and text-color #000000. Large 7XL italic headlines. Centered application form button in solid black with 0.3em letter-spacing. Footer of this section contains a 3-column grid for contact details (Location, Contact, Schedule) with 10px black/50 uppercase headers."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Diamond Branding Mark",
      "description": "A square frame rotated 45 degrees containing a centered initial.",
      "prompt": "Create a 36x36px div with a 1px border using #C8A882. Rotate the div 45 degrees. Inside, place a 18px Cabinet Grotesk character, counter-rotated -45 degrees. Apply the champagne gold text gradient to the character."
    },
    {
      "component": "Textured Gold Button",
      "description": "A high-end CTA button with subtle grain and metallic feel.",
      "prompt": "Solid background using linear-gradient(135deg, #8B7B6F 0%, #C8A882 25%, #E8DCC4 50%, #D4B8A3 75%, #9B8B7E 100%). Overlay with an SVG turbulence filter at 0.08 opacity to create 'noise'. Text: Black, 12px, font-weight 900, uppercase, tracking 0.2em. Hover: brightness(110%)."
    },
    {
      "component": "Noise Overlay Background",
      "description": "A global subtle texture to reduce 'flat' digital look.",
      "prompt": "Absolute inset overlay using a feTurbulence SVG filter. Base frequency: 0.8, numOctaves: 4. Set opacity to 0.03 and pointer-events: none. Apply this over dark backgrounds to provide depth."
    }
  ]
}