airbnb.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
Vercel's homepage embodies **technical precision** and **developer-centric clarity** through a Swiss-style brutalist approach. The interface prioritizes information density without clutter, utilizing strict grid systems, high-contrast typography, and generous negative space. The aesthetic communicates infrastructure reliability and modern development velocity—clean, monochrome, and systematic with moments of controlled chromatic energy in hero sections.

## Design System

### 1. Core Style
- **Grid Architecture**: 12-column implicit grid with visible guide lines (1px solid #eaeaea) creating a technical drafting aesthetic
- **Brutalist Minimalism**: Sharp edges mixed with soft pill-shaped buttons; rigid structure with organic gradient textures
- **Developer-First Hierarchy**: Code-like precision in spacing (8px base unit), monospace accents, and terminal-inspired visual language

### 2. Color Palette
- **Primary**: `#000000` (Black), `#FFFFFF` (White)
- **Neutral Scale**: `#FAFAFA` (Background), `#F5F5F5` (Card BG), `#EAEAEA` (Borders), `#666666` (Secondary Text), `#111111` (Primary Text)
- **Accent Gradients**: Radial mesh gradients (Warm: Orange/Yellow/Red, Cool: Cyan/Teal/Blue) used exclusively in hero zones
- **Semantic**: Blue for interactive links, subtle gray for disabled states

### 3. Font Stack
- **Primary**: Geist Sans (Variable font, weight range 400-700)
- **Monospace**: Geist Mono (for code snippets, technical badges, and tabular data)
- **Strategy**: Tight letter-spacing (-0.02em) on headings, 1.5 line-height on body, font-smoothing: antialiased

### 4. Texture
- **Grid Lines**: Subtle 1px vertical/horizontal rules creating spatial zones
- **Noise/Grain**: Subtle film grain overlay on gradient backgrounds (opacity ~3%)
- **Micro-interactions**: 1px border color shifts on hover, scale(1.02) transforms on cards
- **Geometric Accents**: SVG triangles, wireframe globes, and connection-node diagrams

### 5. Motion Design
- **Easing**: `cubic-bezier(0.23, 1, 0.32, 1)` (smooth deceleration)
- **Duration**: 200ms for micro-interactions, 600ms for section transitions
- **Effects**: Staggered fade-in on scroll (0.1s delay between items), globe rotation, tab content cross-fade

## Component Guidelines

### Button
- **Primary**: Black fill (#000), white text, rounded-full (9999px radius), padding 12px 24px, hover: opacity 0.9
- **Secondary**: Transparent fill, 1px border (#eaeaea), black text, rounded-full, hover: border-color #000
- **Ghost**: No border, black text with arrow icon, hover: translateX(4px) on arrow

### Card
- **Bento Card**: White background, 1px solid #eaeaea border, border-radius 12px, padding 24px-32px
- **Hover State**: Box-shadow 0 4px 20px rgba(0,0,0,0.08), transform translateY(-2px)
- **Internal Grid**: Cards often contain nested illustrations with device frames or abstract UI mockups

### Navigation
- **Top Bar**: Fixed position, white/transparent background, blur backdrop (8px), border-bottom 1px solid transparent (solid on scroll)
- **Dropdowns**: Full-width mega menus with category headers (h5) and grid-based link arrangements
- **Mobile**: Sheet overlay with stack navigation

### Input
- **Search/Command**: Rounded-full, gray background (#f5f5f5), no border, placeholder gray-500, focus: ring-2 ring-black

### Typography
- **H1**: 48px-64px, font-weight 700, letter-spacing -0.02em, line-height 1.1
- **H2**: 32px-40px, font-weight 600, letter-spacing -0.01em
- **Body**: 16px-18px, font-weight 400, color #666 (secondary) / #111 (primary)
- **Caption/Badge**: 12px-14px, uppercase tracking wider, Geist Mono for technical labels

## Distinctive Element Few-shot Examples

### 1. Hero Section with Gradient Mesh
**Purpose:** Primary conversion zone establishing brand identity and value proposition for the AI Cloud platform.

**Evidence:**
- DOM: `hero-module__pXb8lW__root` containing h1 "Build and deploy on the AI Cloud"
- SVG: `triangle-module__d-3XEG__triangle` (centered geometric mark)
- Layout: Centered text stack over full-width gradient mesh background with radiating line patterns
- CTAs: "Start Deploying" (primary black pill) and "Get a Demo" (secondary white pill)

**Visual Rules:**
- Layout: Full viewport height (min-h-screen), flex column center, z-index layering (content above gradient)
- Color: Radial gradient mesh blending warm (orange/red) and cool (cyan/teal) tones at 30-40% opacity, overlaid with fine line pattern (0.5px white lines radiating from center)
- Typography: H1 centered, max-width 20ch, white or black text depending on gradient contrast (dark text on light gradient)
- Spacing: 24px gap between headline and subtext, 32px gap between subtext and button row
- Radius / border / shadow: Buttons fully rounded (pill shape), no border on primary, 1px border on secondary
- Motion: Subtle gradient shift on load (20s infinite loop), button hover scale(1.05), triangle SVG gentle float animation

**Recreation Prompt:**
> Create a hero section with a centered layout containing a large headline "Build and deploy on the AI Cloud", subtext description, and two pill-shaped buttons side by side. The background should be a complex radial gradient mesh mixing soft orange, yellow, and teal colors with a subtle overlay of radiating white lines creating a sunburst effect from the center. Include a central geometric element (abstract triangle or logo mark) positioned between the text and gradient. Use a clean sans-serif font with tight letter-spacing. Buttons should have a magnetic hover effect and the entire section should feel airy with generous padding.

**Structure Sketch:**
```html
<section class="hero relative min-h-screen flex items-center justify-center overflow-hidden">
  <!-- Gradient Mesh Background -->
  <div class="absolute inset-0 bg-gradient-mesh-orange-teal opacity-40" />
  <div class="absolute inset-0 bg-[url('radiating-lines.svg')] opacity-20" />
  
  <!-- Content -->
  <div class="relative z-10 text-center max-w-4xl px-6">
    <h1 class="text-6xl font-bold tracking-tight text-black mb-6">
      Build and deploy on the AI Cloud.
    </h1>
    <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
      Vercel provides the developer tools and cloud infrastructure...
    </p>
    <div class="flex items-center justify-center gap-4">
      <button class="px-6 py-3 bg-black text-white rounded-full hover:opacity-90 transition">
        Start Deploying
      </button>
      <button class="px-6 py-3 bg-white text-black border border-gray-200 rounded-full hover:border-black transition">
        Get a Demo
      </button>
    </div>
  </div>
  
  <!-- Center Triangle SVG -->
  <svg class="absolute center-geo w-32 h-32 opacity-80 mix-blend-overlay" ... />
</section>
```

### 2. Bento Grid Feature Cards
**Purpose:** Showcase product capabilities (Agents, AI Apps, Web Apps, Commerce, Platform) in a scannable, modular layout that suggests composability and flexibility.

**Evidence:**
- DOM: Grid container with cards containing h3 headings "Agents", "AI Apps", "Web Apps", "Composable Commerce", "Multi-tenant Platform"
- Structure: Asymmetric grid (likely 3 columns on desktop), cards with internal illustrations and arrow-link CTAs
- Content: Each card has header text, description, and visual mockup (browser frames, terminal windows, domain lists)

**Visual Rules:**
- Layout: CSS Grid with `grid-template-columns: repeat(3, 1fr)` and varying row spans (some cards span 2 rows)
- Color: White (#fff) card backgrounds, 1px solid #eaeaea borders, black text
- Typography: Card titles in 24px-28px bold sans-serif, descriptions in 16px gray (#666)
- Spacing: 24px gap between cards, 32px internal padding (p-8)
- Radius / border / shadow: 12px border-radius, no shadow by default, subtle shadow on hover
- Motion: Staggered fade-in on scroll, card lift effect on hover (translateY -4px), arrow icon slides right on hover

**Recreation Prompt:**
> Design a bento-style grid layout containing 5-6 feature cards arranged in an asymmetric pattern (some tall, some wide). Each card should have a white background, light gray 1px border, and rounded corners. Cards contain a bold title, gray description text, and either an arrow link button or internal illustration showing UI mockups (browser windows, code terminals, or product interfaces). The grid should have visible gaps and sit on a white background with subtle vertical grid lines extending upward. On hover, cards should slightly lift with a soft shadow. Use a clean, technical aesthetic with monospace accents for technical terms.

**Structure Sketch:**
```html
<section class="py-24 px-6 max-w-7xl mx-auto">
  <div class="grid grid-cols-3 gap-6 auto-rows-min">
    <!-- Large Intro Card -->
    <div class="col-span-1 row-span-2 p-8 border border-gray-200 rounded-xl bg-white hover:shadow-lg transition">
      <h2 class="text-3xl font-bold mb-4">Your product,<br>delivered.</h2>
      <p class="text-gray-600">Security, speed, and AI included...</p>
    </div>
    
    <!-- Agents Card -->
    <div class="col-span-1 p-8 border border-gray-200 rounded-xl bg-white group">
      <h3 class="text-xl font-semibold mb-2">Agents</h3>
      <p class="text-gray-600 text-sm mb-4">Deliver more value to users...</p>
      <div class="w-12 h-12 rounded-full border border-gray-200 flex items-center justify-center group-hover:bg-gray-50">
        <svg class="w-4 h-4 group-hover:translate-x-1 transition">...</svg>
      </div>
      <!-- Internal Illustration -->
      <div class="mt-6 h-32 bg-gray-50 rounded-lg border border-gray-100" />
    </div>
    
    <!-- AI Apps Card -->
    <div class="col-span-1 p-8 border border-gray-200 rounded-xl bg-white">
      <h3 class="text-xl font-semibold mb-2">AI Apps</h3>
      <p class="text-gray-600 text-sm">Enrich any product...</p>
      <div class="flex gap-2 mt-4">
        <span class="px-3 py-1 bg-gray-100 rounded-full text-xs font-mono">Fluid</span>
        <span class="px-3 py-1 bg-gray-100 rounded-full text-xs font-mono">AI SDK</span>
      </div>
    </div>
    
    <!-- Additional cards... -->
  </div>
</section>
```

### 3. Use Case Tabs with Social Proof Stats
**Purpose:** Demonstrate platform versatility across different verticals while leveraging social proof through prominent customer metrics.

**Evidence:**
- DOM: `tabs-module__ree8gq__root` with role="tablist" containing buttons: "AI Apps", "Web Apps", "Ecommerce", "Marketing", "Platforms"
- Content: Large text stats ("runway build times went from 7m to 40s", "LEONARDO.AI saw a 95% reduction", "zapier saw 24x faster")
- CTA: "Deploy AI Apps in seconds" button with sparkle icon

**Visual Rules:**
- Layout: Tabs in horizontal flex row (overflow-x-auto on mobile), content split between stats text (left) and description/CTA (right)
- Color: Active tab has black text and bottom border, inactive tabs have gray text; company names (runway, LEONARDO.AI) in bold black, stats in regular weight
- Typography: Mixed weight typography—bold brand names, regular metrics, 18-20px size for stats
- Spacing: 32px padding on content areas, 16px gap between tabs
- Radius / border / shadow: Tabs have no border-radius (rectangular), active state indicated by 2px bottom border (black)
- Motion: Tab switching triggers horizontal slide transition on content, underline animates to active tab position

**Recreation Prompt:**
> Create a tabbed interface section with a horizontal row of pill-shaped or rectangular tabs (AI Apps, Web Apps, Ecommerce, Marketing, Platforms) at the top. Below, a split layout showing large typography social proof stats on the left (e.g., "runway build times went from 7m to 40s" with company names in bold and metrics in regular weight) and a description paragraph with a dark CTA button on the right. The active tab should have a black bottom border or filled background. Transition between tabs should fade/slide the content horizontally. Use a clean, editorial typography style with strategic bolding for emphasis.

**Structure Sketch:**
```html
<section class="py-20 border-t border-gray-200">
  <div class="max-w-7xl mx-auto px-6">
    <!-- Tab List -->
    <div class="flex gap-8 border-b border-gray-200 mb-12" role="tablist">
      <button class="pb-4 text-black font-medium border-b-2 border-black">AI Apps</button>
      <button class="pb-4 text-gray-500 hover:text-black transition">Web Apps</button>
      <button class="pb-4 text-gray-500 hover:text-black transition">Ecommerce</button>
      <!-- ... -->
    </div>
    
    <!-- Tab Content -->
    <div class="grid grid-cols-2 gap-16 items-center">
      <div class="space-y-4">
        <p class="text-2xl leading-relaxed text-gray-800">
          <span class="font-bold text-black">runway</span> build times went from 7m to 40s.
        </p>
        <p class="text-2xl leading-relaxed text-gray-800">
          <span class="font-bold text-black">LEONARDO.AI</span> saw a 95% reduction in page load times.
        </p>
        <p class="text-2xl leading-relaxed text-gray-800">
          <span class="font-bold text-black">_zapier</span> saw 24x faster builds.
        </p>
      </div>
      
      <div class="space-y-6">
        <p class="text-gray-600 text-lg">
          Get started using our pre-built templates. Easily stream long-running LLM responses...
        </p>
        <button class="px-6 py-3 bg-black text-white rounded-full flex items-center gap-2 hover:opacity-90">
          Deploy AI Apps in seconds
          <svg class="w-4 h-4">...</svg>
        </button>
      </div>
    </div>
  </div>
</section>
```

### 4. Infrastructure Globe Visualization
**Purpose:** Communicate global CDN and edge network capabilities through an abstract, technical visualization that suggests worldwide distribution.

**Evidence:**
- DOM: `globe-module__QBqKTa__region` with text "Nodes on the globe are sending out small pulses to indicate activity"
- Heading: "Deploy once, deliver everywhere."
- Visual: Wireframe globe with triangular markers, pulsing dot indicators, and connecting lines suggesting network activity
- Buttons: "More about Infrastructure" (primary) and "Learn about Enterprise" (secondary)

**Visual Rules:**
- Layout: Centered text block above full-width visualization, globe positioned in lower half of section
- Color: Monochrome—light gray wireframe (#ddd) for globe structure, black (#000) for nodes and text, subtle blue pulses for activity indicators
- Typography: Large centered headline (36-40px), smaller centered subtext (18px, gray), two buttons centered below
- Spacing: 48px below headline, 32px below buttons, globe takes remaining height (min-h-[600px])
- Radius / border / shadow: Globe constructed from SVG lines and shapes, no fill (wireframe style), pulsing circles with box-shadow animations
- Motion: Globe slowly rotates (CSS rotation or canvas), nodes pulse with radial ripples (scale 1 to 2, opacity 1 to 0), triangles float at connection points

**Recreation Prompt:**
> Design a section with a centered text header "Deploy once, deliver everywhere" and subtext explaining global availability. Below the text, two rounded buttons side by side. The background should feature a large, abstract wireframe globe visualization (SVG or Canvas) positioned at the bottom center, extending beyond the viewport. The globe should have triangular markers at connection points, thin lines representing network topology, and pulsing circular nodes indicating activity. Use a monochrome palette (black lines on white/light gray background) with subtle animation on the pulses. The overall feel should be technical, precise, and suggestive of distributed systems.

**Structure Sketch:**
```html
<section class="py-24 border-t border-gray-200 relative overflow-hidden">
  <div class="max-w-4xl mx-auto text-center px-6 mb-16 relative z-10">
    <h2 class="text-4xl font-bold mb-6">Deploy once, deliver everywhere.</h2>
    <p class="text-lg text-gray-600 mb-8">
      When you push code to Vercel, we make it instantly available across the globe.
    </p>
    <div class="flex justify-center gap-4">
      <button class="px-6 py-3 bg-black text-white rounded-full">More about Infrastructure</button>
      <button class="px-6 py-3 border border-gray-300 rounded-full hover:border-black transition">Learn about Enterprise</button>
    </div>
  </div>
  
  <!-- Globe Visualization -->
  <div class="relative h-[600px] w-full flex items-end justify-center">
    <svg class="w-full h-full absolute bottom-0 opacity-30" viewBox="0 0 1200 600">
      <!-- Wireframe globe arcs -->
      <path d="M100,600 Q600,-200 1100,600" fill="none" stroke="#ddd" stroke-width="1" />
      <path d="M200,600 Q600,0 1000,600" fill="none" stroke="#ddd" stroke-width="1" />
      <!-- Triangular markers -->
      <polygon points="600,200 610,220 590,220" fill="black" />
      <!-- Pulsing nodes -->
      <circle cx="600" cy="300" r="4" fill="black">
        <animate attributeName="r" values="4;20" dur="2s" repeatCount="indefinite" />
        <animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>
</section>
```

### 5. Framework Definition Block
**Purpose:** Illustrate the "Framework-Defined Infrastructure" concept by visually connecting the Vercel platform to multiple frontend frameworks.

**Evidence:**
- DOM: Section with h2 "Framework-Defined Infrastructure" and text "From code to infrastructure in one git push"
- Visual: Diagram showing Vercel triangle logo at center with colored lines connecting to framework icons (Svelte, Vite, Next.js, Nuxt, Turbopack)
- Layout: Split composition with illustration left, text right (or vice versa)

**Visual Rules:**
- Layout: Two-column grid (50/50), illustration side contains the connection diagram, text side contains badge, heading, and paragraph
- Color: Multi-colored connection lines (matching framework brand colors—orange for Svelte, blue for React/Next.js, green for Vue/Nuxt, etc.) on white background
- Typography: Small uppercase badge "Framework-Defined Infrastructure" with cube icon, large bold heading (32px), regular body text (16px gray)
- Spacing: 64px gap between columns, content vertically centered
- Radius / border / shadow: Framework icons in rounded squares or circles (40x40px), connection lines 2px stroke with slight curve (bezier)
- Motion: Lines draw in from center to frameworks on scroll (stroke-dashoffset animation), icons pop in with scale from 0.8 to 1

**Recreation Prompt:**
> Create a two-column feature section. The left column contains an abstract network diagram: a central black circle with the Vercel triangle logo inside, connected by curved colored lines to various framework icons (Next.js, Svelte, Nuxt, etc.) arranged in a semicircle around it. Each connection line uses the framework's brand color. The right column contains a small badge with a cube icon reading "Framework-Defined Infrastructure", a large bold headline "From code to infrastructure in one git push", and descriptive text. The diagram should have an animated "draw-in" effect where lines appear to grow from the center outward. Use a clean, technical illustration style with flat colors.

**Structure Sketch:**
```html
<section class="py-24 border-t border-gray-200">
  <div class="max-w-7xl mx-auto px-6 grid grid-cols-2 gap-16 items-center">
    <!-- Diagram Side -->
    <div class="relative h-[400px] flex items-center justify-center">
      <!-- Connection Lines (SVG) -->
      <svg class="absolute inset-0 w-full h-full">
        <path d="M200,200 Q300,100 400,150" stroke="#ff3e00" stroke-width="2" fill="none" /> <!-- Svelte orange -->
        <path d="M200,200 Q300,300 400,250" stroke="#000" stroke-width="2" fill="none" /> <!-- Next black -->
        <!-- ... more connections -->
      </svg>
      
      <!-- Central Vercel Node -->
      <div class="w-16 h-16 bg-black rounded-full flex items-center justify-center z-10 shadow-xl">
        <svg class="w-8 h-8 text-white" viewBox="0 0 76 65">...</svg>
      </div>
      
      <!-- Framework Icons (positioned absolutely or via flex) -->
      <div class="absolute top-10 left-10 w-12 h-12 bg-white border border-gray-200 rounded-xl flex items-center justify-center shadow-sm">
        <img src="svelte-logo.svg" class="w-6 h-6" />
      </div>
      <!-- ... more framework nodes -->
    </div>
    
    <!-- Text Side -->
    <div>
      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gray-100 text-sm font-medium mb-6">
        <svg class="w-4 h-4"><!-- cube icon --></svg>
        Framework-Defined Infrastructure
      </div>
      <h2 class="text-3xl font-bold mb-4">From code to infrastructure in one git push.</h2>
      <p class="text-lg text-gray-600">
        Vercel deeply understands your app to provision the right resources and optimize for high-performance apps.
      </p>
    </div>
  </div>
</section>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** mixed

#### Color Roles
- **color.text.primary:** #4d4d4d (108)
- **color.text.secondary:** #4d4d4d (49)
- **color.surface.base:** #ffffff (13)
- **color.accent:** #666666 (118)
- **color.border.default:** #4d4d4d (108)
- **color.focus.ring:** #4d4d4d (108)

#### Typography Roles
- **font.family.primary:** Geist (219)
- **font.family.secondary:** Geist Mono (32)
- **font.size.display:** 48px (35)
- **font.size.body:** 12px (38)
- **font.size.label:** 12px (49)
- **ratio:** display is 4x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 2px (284)
- **space.2:** 12px (265)
- **space.3:** 10px (34)
- **space.4:** 16px (30)
- **space.5:** 8px (25)

#### Radius Roles
- **radius.medium:** 6px (41)
- **radius.pill:** 100px (11)

#### Shadow Intent
- **level:** layered
- **usage:** 16
- **note:** 5 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** moderate
- **range:** 90-400ms
- **common durations:** 100ms (59), 150ms (57), 90ms (5)
- **easing style:** ease-in-out (37), cubic-bezier(0.39, 0.18, 0.17, 0.99) (1), ease-out (1)

### Distinctive Implementation Signals

- Frequent pill radius (100px) creates a soft/capsule interaction language.
- Elevation appears as a recurring material cue, not a one-off decoration.
- Motion is moderate, centered around 90-400ms.
- Type hierarchy is ratio-driven: display is 4x body.

### Extraction Diagnostics

- Sampled 280 visible elements from 3062 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.