Lars Brinkmann Modern Redesign

# Lars Brinkmann Modern Redesign

{
  "summary": "A modern luxury event rental interface redesign characterized by a navy (#1B263B) and gold (#C5A059) color scheme, editorial serif headings, and a hybrid navigation layout featuring both a sticky header and a categorical sidebar.",
  "style": {
    "description": "The style essence is 'Modern Heritage'. It uses a warm cream background (#FDFBF7) to avoid the starkness of pure white. Typography relies on the pairing of 'Gambetta' (serif) for emotional, high-impact headings and 'Satoshi' (sans-serif) for functional, legible body text. Accent elements use a metallic gold (#C5A059) and deep navy (#1B263B) for a prestigious feel. Micro-interactions are subtle, focusing on scale transforms and border-left transitions.",
    "prompt": "Create a luxury aesthetic using a palette of Deep Navy (#1B263B), Metallic Gold (#C5A059), and Warm Cream (#FDFBF7). Backgrounds should be #FDFBF7 or #FFFFFF. Typography: Use 'Gambetta' serif for all H1-H3 headings (weight 500-700, italic for emphasis) and 'Satoshi' sans-serif for body text (weight 300-500). Primary navigation and labels must be uppercase with tracking of 0.2em to 0.4em. Buttons should be rectangular with no rounding or very minimal (2px) rounding, using high-contrast colors (Navy or Gold). Animations: Use `transition: all 0.3s ease-in-out` for hover states. Hover states on images should include a scale(1.05) transform and a filter shift from grayscale(100%) to grayscale(0%)."
  },
  "layout_and_structure": {
    "description": "A structured layout with a top utility bar, a sticky main header with a centered brand identity, and a two-column main body where the left column is a sticky sidebar (72px wide) and the right column is the fluid content area.",
    "prompts": [
      {
        "part": "Utility Bar",
        "prompt": "A 40px height bar at the very top. Background: #FFFFFF, border-bottom: 1px solid #F1F1F1. Content: Contact details (phone/email) on the left, welcome message on the right. Text: Uppercase, 10px, tracking-widest, color: #A8A29E."
      },
      {
        "part": "Main Sticky Header",
        "prompt": "Height approx 100px. Center the logo area. Logo design: A Navy square box with white 'LB' italic initials, flanked by 'Unique Event Rental' in 10px uppercase tracking. Below this, the brand name in 32px Navy uppercase with 0.15em tracking. Right-aligned navigation: 5 links, uppercase, 11px, bold, tracking 0.2em."
      },
      {
        "part": "Categorical Sidebar",
        "prompt": "Width: 18rem (288px). Sticky position starting below the header. Background: #FFFFFF, border-right: 1px solid #F1F1F1. Includes a search input with a bottom-only border. Category links use 'Satoshi' 12px uppercase, tracking-widest, with a hover effect that adds a 2px solid Gold left border and shifts the text 0.25rem to the right."
      },
      {
        "part": "Hero Section",
        "prompt": "Full-width within the content area. Height: 650px. Large editorial image with a 30% black overlay. Centered text: Small Gold subtitle (tracking 0.5em) above a large Serif H2 (72px, white). Two rectangular buttons: one solid white, one ghost-style with white border."
      },
      {
        "part": "Service Grid",
        "prompt": "4-column grid with 32px gap. Cards: White background, 1px border (#F1F1F1), 40px padding. Content: Large Gold Lucide-style icon, 24px Serif title, #71717A body text. Hover effect: subtle box-shadow and icon scale(1.1)."
      },
      {
        "part": "Accent CTA Bar",
        "prompt": "Full-width section with background #333333. Feature a large centered serif heading in white. Add a subtle, low-opacity (5%) background icon (e.g., an anchor or brand mark) rotated at 12 degrees. Central Gold button (#C5A059) with white text."
      },
      {
        "part": "Footer",
        "prompt": "Background: #1B263B. 4-column layout: 1. Brand/Bio, 2. Navigation, 3. Support links, 4. Newsletter input. Newsletter input: Transparent background with #FFFFFF/10% border, gold accent button. Bottom bar: #FFFFFF/5% border-top, copyright text and social links in 10px uppercase white/30%."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Interactive Sidebar Links",
      "description": "Menu items that animate on hover with a gold accent line.",
      "prompt": "Sidebar links should be 12px, weight 600, uppercase Satoshi. On hover: border-left: 2px solid #C5A059; padding-left: 1.25rem; color: #C5A059; transition: all 0.3s ease."
    },
    {
      "component": "Portfolio Gallery Tiles",
      "description": "Square image tiles that transition from grayscale to full color.",
      "prompt": "Create square aspect-ratio containers. Images inside should have 'filter: grayscale(100%)' by default. On hover: 'filter: grayscale(0%)', 'transform: scale(1.05)'. Transition: 0.7s ease-in-out."
    }
  ],
  "special_notes": "MUST: Maintain strict vertical rhythm with 80px to 100px padding between major sections. MUST: Use only uppercase for navigation and labels. MUST: Ensure all serif fonts are rendered with 'antialiased' smoothing. MUST NOT: Use vibrant or neon colors. MUST NOT: Use large border-radii; keep corners sharp to maintain the professional, architectural feel."
}