everlane.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
## Design System
### 1. Core Style
Minimalist editorial luxury with a focus on transparency and sustainability. Clean, grid-based layouts with abundant whitespace, allowing photography to dominate. The aesthetic balances high-fashion editorial sensibility with accessible e-commerce functionality. Visual hierarchy relies on scale contrast between oversized serif display type and small, functional sans-serif UI elements.

### 2. Color Palette
Monochromatic neutral base: warm off-white backgrounds, true black or charcoal for primary text and UI, light warm gray for secondary backgrounds and input fields. Color is introduced primarily through product photography and campaign imagery rather than interface elements. No gradients; flat, matte finishes throughout.

### 3. Font Stack
Dual-type system: elegant transitional serif for campaign headlines and editorial moments (high contrast, refined letterforms), paired with clean geometric sans-serif for navigation, product information, and utility text. Extensive use of uppercase setting with wide letter-spacing for labels, navigation, and CTAs.

### 4. Texture
Flat, paper-like surfaces with no drop shadows or dimensional effects (except for modal overlays). Photography features natural, film-like grain with soft, diffused lighting. Product imagery appears against seamless neutral backgrounds. Sharp, defined edges on all containers and images—minimal border radius throughout.

### 5. Motion Design
Restrained, editorial pacing. Subtle parallax on hero imagery, fade-in reveals for modal overlays, and gentle scale transforms on product image hover. No bouncing, elastic, or aggressive transitions. Motion serves to reveal content rather than decorate it, maintaining a calm, sophisticated browsing experience.

## Component Guidelines
### Button
Rectangular with sharp corners (zero border radius). Primary actions use solid charcoal or black fills with white uppercase text and wide letter-spacing. Secondary actions use transparent backgrounds with underlined text. Minimal horizontal padding, generous vertical padding. No shadows or borders.

### Card
Invisible containers with no visible borders, backgrounds, or shadows. Content separated by whitespace and typography hierarchy alone. Product cards consist of image (top) and text metadata (bottom) with tight coupling but no enclosing frame.

### Navigation
Horizontal inline menu with generous spacing between items. Uppercase sans-serif text with wide tracking. Sticky positioning with subtle background blur or solid fill on scroll. No dropdown indicators or decorative elements—clean typographic list.

### Input
Minimal chrome: light gray background fills with no borders or bottom-borders only. Large touch targets with generous internal padding. Placeholder text in sentence case, labels in small uppercase. Checkbox selections use simple square indicators without custom styling.

### Typography
Editorial hierarchy emphasizing dramatic scale differences: large serif headlines (heroic scale), small uppercase sans-serif for section labels and navigation, standard sans-serif for body and product descriptions. Line-height is generous in headlines, tight in labels.

## Distinctive Element Few-shot Examples

### 1. Split-Screen Email Capture Modal
**Purpose:**
High-priority conversion element for first-time visitors, balancing lifestyle brand imagery with clear incentive messaging and preference segmentation.

**Evidence:**
DOM contains `form.needsclick.klaviyo-form` with "20% Off Your First Order" text, email input field, and checkbox group for "Women/Men/Both" preferences. Screenshots display a centered modal with left-side lifestyle photography (model in olive silk dress) and right-side white form panel with charcoal submit button.

**Visual Rules:**
- Layout: Centered viewport modal with 50/50 horizontal split (image left, form right), sharp corners, no border radius
- Color: Pure white form panel, charcoal dark gray button, light warm gray input backgrounds, heavy dark overlay on backdrop
- Typography: Large serif headline for discount offer, small uppercase sans-serif for brand wordmark at top, clean sans-serif for legal disclaimer
- Spacing: Generous internal padding (60px+) creating breathing room around form elements, clear separation between image and content zones
- Radius / border / shadow: Zero radius on modal container, no borders, heavy backdrop dimming (dark gray semi-transparent overlay)
- Motion: Fade-in backdrop, subtle upward slide on modal appearance, smooth transitions on input focus

**Recreation Prompt:**
>Create a centered email signup modal with 50/50 horizontal split layout. Left side: full-bleed lifestyle photography featuring fashion model in natural soft light, film-like texture. Right side: white background panel with brand wordmark in spaced uppercase letters at top, large elegant serif headline reading "20% Off Your First Order", supporting text in clean sans-serif, email input with light gray fill and no visible border, dark charcoal submit button with white uppercase text and wide letter-spacing, checkbox group for style preferences with minimal square indicators, and underlined text link for dismissal at bottom. Modal should have sharp corners and appear over darkened semi-transparent backdrop.

**Structure Sketch:**
```html
<div class="modal-overlay" role="dialog" aria-modal="true">
  <div class="email-capture-modal">
    <div class="modal-visual">
      <img src="model-lifestyle.jpg" alt="Model wearing silk dress">
    </div>
    <div class="modal-form-content">
      <button class="close" aria-label="Close">×</button>
      <div class="brand-wordmark">EVERLANE</div>
      <h2 class="headline-serif">20% Off<br>Your First Order</h2>
      <p class="offer-details">Plus, be the first to hear about new arrivals, special offers, and more.</p>
      <form>
        <input type="email" placeholder="Email Address" aria-label="Email Address">
        <button type="submit" class="primary-button">UNLOCK 20% OFF</button>
        <fieldset class="preference-select">
          <legend>What styles are you interested in?</legend>
          <label><input type="checkbox"> Women</label>
          <label><input type="checkbox"> Men</label>
          <label><input type="checkbox"> Both</label>
        </fieldset>
      </form>
      <button class="text-dismiss">No Thanks</button>
    </div>
  </div>
</div>
```

### 2. Editorial Full-Bleed Hero Section
**Purpose:**
Immersive campaign storytelling that establishes seasonal or collection narrative with minimal UI interference, prioritizing emotional visual impact.

**Evidence:**
DOM shows `div.builder-block.hp-hero` containing "Simply Feminine" text and "SHOP DRESSES" CTA with arrow prefix. Position indicates full viewport width (1512px) and substantial height (847px). Screenshot reveals large serif typography overlaid on atmospheric photography with model in flowing dress.

**Visual Rules:**
- Layout: Full viewport width and 80-90vh height, text block positioned bottom-left or center-left with substantial padding from edges
- Color: White or cream text over contrasting photography, ensuring legibility through image selection rather than overlays
- Typography: Oversized serif font for main headline (dramatic scale), smaller uppercase sans-serif for body copy and CTAs with arrow indicators
- Spacing: Generous left and bottom padding (80-120px), loose line-height for editorial headlines
- Radius / border / shadow: No borders or radius on container, optional subtle text shadow for legibility
- Motion: Parallax scroll effect on background image, fade-in or slide-up text animation on page load

**Recreation Prompt:**
>Create a full-bleed hero section spanning 100% viewport width and 85vh height. Background: high-resolution fashion photography with model in flowing garment, natural lighting with soft shadows, slightly desaturated warm tones. Bottom-left aligned text block with large elegant serif headline in white (e.g., "SIMPLY FEMININE"), supporting sans-serif text describing the collection, and CTA link with arrow prefix "→ SHOP DRESSES" in uppercase sans-serif with underline hover state. Typography should feel magazine-editorial with generous line-height on headline and ample breathing room around text block.

**Structure Sketch:**
```html
<section class="hero-editorial">
  <div class="hero-media">
    <img src="campaign-hero.jpg" alt="Simply Feminine collection">
  </div>
  <div class="hero-text-block">
    <h1 class="display-serif">SIMPLY<br>FEMININE</h1>
    <p class="hero-description">Effortless silhouettes, forever in your wardrobe. A new dress for every moment.</p>
    <a href="#" class="text-cta">
      <span class="arrow">→</span>
      <span>SHOP DRESSES</span>
    </a>
  </div>
</section>
```

### 3. Minimalist Product Feature Grid
**Purpose:**
Showcase curated product selections (bestsellers, new arrivals) in a gallery-like format that emphasizes product photography and reduces cognitive load.

**Evidence:**
DOM section with class `css-88hukf` contains "Everyone's Obsessed" heading followed by product listings: "Notch Collar Shirtdress in Silk Georgette S$420", etc. Structure indicates 4-column layout with 24 media items. Screenshot displays products against light gray background with small uppercase product names and prices below images.

**Visual Rules:**
- Layout: 4-column grid on desktop, single or double column on mobile, consistent portrait aspect ratio for product images (3:4 or 4:5)
- Color: Light warm gray background, black text for product names, no colored accents or borders
- Typography: Small uppercase sans-serif for product names (single line or double line), standard case for prices, all left-aligned below images
- Spacing: Tight grid gaps (16-24px), generous section padding, small margin (8-12px) between image and text
- Radius / border / shadow: Zero border radius on images, no shadows, no card borders or backgrounds
- Motion: Subtle zoom on image hover (scale 1.03-1.05), underline animation on product name hover

**Recreation Prompt:**
>Create a 4-column product grid section with light warm gray background. Section header with small uppercase label "Everyone's Obsessed" and supporting text left-aligned at top with "SHOP" link. Each product card: full-bleed product image with sharp corners against gray background, no border or shadow. Below image: product name in small uppercase sans-serif (e.g., "NOTCH COLLAR SHIRTDRESS IN SILK GEORGETTE") on two lines if needed, price below in standard case. Grid gap of 20px. Images should have subtle scale-up effect on hover. Clean, gallery-like presentation resembling editorial lookbook rather than traditional e-commerce grid.

**Structure Sketch:**
```html
<section class="product-feature">
  <header class="section-header">
    <h2 class="section-label">Everyone's Obsessed</h2>
    <p>Better-for-you styles you'll love, too.</p>
    <a href="#" class="section-link">SHOP Cult Favorites</a>
  </header>
  <div class="product-grid">
    <article class="product-tile">
      <a href="#">
        <div class="product-image">
          <img src="product-1.jpg" alt="Notch Collar Shirtdress">
        </div>
        <h3 class="product-name">NOTCH COLLAR SHIRTDRESS IN SILK GEORGETTE</h3>
        <p class="product-price">S$420</p>
      </a>
    </article>
    <!-- Additional product tiles -->
  </div>
</section>
```

### 4. Sticky Minimalist Header
**Purpose:**
Persistent navigation providing immediate access to main categories while maintaining clean aesthetic and not competing with content.

**Evidence:**
DOM `header` element with class `header--middle-center` containing navigation list "Women Men Sustainability Everworld". CSS indicates `position: sticky` and `padding: 20px` on desktop. Screenshot shows balanced three-zone layout: left navigation, center wordmark, right utilities.

**Visual Rules:**
- Layout: Flexbox with three distinct zones (left: primary nav, center: logo, right: utilities), sticky positioning, full width with max-width container
- Color: White or transparent background transitioning to white on scroll, black text and icons, subtle bottom border (1px light gray) when sticky
- Typography: Uppercase sans-serif for navigation links, small size with wide letter-spacing and generous gap between items (32-40px)
- Spacing: Vertical padding 16-20px, horizontal padding 40-60px, centered alignment of wordmark
- Radius / border / shadow: No border radius, single bottom border separator when scrolled, no shadow
- Motion: Background color transition on scroll, optional height reduction when sticky

**Recreation Prompt:**
>Create a sticky site header with white background and flex layout containing three zones. Left zone: horizontal inline menu with items "WOMEN", "MEN", "SUSTAINABILITY", "EVERWORLD" in uppercase sans-serif with wide letter-spacing and 32px gaps. Center zone: brand wordmark "EVERLANE" in spaced uppercase letters. Right zone: utility links "SEARCH", "ACCOUNT", "BAG" with optional icons. Header has generous vertical padding (20px) and adds subtle 1px bottom border when scrolled. Clean, magazine-style navigation with no dropdown arrows or decorative elements.

**Structure Sketch:**
```html
<header class="site-header">
  <nav class="primary-nav" aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="#">Women</a></li>
      <li><a href="#">Men</a></li>
      <li><a href="#">Sustainability</a></li>
      <li><a href="#">Everworld</a></li>
    </ul>
  </nav>
  <div class="brand-center">
    <a href="/" class="wordmark">EVERLANE</a>
  </div>
  <div class="utility-nav">
    <a href="#" class="utility-link">Search</a>
    <button class="utility-link">Account</button>
    <button class="utility-link" aria-label="Shopping bag">Bag</button>
  </div>
</header>
```

### 5. Rotating Announcement Bar
**Purpose:**
Display time-sensitive promotional messages and shipping policies in a compact, non-intrusive format at the top of the viewport.

**Evidence:**
DOM `slideshow-component` with class `announcement-bar` containing rotating messages: "Enjoy free shipping on S.G. orders over $150" and "Bundle & Save on Best Sellers". Height indicated as 32px, positioned at top of viewport.

**Visual Rules:**
- Layout: Full width, fixed slim height (32-40px), centered text alignment, auto-rotating slide content
- Color: White or off-white background matching header, dark charcoal or black text, no borders
- Typography: Tiny uppercase sans-serif (11-12px), wide letter-spacing, centered alignment
- Spacing: Minimal vertical padding, horizontal centering, tight line-height
- Radius / border / shadow: No radius, no shadow, clean separation from main header via spacing or subtle line
- Motion: Horizontal slide or fade transition between messages every few seconds, pause on hover

**Recreation Prompt:**
>Create a slim announcement bar at the very top of the viewport, full width, fixed height of 32px. White background with centered uppercase sans-serif text in small size with wide tracking displaying messages like "ENJOY FREE SHIPPING ON S.G. ORDERS OVER $150." If multiple messages exist, auto-rotate with smooth horizontal slide or fade transition. Include text links within messages (e.g., "Shop Now") underlined for emphasis. No close button, minimal padding, clean separation from main navigation header below.

**Structure Sketch:**
```html
<div class="announcement-bar" role="region" aria-label="Promotional announcements">
  <div class="announcement-slider">
    <div class="announcement-slide active">
      <span>ENJOY FREE SHIPPING ON S.G. ORDERS OVER $150.</span>
    </div>
    <div class="announcement-slide">
      <span>BUNDLE & SAVE ON BEST SELLERS</span>
      <a href="#" class="inline-link">Shop Now</a>
    </div>
  </div>
</div>
```

## 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:** #000000 (125)
- **color.text.secondary:** #000000 (51)
- **color.surface.base:** #ffffff (5)
- **color.accent:** #000000 (126)
- **color.border.default:** #000000 (124)
- **color.focus.ring:** #000000 (125)

#### Typography Roles
- **font.family.primary:** Maison Neue Book (136)
- **font.family.secondary:** Maison Neue (10)
- **font.size.display:** 32px (2)
- **font.size.body:** 14px (29)
- **font.size.label:** 13.33px (2)
- **ratio:** display is 2.29x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 3px (38)
- **space.2:** 15px (20)
- **space.3:** 12px (18)
- **space.4:** 16px (16)
- **space.5:** 8px (10)

#### Radius Roles
- Not enough evidence

#### Shadow Intent
- **level:** rare accent
- **usage:** 1
- **note:** single recurring elevation treatment

#### Motion Intent
- **level:** moderate
- **range:** 100-500ms
- **common durations:** 400ms (30), 100ms (7), 500ms (2)
- **easing style:** ease-in-out (30), cubic-bezier(0.37, 0.01, 0, 0.98) (2), ease, ease (1)

### Distinctive Implementation Signals

- Motion is moderate, centered around 100-500ms.
- Type hierarchy is ratio-driven: display is 2.29x body.

### Extraction Diagnostics

- Sampled 158 visible elements from 4507 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.