Yosef Realty - Luxury Residences

# Yosef Realty - Luxury Residences

{
  "summary": "A sophisticated, dark-themed design system characterized by minimalist luxury, serif-based editorial typography, and high-contrast visuals. The layout uses asymmetrical grids and large-scale photography to create a premium, gallery-like experience.",
  "style": {
    "description": "The style utilizes a deep black background (#000000) paired with an elegant cream text color (#f5f1e8). Typography pairings include 'Times New Roman' for large, light-weight serif headings (often italicized for emphasis) and 'Lato' for minimalist, wide-tracked sans-serif labels. Animations are intentional and slow, featuring 1.2s ease-in-out fades and subtle vertical transitions.",
    "prompt": "Create a luxury aesthetic using a strict color palette: Primary Black (#000000), Charcoal (#1a1a1a), and Cream (#f5f1e8). Typography: Headings in Serif (Times New Roman or similar), font-weight 300, tracking 0.2em. Body and labels in Sans-serif (Lato), sizes 8px to 12px, uppercase, tracking 0.3em to 0.4em. UI elements should have thin 1px borders with 0.3 opacity. Use smooth animations: fade-in-up transitions (duration 1s, ease-out) for all sections and cross-fade (1.2s) for image carousels. Images should prioritize high-contrast architectural photography with occasional grayscale or high-contrast filters."
  },
  "layout_and_structure": {
    "description": "The structure follows a cinematic flow: a full-screen hero section, followed by asymmetrical portfolio grids, a large editorial heritage section, and a minimalist footer. It emphasizes white space and staggered element placement.",
    "prompts": [
      {
        "part": "Navigation Bar",
        "prompt": "Design a fixed header (px-12, py-6). Center a two-tier logo: Top line in Serif 30px, bottom line in Sans 8px wide-tracked. Use a top-to-bottom black gradient (80% to 0%). Include four symmetrical links (2 left, 2 right) in 10px uppercase sans-serif with 0.25em letter spacing."
      },
      {
        "part": "Hero Carousel",
        "prompt": "Full-width and full-height (100vh) slider. Images feature a 40% black overlay. Text is bottom-left aligned: Heading (72px Serif, light weight), Subtext (14px Sans, 0.8 opacity, max-width 500px), and a hollow button (border-cream, 10px Sans text, tracking 0.3em). Include a vertical 'Scroll' indicator at the bottom-center with a 40px thin line."
      },
      {
        "part": "Staggered Portfolio Grid",
        "prompt": "A two-column grid where the second column is vertically offset by 128px (mt-32). Images must maintain a 4:5 aspect ratio. Below each image, include a thin horizontal line (border-cream/20) and a details row containing a 9px category label and a 30px Serif title. Add a right-aligned 'Details' link with a micro-interaction that translates the arrow +8px on hover."
      },
      {
        "part": "Editorial Heritage Section",
        "prompt": "A 50/50 split layout. Left side: Large 72px Serif heading, italicized, tracking-tight. Right side: A 3:4 aspect ratio grayscale image. Overlay the image with a massive, low-opacity (10%) 'Legacy' watermark in Serif font (size 200px+). Background should be Charcoal (#1a1a1a)."
      },
      {
        "part": "Footer",
        "prompt": "Four-column minimalist grid. Column 1: Vertical logo and social icons. Columns 2-3: Link lists with 10px uppercase headers and 12px light-weight links. Column 4: Contact info. Include a top border (border-cream/10). Base copyright text should be 9px, uppercase, and at 30% opacity."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Luxury CTA Button",
      "description": "Hollow or solid cream buttons with extreme tracking.",
      "prompt": "Create buttons with 0px radius. Hollow variant: 1px border (#f5f1e8), 10px text, 0.4em tracking. Hover state: invert background to #f5f1e8 and text to #000000 with a 0.5s transition. Solid variant: Background #f5f1e8, text #000000, 10px font size."
    },
    {
      "component": "Carousel Navigation",
      "description": "Minimalist horizontal lines instead of dots.",
      "prompt": "Positioned at bottom-right. Features two 48px horizontal lines (1px height). Active slide line is #f5f1e8 at 100% opacity; inactive is 30% opacity. Flanked by chevron-left and chevron-right icons that scale 1.1x on hover."
    }
  ],
  "special_notes": "MUST use uppercase sans-serif labels for all interactive elements to maintain a 'high-fashion' brand feel. MUST NOT use vibrant colors or rounded corners; keep all edges sharp (0px border-radius). MUST ensure all images have a consistent dark or high-contrast architectural tone to match the background."
}