Max Mara - Jacket Circle

# Artistic Cityscape Landing Page Design

Apply this artistic illustration-style design to create a hero section or landing page with a dreamy, sketch-like aesthetic featuring layered typography over an illustrated urban street scene.

## Layout Structure

Create a full-screen hero section with a centered typographic hierarchy overlaid on an artistic background illustration. The design uses a distinctive pink-toned color palette with yellow-green accent highlights throughout the illustrated cityscape.

**Primary Elements:**
- **Brand header**: "MaxMara" positioned in upper center, using serif typography
- **Main headline**: Large serif text "Jacket" with "CIRCLE" in bold sans-serif capitals below
- **Background illustration**: Hand-drawn style urban street scene with buildings, people, and vehicles
- **Color treatment**: Monochromatic pink base with selective yellow-green highlights on architectural elements and vehicles

## Visual Styling

The illustration style should feel hand-sketched with loose linework and artistic shading. Buildings show architectural details like balconies, windows, and awnings. Street level includes silhouetted people, vintage cars, and street furniture. The pink overlay creates a dreamy, filtered effect while yellow-green accents add visual interest and depth.

Typography hierarchy emphasizes elegant serif fonts for the brand and main headline, with strong sans-serif for emphasis text. Ensure proper contrast between text and the illustrated background.

## Responsive Behavior

On mobile devices, maintain the centered typography but allow the background illustration to scale proportionally. The text hierarchy should remain readable at all breakpoints with appropriate font size scaling.

## Dark/Light Mode

This design is inherently artistic with its own color palette. For dark mode variations, consider deepening the pink tones and adjusting the yellow-green accents for better contrast while maintaining the illustration's artistic integrity.

**Design specification**
<design-specification>
```jsonc
{
  "project": {
    "name": "Artistic Cityscape Landing",
    "description": "Illustrated hero section with serif typography over hand-drawn urban street scene in pink monochromatic style with yellow-green accents"
  },
  "tokens": {
    "colors": {
      "primary-50": { "light": "#fdf2f8", "dark": "#1a0b10" },
      "primary-100": { "light": "#fce7f3", "dark": "#2d1620" },
      "primary-200": { "light": "#fbcfe8", "dark": "#4a2638" },
      "primary-300": { "light": "#f9a8d4", "dark": "#6b3650" },
      "primary-400": { "light": "#f472b6", "dark": "#8b4a6b" },
      "primary-500": { "light": "#ec4899", "dark": "#a855a0" },
      "primary-600": { "light": "#db2777", "dark": "#c76db5" },
      "accent-400": { "light": "#bef264", "dark": "#65a30d" },
      "accent-500": { "light": "#a3e635", "dark": "#84cc16" },
      "accent-600": { "light": "#65a30d", "dark": "#a3e635" },
      "neutral-900": { "light": "#1a1a1a", "dark": "#ffffff" },
      "neutral-800": { "light": "#404040", "dark": "#e5e5e5" },
      "overlay-pink": { "light": "rgba(236, 72, 153, 0.7)", "dark": "rgba(236, 72, 153, 0.8)" }
    },
    "typography": {
      "families": { 
        "serif": "Playfair Display, Times, serif",
        "sans": "Inter, system-ui, sans-serif"
      },
      "sizes": { 
        "sm": "14px", 
        "base": "16px", 
        "lg": "18px", 
        "xl": "20px", 
        "2xl": "24px", 
        "3xl": "30px",
        "4xl": "36px",
        "5xl": "48px",
        "6xl": "64px"
      },
      "weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" },
      "lineHeights": { "tight": "1.1", "normal": "1.5", "relaxed": "1.75" },
      "letterSpacing": { "tight": "-0.025em", "normal": "0em", "wide": "0.1em" }
    },
    "spacing": {
      "xs": "4px", 
      "sm": "8px", 
      "md": "16px", 
      "lg": "24px", 
      "xl": "32px",
      "2xl": "48px",
      "3xl": "64px",
      "rationale": "Generous spacing scale to accommodate large typography and artistic layout needs"
    },
    "radii": {
      "none": "0px",
      "sm": "4px", 
      "md": "8px", 
      "lg": "12px"
    },
    "shadows": {
      "text": { 
        "light": "0 2px 4px rgba(0,0,0,0.1)", 
        "dark": "0 2px 4px rgba(0,0,0,0.3)" 
      }
    }
  },
  "screens": [
    {
      "name": "ArtisticHeroLanding",
      "route": "/",
      "layout": "Full-screen hero section with centered typography overlay on illustrated background",
      "components": [
        {
          "name": "HeroContainer",
          "type": "section",
          "properties": {
            "height": "100vh",
            "position": "relative",
            "display": "flex",
            "flexDirection": "column",
            "alignItems": "center",
            "justifyContent": "center",
            "background": "tokens.colors.primary-200"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "BackgroundIllustration",
          "type": "div",
          "properties": {
            "position": "absolute",
            "inset": "0",
            "backgroundImage": "artistic cityscape illustration",
            "backgroundSize": "cover",
            "backgroundPosition": "center",
            "filter": "tokens.colors.overlay-pink overlay"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "BrandHeader",
          "type": "h1",
          "properties": {
            "fontFamily": "tokens.typography.families.serif",
            "fontSize": "tokens.typography.sizes.2xl",
            "fontWeight": "tokens.typography.weights.normal",
            "color": "tokens.colors.neutral-900",
            "letterSpacing": "tokens.typography.letterSpacing.wide",
            "marginBottom": "tokens.spacing.2xl",
            "textAlign": "center",
            "zIndex": "10",
            "position": "relative"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "MainHeadline",
          "type": "div",
          "properties": {
            "textAlign": "center",
            "zIndex": "10",
            "position": "relative"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "HeadlineTop",
          "type": "h2",
          "properties": {
            "fontFamily": "tokens.typography.families.serif",
            "fontSize": "tokens.typography.sizes.5xl",
            "fontWeight": "tokens.typography.weights.normal",
            "color": "tokens.colors.neutral-900",
            "fontStyle": "italic",
            "lineHeight": "tokens.typography.lineHeights.tight",
            "marginBottom": "tokens.spacing.sm"
          },
          "states": {
            "default": {}
          }
        },
        {
          "name": "HeadlineBottom",
          "type": "h2",
          "properties": {
            "fontFamily": "tokens.typography.families.sans",
            "fontSize": "tokens.typography.sizes.6xl",
            "fontWeight": "tokens.typography.weights.bold",
            "color": "tokens.colors.neutral-900",
            "letterSpacing": "tokens.typography.letterSpacing.wide",
            "lineHeight": "tokens.typography.lineHeights.tight"
          },
          "states": {
            "default": {}
          }
        }
      ]
    }
  ]
}
```
</design-specification>

Copy this prompt and paste it into your AI coding assistant to build this design.