relume.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
Relume employs a sophisticated "design tool" aesthetic that balances technical credibility with creative warmth. The interface feels like a premium workspace—spacious, airy, and meticulously organized—using a warm off-white canvas that reduces eye strain while maintaining high-end SaaS positioning. The visual language communicates AI-powered efficiency through dynamic gradients, floating interface mockups, and playful cursor avatars, yet retains trust through classical serif typography and generous whitespace.

## Design System

### 1. Core Style
- **Visual Philosophy**: "Warm minimalism"—clean, grid-based layouts with organic warmth introduced through cream backgrounds and human-centric UI mockups
- **Layout Architecture**: Centered single-column narratives that break into asymmetric feature grids; heavy use of z-depth layering with floating UI elements
- **Elevation Strategy**: Soft shadows beneath floating mockups, glassmorphism in navigation dropdowns, crisp borders on input fields

### 2. Color Palette
- **Canvas**: Warm off-white/cream (eggshell) primary background creating a paper-like texture
- **Foreground**: Near-black (#1a1a1a or similar) for primary text ensuring maximum readability
- **Accents**: Dynamic gradient flows (coral-orange to magenta-purple) used for primary buttons, active states, and text highlights
- **Semantic Colors**: Soft pastels for feature categorization (mint for Sitemaps, lavender for Wireframes, peach for Style Guides)
- **UI Chrome**: White cards with subtle borders, dark navy/black for library card headers

### 3. Font Stack
- **Headlines**: High-contrast serif typeface (transitional style with sharp contrasts) for H1-H2, conveying editorial authority
- **Body**: Clean geometric sans-serif for readability at smaller sizes
- **UI Labels**: Monospace or compact sans for technical tags and keyboard shortcuts (⌘C, ⌘V)
- **Hierarchy**: Extreme scale differences between hero text (4-5rem) and supporting copy (1rem)

### 4. Texture
- **Background**: Solid warm neutrals without patterns—focus remains on content
- **Media Treatment**: Rounded corners (12-16px radius) on all interface screenshots; soft drop shadows creating "floating device" effect
- **Glassmorphism**: Navigation dropdowns use blur-backdrop effects with semi-transparent white backgrounds

### 5. Motion Design
- **Scroll Behavior**: Parallax effects on hero mockups; sticky section transitions
- **Micro-interactions**: Typing cursor animations in input fields; gradient position shifting (background-position animation creating flowing color movement)
- **Hover States**: Subtle lift effects on cards; image opacity dimming in showcase grids (hover reduces sibling opacity to 0.5)
- **Continuous**: Marquee scrolling for website showcase galleries; animated cursor avatars (Jessica/Mario) that float and bounce

## Component Guidelines

### Button
- **Primary**: Solid black or gradient-filled (orange-purple flow), high padding (16px 32px), fully rounded pill shape or sharp 8px radius
- **Secondary**: Ghost style with 1px border, transparent background, black text
- **Tertiary**: Text-only with arrow icons, minimal padding

### Card
- **Library Cards**: White body with large rounded corners (16px+), prominent dark gradient header image occupying top 40%, shadow-elevated on hover
- **Feature Cards**: Minimal chrome—large typography with small icon badges, generous internal padding (40px+)
- **Testimonial Cards**: Clean white with subtle border, avatar + name + handle structure

### Navigation
- **Structure**: Fixed top bar with blur backdrop, logo left, dropdowns center, CTAs right
- **Dropdowns**: Mega-menu style with product cards featuring icons and descriptions, appearing with fade-slide animation
- **Mobile**: Hamburger with full-screen overlay

### Input
- **Hero Input**: Large text field with animated gradient border (rotating hue), internal padding 20px+, rounded corners, integrated "Generate" button inside right edge
- **Standard**: Clean underline or bordered style with focus state showing gradient accent

### Typography
- **Hero**: Center-aligned, max-width constrained (800-900px), massive scale (4-5rem), serif font for trust/authority
- **Section Headers**: Left-aligned or centered, with eyebrow text (uppercase, tracked, small) above large H2s
- **Body**: Gray-600 equivalent color, line-height 1.6, max-width 65ch for readability

## Distinctive Element Few-shot Examples

### 1. Hero Section with Floating Mockups & Cursor Avatars
**Purpose:**
Immediate product visualization and social proof through UI screenshots and collaborative presence indicators, establishing the tool's output quality and team-oriented nature.

**Evidence:**
DOM shows `section_new-home_header control-experiment` containing "Jessica" and "Mario" cursor elements, multiple floating website mockup images (`.new-home_header_image`), and the heading "Websites designed & built faster with AI". CSS references `will-change: transform` on cursor elements indicating parallax/animation.

**Visual Rules:**
- Layout: Full viewport height section, centered text container with z-index above floating mockups positioned absolute left/right/bottom
- Color: Cream background, black text, yellow cursor labels ("Jessica") with small triangular speech pointers
- Typography: Massive serif headline (4-6rem) centered, sans-serif subheading (1.25rem) gray
- Spacing: Generous padding top (120px+), mockups breaking bottom boundary extending into next section
- Radius / border / shadow: Mockups have 12px border-radius, soft diffuse shadow (0 20px 60px rgba(0,0,0,0.1))
- Motion: Cursor avatars float with independent parallax scroll speeds; mockups have subtle hover lift; text fades in on load

**Recreation Prompt:**
> Create a hero section with a warm cream background. Center a large serif headline "Websites designed & built faster with AI" with a smaller gray subheading below. Position floating website mockup screenshots absolutely around the text—one large pink-themed site mockup on the left, a blue aviation site on the right, and mobile mockups scattered. Add two floating cursor avatars labeled "Jessica" (yellow badge) and "Mario" (implied) that move with parallax scroll. Include a large input field below the text with an animated gradient border (coral to purple) and a "Generate" button inside it. Use a "Shuffle" text button with crossed arrows icon in the bottom left corner.

**Structure Sketch:**
```html
<header class="hero">
  <div class="floating-mockup left">[Pink website screenshot]</div>
  <div class="floating-mockup right">[Blue website screenshot]</div>
  
  <div class="cursor-avatar" data-name="Jessica">[Cursor icon]</div>
  <div class="cursor-avatar" data-name="Mario">[Cursor icon]</div>
  
  <div class="hero-content">
    <h1>Websites designed & built faster with AI</h1>
    <p>Use AI as your design ally...</p>
    
    <div class="input-wrapper gradient-border">
      <input type="text" placeholder="Describe a company..." />
      <button>Generate</button>
    </div>
  </div>
  
  <button class="shuffle-btn">Shuffle</button>
</header>
```

### 2. Workflow Feature Section (Prompt → Sitemap → Wireframe → Style Guide)
**Purpose:**
Step-by-step visualization of the product workflow using gradient-accented typography and alternating layout patterns to guide the user through the value chain.

**Evidence:**
DOM contains `section_new-home_primary-feature` with headings "Prompt to", "Sitemap", "Sitemap to", "Wireframe", etc. CSS shows `@keyframes gradientAnimation` with `linear-gradient(100deg, var(--orange), var(--red) 42%, var(--purple) 85%)` applied to text via `background-clip: text`. Structure uses `w-layout-grid` for two-column alternating layouts.

**Visual Rules:**
- Layout: Alternating two-column grid (text left/image right, then reverse) with generous vertical spacing (200px+ between steps)
- Color: Gradient text headings (orange-to-purple flow) for "Prompt to", "Sitemap to", etc.; black for secondary headings
- Typography: Large sans-serif for workflow connectors ("Sitemap to"), massive bold serif for destination states ("Wireframe")
- Spacing: 80px+ gaps between text and visual content; feature boxes have internal padding 40px
- Radius / border / shadow: Feature cards have light gray borders (1px) and 16px radius; screenshot mockups float with elevation
- Motion: Gradient text has continuous slow animation (10s ease-in-out infinite) shifting background position; images fade in on scroll

**Recreation Prompt:**
> Build a feature section showing a 3-step workflow. Each step uses an alternating two-column layout. The left side contains small uppercase eyebrow text in gradient colors (orange-purple), a large bold heading like "Prompt to Sitemap" where the connector words are in animated gradient text and the destination is in black serif. Below are two benefit cards with small icons. The right side shows a UI screenshot of the actual product interface (sitemap tree view or wireframe canvas) with rounded corners and soft shadow. Use a cream background throughout and ensure 120px vertical gap between each workflow step.

**Structure Sketch:**
```html
<section class="workflow-features">
  <div class="feature-row">
    <div class="feature-text">
      <span class="gradient-text">Prompt to</span>
      <h2>Sitemap</h2>
      <p>The best way to start...</p>
      <div class="benefit-grid">
        <div class="benefit-card">
          <icon>Map</icon>
          <h3>Map out key content</h3>
        </div>
        <div class="benefit-card">
          <icon>Scope</icon>
          <h3>Scope projects better</h3>
        </div>
      </div>
    </div>
    <div class="feature-visual">
      [Sitemap interface screenshot]
    </div>
  </div>
  
  <div class="feature-row reverse">
    <div class="feature-text">
      <span class="gradient-text">Sitemap to</span>
      <h2>Wireframe</h2>
      ...
    </div>
    <div class="feature-visual">
      [Wireframe interface screenshot]
    </div>
  </div>
</section>
```

### 3. Library Product Cards (3-Column Grid)
**Purpose:**
Showcase ecosystem tools (Figma, Webflow, React) with distinct visual branding while maintaining cohesive card architecture and clear value propositions.

**Evidence:**
DOM shows `section_new-home_relume-library` with `new-home_relume-library_card-wrapper is-3col` containing "Figma Library", "Webflow Library", "React Library". Each has specific iconography and feature lists with checkmarks. Cards contain "1,000+ components" metrics and "Free" or "Paid plan" badges.

**Visual Rules:**
- Layout: Three equal columns on desktop, single column mobile; cards aligned top
- Color: Each card has distinct header gradient (Figma: purple/pink, Webflow: blue, React: cyan/black); white card body; black text
- Typography: Bold sans-serif card titles (24px+), body text gray, feature list with checkmark bullets, small badges (Free/Paid) in colored pills
- Spacing: 32px internal padding; 24px gap between cards; header image takes top 40% of card height
- Radius / border / shadow: 16px border-radius on cards; subtle border (rgba(0,0,0,0.1)); shadow increases on hover
- Motion: Hover lifts card up (translateY -4px) and increases shadow; buttons show arrow movement on hover

**Recreation Prompt:**
> Create a three-column grid of product cards. Each card has a white background, 16px border-radius, and a large header image area at the top showing the product interface (Figma file, Webflow designer, React code) with brand-colored gradients. Below the image: a product icon (Figma logo, Webflow "W", React atom), bold title "Figma Library", description text, and a feature list with checkmarks. Include metadata like "1,000+ Figma components" with a small colored badge saying "Free" or "Paid plan". End with a full-width button "View Figma Library". Add hover effects that lift the card and darken the shadow.

**Structure Sketch:**
```html
<section class="library-cards">
  <div class="card-grid">
    <article class="library-card">
      <div class="card-header" style="background: purple-gradient">
        [Figma interface collage]
      </div>
      <div class="card-body">
        <icon>[Figma logo]</icon>
        <h3>Figma Library</h3>
        <p>Get access to the Figma version...</p>
        <ul class="features">
          <li><checkmark/> 1,000+ Figma components <badge>Free</badge></li>
          <li><checkmark/> Mobile Variants of each component</li>
          <li><checkmark/> Built with Figma best practices</li>
        </ul>
        <button>View Figma Library</button>
      </div>
    </article>
    
    <!-- Repeat for Webflow and React -->
  </div>
</section>
```

### 4. Collaboration Feature with Chat Interface Mockup
**Purpose:**
Demonstrate real-time collaboration capabilities through a realistic chat/thread interface embedded within the marketing page, showing authentic team communication scenarios.

**Evidence:**
DOM contains `section_new-home_secondary-features` with `new-home_collab-feature_component` showing conversation threads from "Sue Lang", "Jackson Brodie", "Client Sarah Smith" with timestamps (49 minutes ago, Just now). Includes action buttons like "Copy ⌘C", "Paste in Site Builder ⌘V".

**Visual Rules:**
- Layout: Two-column grid with text content left and a large, realistic chat interface mockup right
- Color: White/light gray chat bubbles, distinct avatar colors for each user, yellow/gold accents for "New" badges
- Typography: Sans-serif for usernames (bold) and messages (regular), small gray timestamps, monospace for keyboard shortcuts
- Spacing: Chat bubbles have 16px padding, 8px gap between messages; generous whitespace around the mockup
- Radius / border / shadow: Chat bubbles fully rounded (16-20px radius) with subtle tails; interface container has strong shadow and 1px border
- Motion: Messages stagger-fade in on scroll; typing indicators animated; buttons highlight on hover

**Recreation Prompt:**
> Design a feature section titled "Cross-team Collaboration" with a two-column layout. Left side has the heading, paragraph description, and export action buttons styled as keyboard shortcuts (Copy ⌘C, Paste in Site Builder ⌘V, Copy to Figma ⌘C). Right side shows a realistic chat interface mockup floating with shadow, containing conversation threads between "Sue Lang" (designer), "Jackson Brodie" (developer), and "Client Sarah Smith". Messages include wireframe attachments and approval reactions. Use realistic timestamps like "49 minutes ago" and "Just now". Style with rounded message bubbles, user avatars, and a "Reply" input field at the bottom of the chat mockup.

**Structure Sketch:**
```html
<section class="collaboration-feature">
  <div class="feature-content">
    <h2>Cross-team<br/>Collaboration</h2>
    <p>Collaborate with the team and clients...</p>
    
    <div class="action-buttons">
      <button>Copy <kbd>⌘C</kbd></button>
      <button>Paste in Site Builder <kbd>⌘V</kbd></button>
      <button>Copy to Figma <kbd>⌘C</kbd></button>
    </div>
  </div>
  
  <div class="chat-mockup">
    <div class="message">
      <avatar>Sue</avatar>
      <div class="bubble">
        <p>I've actioned all your comments...</p>
        <time>49 minutes ago</time>
      </div>
    </div>
    <div class="message">
      <avatar>Jackson</avatar>
      <div class="bubble">
        <p>The wireframes are ready for review @sarah 🙌🏾</p>
        <time>Just now</time>
      </div>
    </div>
    <div class="message client">
      <avatar>Sarah</avatar>
      <div class="bubble">
        <p>Damn you got this over so quick!</p>
      </div>
    </div>
  </div>
</section>
```

### 5. Showcase Marquee Gallery
**Purpose:**
Social proof through volume—displaying a continuous stream of actual websites built with the tool to inspire confidence and demonstrate variety.

**Evidence:**
DOM shows `section_new-home_showcase` with `new-home_showcase_marquee-wrapper is-left` containing multiple `new-home_showcase_collection-item` elements with website screenshots. CSS shows hover opacity effects where `.new-home_showcase_top:hover .new-home_showcase_image` reduces opacity to 0.5 except on hover.

**Visual Rules:**
- Layout: Full-width section breaking container bounds; two rows of images moving in opposite directions (marquee)
- Color: Dark background section (black or deep navy) contrasting with light page background; white text overlay on hover
- Typography: Large statistic badge ("500k+ Websites built with Relume") floating above with arrow icon
- Spacing: Images touch or have 2px gap; rows offset vertically; generous padding top/bottom (80px)
- Radius / border / shadow: Images have no border-radius or sharp 4px corners; strong contrast between image and background
- Motion: Continuous linear marquee scrolling (CSS animation translateX); hover pauses animation and highlights single image (opacity 1 while siblings dim to 0.5)

**Recreation Prompt:**
> Create a showcase section with a dark background (near-black). Center a floating badge that says "500k+ Websites built with Relume" with a right arrow. Below, implement two horizontal marquee rows of website screenshot thumbnails moving in opposite directions (left-to-right and right-to-left). Each thumbnail shows a full website design. On hover over the gallery, dim all images to 50% opacity except the currently hovered one which stays at 100% and lifts slightly. Use a seamless infinite scroll animation. The thumbnails should have sharp corners or minimal rounding and fill the full viewport width with no gaps.

**Structure Sketch:**
```html
<section class="showcase-marquee">
  <div class="stat-badge">
    <span class="stat-number">500k+</span>
    <span>Websites built with Relume</span>
    <arrow>→</arrow>
  </div>
  
  <div class="marquee-container">
    <div class="marquee-row direction-left">
      <img src="site1.jpg" />
      <img src="site2.jpg" />
      <img src="site3.jpg" />
      <!-- Duplicated for seamless loop -->
    </div>
    
    <div class="marquee-row direction-right">
      <img src="site4.jpg" />
      <img src="site5.jpg" />
      <img src="site6.jpg" />
      <!-- Duplicated for seamless loop -->
    </div>
  </div>
</section>
```

### 6. Gradient Border Input with Integrated CTA
**Purpose:**
Primary conversion element that feels energetic and AI-powered through animated gradient borders, positioned as the main interaction point in the hero.

**Evidence:**
Hero section contains input with animated gradient border (referenced in CSS as `.gradient-animation` with `linear-gradient(100deg, var(--orange), var(--red) 42%, var(--purple) 85%)` and `animation: gradientAnimation 10s ease-in-out infinite`). Input has placeholder text cycling through examples ("Create a website for an AI design tool..."). DOM shows `textInput` ID and submit logic.

**Visual Rules:**
- Layout: Full-width input container within constrained max-width (600-700px); button positioned absolute right inside input
- Color: White input background; animated border using conic or linear gradient (coral, pink, purple, orange rotation); black "Generate" button with white text
- Typography: Large input text (18px+), gray placeholder text that cycles/animates between examples
- Spacing: Padding 20px horizontal, 16px vertical; button inset 8px from right edge
- Radius / border / shadow: Input has 12px border-radius; border appears as 2-3px gradient using pseudo-element or background-clip technique; subtle glow effect on focus
- Motion: Border gradient rotates or shifts position continuously (background-position animation); placeholder text types/deletes with cursor blink (JS typewriter effect); button has hover scale

**Recreation Prompt:**
> Build a prominent input field component with a white background and an animated gradient border that slowly shifts colors (coral to purple to pink and back). The input should be large (height ~64px) with rounded corners (12px). Inside, placeholder text uses a typewriter animation cycling through examples like "Create a website for a fitness coach...", "for a marketing agency...", etc. Position a solid black "Generate" button inside the right edge of the input. Below the input, add small text "Take it for a spin with an example" where "example" is underlined and clickable. The entire component should float above the page with a subtle shadow.

**Structure Sketch:**
```html
<div class="gradient-input-wrapper">
  <div class="input-border-animation"></div>
  <input 
    type="text" 
    id="textInput"
    placeholder="Create a website"
    aria-label="Company description"
  />
  <button type="submit" class="generate-btn">Generate</button>
  
  <div class="input-helper">
    Take it for a spin with an <a href="#">example</a>
  </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:** #161616 (149)
- **color.text.secondary:** #686868 (7)
- **color.surface.base:** #ffffff (21)
- **color.accent:** #161616 (83)
- **color.border.default:** #161616 (141)
- **color.focus.ring:** #161616 (149)

#### Typography Roles
- **font.family.primary:** Relative (204)
- **font.family.secondary:** Relative Faux (1)
- **font.size.display:** 96px (27)
- **font.size.body:** 14px (6)
- **font.size.label:** 12px (3)
- **ratio:** display is 6.86x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 4.8px (96)
- **space.2:** 20px (64)
- **space.3:** 12px (41)
- **space.4:** 16px (36)
- **space.5:** 8px (27)

#### Radius Roles
- **radius.medium:** 16px (21)
- **radius.pill:** 15984px (1)

#### Shadow Intent
- **level:** rare accent
- **usage:** 14
- **note:** 3 recurring shadow treatments, compressed to intent

#### Motion Intent
- **level:** moderate
- **range:** 167-500ms
- **common durations:** 200ms (57), 300ms (15), 167ms (1)
- **easing style:** cubic-bezier(0.175, 0.885, 0.32, 1.275) (12), ease, ease (3), cubic-bezier(0.33, 0, 0, 1) (1)

### Distinctive Implementation Signals

- Frequent pill radius (15984px) creates a soft/capsule interaction language.
- Motion is moderate, centered around 167-500ms.
- Type hierarchy is ratio-driven: display is 6.86x body.

### Extraction Diagnostics

- Sampled 208 visible elements from 3865 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.