perplexity.ai 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
Warm minimalism meets cosmic curiosity. The design employs an editorial aesthetic with generous whitespace, oversized serif typography, and surreal 3D gradient spheres floating in orbital arrangements. The visual language balances organic warmth (cream backgrounds, soft shadows) with precise digital clarity (clean sans-serif UI text, crisp browser mockups).

### 2. Color Palette
- **Background**: Warm cream/off-white (`rgb(251, 250, 244)`) creating a paper-like, inviting foundation
- **Text Primary**: Deep charcoal/black for high-contrast readability
- **Text Secondary**: Muted gray for subtitles and supporting copy
- **Accent**: Muted teal/slate blue for primary actions and interactive elements
- **Cosmic Gradients**: Multi-dimensional spheres featuring teal-blue, burnt orange, burgundy, gold, and deep charcoal gradients with noise texture
- **Surface**: Pure white for elevated cards and browser chrome mockups

### 3. Font Stack
- **Display/Headlines**: Classic high-contrast serif (resembling Tiempos Headline or similar) with elegant thick-thin stroke variation
- **Body/UI**: Clean, neutral sans-serif (system-ui or Inter-like) for legibility at small sizes
- **Scale**: Dramatic size contrast between massive display text (hero) and compact functional text (navigation, captions)

### 4. Texture
- **Noise/Grain**: Subtle texture overlay on gradient spheres preventing banding and adding analog warmth
- **Shadows**: Soft, diffused shadows with large blur radius creating floating depth without harsh edges
- **Glass**: Subtle backdrop blur on floating UI elements
- **Line Work**: Thin, delicate curved lines suggesting orbital paths connecting spheres

### 5. Motion Design
- **Physics**: Spring-based animations (evidence of Framer Motion spring configs in DOM) with bounce and damping for natural movement
- **Scroll**: Smooth parallax on floating spheres; horizontal marquee scrolling for gradient sphere arrays
- **Micro-interactions**: Gentle scale and opacity transitions on interactive elements
- **Easing**: `cubic-bezier` curves favoring ease-out for entrances, linear for continuous marquees

## Component Guidelines
### Button
- **Primary**: Pill-shaped (full rounded), dark charcoal fill, white text, left-aligned icon (download arrow), generous horizontal padding
- **Secondary**: Teal/slate background, white text, rounded-full, compact size for navigation contexts
- **Ghost**: Text-only with subtle hover opacity shifts

### Card
- **Feature Cards**: Large border-radius (24px+), light gray/cream background, inner browser chrome mockup with realistic shadow
- **Capability Cards**: Floating browser window aesthetic with address bar, toolbar icons, and prompt text bubbles inside
- **Spacing**: Consistent internal padding, subtle border or shadow separation from background

### Navigation
- **Position**: Fixed top, full-width
- **Structure**: Logo left (wordmark), primary CTA right, utility icon (settings/gear) far right
- **Background**: Transparent or matching page background with blur on scroll
- **Height**: Compact, airy, allowing hero content to breathe

### Typography
- **Hero**: Centered, massive scale (80px+), serif, tight line-height, sentence case
- **Labels**: Uppercase, wide letter-spacing, small size for section indicators
- **Body**: Comfortable line-height (1.5-1.6), max-width constrained for readability

## Distinctive Element Few-shot Examples

### 1. Cosmic Hero Section
**Purpose:**
Immediate brand immersion establishing the "Comet" celestial theme while communicating the product's core value proposition through typographic hierarchy and atmospheric depth.

**Evidence:**
DOM shows `h2` headings "A new browser from Perplexity" and "The browser that works for you" with screenshot evidence of massive serif typography centered on cream background with floating gradient spheres at corners and orbital line illustrations.

**Visual Rules:**
- **Layout:** Centered text stack with asymmetric floating spheres positioned at top-left, top-right, and bottom-right corners breaking the viewport boundaries
- **Color:** Warm cream background (`#FBFAF4`) with deep charcoal text; gradient spheres in teal-orange and burgundy-gold palettes
- **Typography:** Serif display font at 4xl-6xl size for headline, sans-serif for subtitle with underline decoration on "Perplexity" link
- **Spacing:** Extreme vertical padding (120px+) creating dramatic negative space around text cluster
- **Radius / border / shadow:** Spheres are perfect circles (50% radius) with soft diffuse shadows; thin curved SVG lines connecting elements with stroke-width of 1-2px in light gray
- **Motion:** Spheres float with subtle parallax on scroll; text fades in with spring physics; orbital lines draw in with SVG path animation

**Recreation Prompt:**
> Create a hero section with a warm cream background (#FBFAF4). Center a stack of text: small uppercase label "A new browser from Perplexity" with underlined link, followed by massive serif headline "The browser that works for you" in charcoal, then smaller subheadline. Position large 3D gradient spheres (teal-blue and burnt-orange blends with noise texture) at the corners partially bleeding off-screen. Add thin curved orbital lines connecting the spheres. Use Framer Motion for floating parallax effects on the spheres and spring-based fade-in for text. Include a dark pill-shaped download button below the text with a download icon.

**Structure Sketch:**
```html
<section class="relative min-h-screen bg-[#FBFAF4] overflow-hidden flex flex-col items-center justify-center px-6 py-32">
  <!-- Floating Spheres -->
  <div class="absolute top-0 left-0 w-64 h-64 rounded-full bg-gradient-to-br from-teal-600 via-orange-400 to-burgundy-600 blur-sm opacity-90 translate-x-[-30%] translate-y-[-20%]" />
  <div class="absolute top-20 right-0 w-48 h-48 rounded-full bg-gradient-to-bl from-amber-400 via-slate-700 to-teal-800 translate-x-[40%]" />
  <div class="absolute bottom-0 right-20 w-96 h-96 rounded-full bg-gradient-to-tr from-orange-500 via-red-900 to-slate-900 translate-y-[30%]" />
  
  <!-- Orbital Lines (SVG) -->
  <svg class="absolute inset-0 w-full h-full pointer-events-none">
    <path d="M-100,200 Q400,600 800,300" stroke="#E5E5E5" stroke-width="1" fill="none" />
  </svg>
  
  <!-- Content -->
  <div class="relative z-10 text-center max-w-4xl">
    <p class="text-sm uppercase tracking-widest mb-4 text-gray-600">
      A new browser from <a href="#" class="underline">Perplexity</a>
    </p>
    <h1 class="text-6xl md:text-8xl font-serif text-gray-900 leading-tight mb-6">
      The browser that<br/>works for you
    </h1>
    <p class="text-lg text-gray-600 mb-10">Available for Mac, Windows, iOS, and Android</p>
    <button class="bg-gray-900 text-white px-8 py-4 rounded-full flex items-center gap-2 hover:scale-105 transition-transform">
      <svg class="w-5 h-5" /> Download Comet
    </button>
  </div>
</section>
```

### 2. AI Capability Feature Cards
**Purpose:**
Demonstrate product functionality through realistic browser UI mockups containing example prompts, making abstract AI capabilities tangible and contextual.

**Evidence:**
Screenshots show multiple rounded cards containing browser chrome (address bar, toolbar icons) with realistic content: Gmail interface with "Draft a reply..." prompt, Perplexity interface with "Create a study plan..." prompt, and shopping card with office chair image.

**Visual Rules:**
- **Layout:** Grid or bento-box arrangement with varying card sizes (2-column asymmetrical layout)
- **Color:** Cards use pure white or very light gray backgrounds; browser chrome uses standard gray toolbar; content areas show realistic app interfaces (Gmail, Perplexity)
- **Typography:** Sans-serif at standard browser sizes (16px) for mock content; card titles outside mockup use clean sans-serif "AI that shops"
- **Spacing:** Large internal padding (24px); generous gap between cards (32px); rounded corners (24-32px radius)
- **Radius / border / shadow:** Cards have large border-radius and subtle soft shadow (0 4px 20px rgba(0,0,0,0.05)); browser mockups inside have realistic shadows and 1px borders
- **Motion:** Cards stagger-fade in on scroll; internal content may have subtle parallax; hover states show gentle lift (translateY -4px)

**Recreation Prompt:**
> Create a bento-grid layout of feature cards with large rounded corners (24px) and soft shadows. Each card contains a realistic browser mockup with toolbar (back button, address bar, action icons). Inside the browser window show specific AI use cases: one showing a Gmail compose window with prompt text "Draft a reply that shares my upcoming schedule", another showing Perplexity search with "Create a study plan...", and a third showing shopping results with product image. Use realistic UI details: Gmail "M" icon, Perplexity globe icon, etc. Background should be cream with subtle curved lines. Cards should animate in with staggered fade-up on scroll.

**Structure Sketch:**
```html
<div class="grid grid-cols-2 gap-8 max-w-6xl mx-auto px-6">
  <!-- Card 1: Email -->
  <div class="bg-white rounded-3xl p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)] hover:-translate-y-1 transition-transform">
    <div class="bg-gray-50 rounded-2xl overflow-hidden border border-gray-100">
      <!-- Browser Chrome -->
      <div class="flex items-center gap-2 px-4 py-3 bg-gray-100 border-b border-gray-200">
        <div class="flex gap-1.5">
          <div class="w-3 h-3 rounded-full bg-gray-300" />
          <div class="w-3 h-3 rounded-full bg-gray-300" />
        </div>
        <div class="flex-1 bg-white h-6 rounded-md mx-4 flex items-center px-3 text-xs text-gray-400">
          mail.google.com
        </div>
      </div>
      <!-- Content -->
      <div class="p-6">
        <div class="flex items-center gap-2 mb-4">
          <div class="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center text-white font-bold text-xs">M</div>
          <span class="text-sm font-medium">Gmail</span>
        </div>
        <div class="bg-gray-100 rounded-lg p-4 text-sm text-gray-700">
          Draft a reply that shares my upcoming schedule
        </div>
      </div>
    </div>
  </div>
  
  <!-- Card 2: Study -->
  <div class="bg-white rounded-3xl p-6 shadow-[0_4px_20px_rgba(0,0,0,0.05)]">
    <div class="bg-gray-50 rounded-2xl overflow-hidden border border-gray-100 h-full flex flex-col">
      <div class="flex items-center justify-between px-4 py-3 bg-gray-100 border-b border-gray-200">
        <div class="flex items-center gap-3">
          <GlobeIcon class="w-4 h-4 text-gray-500" />
          <SettingsIcon class="w-4 h-4 text-gray-500" />
        </div>
        <div class="flex gap-2">
          <PaperclipIcon class="w-4 h-4" />
          <MicIcon class="w-4 h-4" />
          <ArrowRightIcon class="w-4 h-4" />
        </div>
      </div>
      <div class="p-6 flex-1 flex items-center">
        <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 max-w-sm">
          <p class="text-gray-800 text-sm leading-relaxed">
            Create a study plan given this syllabus for the next week to help me on my test
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
```

### 3. Gradient Sphere Marquee
**Purpose:**
Visual rhythm and brand reinforcement through continuous horizontal motion, creating an immersive "solar system" aesthetic that connects sections.

**Evidence:**
Screenshot shows horizontal row of gradient spheres varying in size (large to small to large) with different color blends (teal-orange, gray, peach, gold-green, dark teal) on cream background with thin curved lines suggesting orbits.

**Visual Rules:**
- **Layout:** Full-width overflow-hidden container with flex row of spheres; varying sizes (80px to 200px diameter) creating rhythm
- **Color:** Each sphere unique gradient: (1) Teal-blue to burnt orange diagonal, (2) Monochrome gray, (3) Peach to cream, (4) Gold to slate green, (5) Dark teal geometric shapes; all with noise texture overlay
- **Typography:** None (pure visual element)
- **Spacing:** Spheres overlap slightly or have consistent gap; negative margin or transform to create depth
- **Radius / border / shadow:** Perfect circles (border-radius: 50%); no visible borders; soft drop shadows creating levitation effect
- **Motion:** Infinite horizontal scroll animation (marquee) moving left-to-right at slow constant speed (20-30s duration); individual spheres may have subtle rotation or counter-movement

**Recreation Prompt:**
> Create a full-width marquee section with gradient spheres of varying sizes floating horizontally. Use 5-6 spheres with distinct gradient combinations: teal-orange diagonal stripes, monochrome gray, peach-cream, gold-slate, and dark teal geometric. Each sphere should be a perfect circle with subtle noise texture and soft shadow. Animate them in an infinite horizontal loop (marquee) moving slowly from right to left. Add thin curved SVG lines below suggesting orbital paths. Background should match the cream page background.

**Structure Sketch:**
```html
<div class="relative w-full overflow-hidden py-20 bg-[#FBFAF4]">
  <!-- Orbital Lines -->
  <svg class="absolute inset-0 w-full h-full pointer-events-none opacity-30">
    <path d="M0,150 Q400,250 800,150 T1600,150" stroke="#CBD5E1" stroke-width="1" fill="none" />
    <path d="M200,200 Q600,100 1000,200" stroke="#CBD5E1" stroke-width="1" fill="none" />
  </svg>
  
  <!-- Marquee Track -->
  <div class="flex gap-8 animate-marquee">
    <!-- Sphere 1: Large Teal-Orange -->
    <div class="w-48 h-48 rounded-full bg-gradient-to-br from-teal-600 via-orange-500 to-slate-900 shadow-2xl flex-shrink-0 relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('noise.png')] opacity-20" />
    </div>
    
    <!-- Sphere 2: Small Gray -->
    <div class="w-24 h-24 rounded-full bg-gradient-to-tr from-gray-800 via-gray-400 to-gray-600 shadow-xl flex-shrink-0 mt-12" />
    
    <!-- Sphere 3: Medium Peach -->
    <div class="w-40 h-40 rounded-full bg-gradient-to-bl from-orange-200 via-peach-300 to-rose-300 shadow-2xl flex-shrink-0" />
    
    <!-- Sphere 4: Large Gold-Green -->
    <div class="w-52 h-52 rounded-full bg-gradient-to-br from-amber-400 via-slate-600 to-emerald-800 shadow-2xl flex-shrink-0 mt-8" />
    
    <!-- Sphere 5: Medium Dark Teal -->
    <div class="w-36 h-36 rounded-full bg-gradient-to-tr from-teal-900 via-slate-800 to-cyan-900 shadow-xl flex-shrink-0" />
    
    <!-- Duplicate for seamless loop -->
    <div class="w-48 h-48 rounded-full bg-gradient-to-br from-teal-600 via-orange-500 to-slate-900 shadow-2xl flex-shrink-0" />
  </div>
</div>

<style>
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 30s linear infinite;
  }
</style>
```

### 4. Primary Pill CTA Button
**Purpose:**
High-conversion download action with clear visual hierarchy combining iconography and text in a friendly, approachable shape.

**Evidence:**
DOM shows "Download Comet" CTA with `href` to perplexity.sng.link; screenshot shows dark charcoal/black pill button with white download icon and text, positioned centrally below hero text and repeated in navigation with teal colorway.

**Visual Rules:**
- **Layout:** Inline-flex row with icon left, text right; centered alignment within container
- **Color:** Dark charcoal/black fill (`#1a1a1a` or similar) with pure white text and icon; alternate teal version for nav bar (`#5B8A8A` slate-teal)
- **Typography:** Sans-serif, medium weight, 16px size, sentence case
- **Spacing:** Generous horizontal padding (32px+), vertical padding (16px+), gap between icon and text (12px)
- **Radius / border / shadow:** Full pill shape (border-radius: 9999px); no border; subtle shadow on hover (0 4px 12px rgba(0,0,0,0.15))
- **Motion:** Scale up (1.02-1.05) on hover with spring transition; icon may animate (bounce or move down) on hover

**Recreation Prompt:**
> Create a primary CTA button with full pill shape (completely rounded ends). Background should be dark charcoal (#1a1a1a) with white text. Include a download icon (arrow pointing down into tray) on the left side with 12px gap from text "Download Comet". Use flexbox center alignment. On hover, scale to 1.05 with a spring animation and add subtle shadow. Ensure minimum height of 56px and horizontal padding of 32px. Icon should be stroke-based, 20px size.

**Structure Sketch:**
```html
<button class="group inline-flex items-center justify-center gap-3 bg-gray-900 text-white px-8 py-4 rounded-full font-medium text-base hover:bg-gray-800 hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
  <svg 
    class="w-5 h-5 transition-transform group-hover:translate-y-0.5" 
    fill="none" 
    stroke="currentColor" 
    viewBox="0 0 24 24"
  >
    <path 
      stroke-linecap="round" 
      stroke-linejoin="round" 
      stroke-width="2" 
      d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
    />
  </svg>
  <span>Download Comet</span>
</button>

<!-- Nav Variant -->
<a href="#" class="inline-flex items-center gap-2 bg-teal-700 text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-teal-800 transition-colors">
  <svg class="w-4 h-4" /> Download
</a>
```

### 5. Minimal Fixed Navigation
**Purpose:**
Persistent access to download action while maintaining visual lightness and brand presence without obstructing content.

**Evidence:**
DOM shows `nav` element with class `framer-rlOLF framer-tsbbv framer-v-111rx4u` containing "Download" link; screenshots show fixed header with Comet logo (circular icon + wordmark) left, teal "Download" button right, and settings/gear icon far right; transparent/cream background matching page.

**Visual Rules:**
- **Layout:** Flex row with justify-between; logo left, actions right; fixed positioning at top (z-50)
- **Color:** Background transparent or matching cream (#FBFAF4) with optional backdrop blur on scroll; logo in dark charcoal; buttons as specified above
- **Typography:** Logo uses custom wordmark (likely SVG) next to circular brand icon
- **Spacing:** Full-width with horizontal padding (24px-48px); vertical height ~64-80px; items centered vertically
- **Radius / border / shadow:** No border-bottom (clean aesthetic); no shadow initially, subtle shadow on scroll
- **Motion:** Background opacity or blur increases on scroll; elements fade in on page load

**Recreation Prompt:**
> Create a fixed navigation bar at top of viewport with transparent background that gains subtle backdrop blur on scroll. Left side: circular brand logo icon (abstract comet/c shape in black) followed by "comet" wordmark in lowercase sans-serif. Right side: teal pill button "Download" with download icon, followed by circular icon button with settings/gear symbol. Use flexbox justify-between. Height 72px. Horizontal padding 6vw. Ensure z-index above content.

**Structure Sketch:**
```html
<nav class="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 md:px-12 h-18 transition-all duration-300 bg-transparent hover:bg-[#FBFAF4]/80 backdrop-blur-sm">
  <!-- Logo -->
  <div class="flex items-center gap-2">
    <div class="w-8 h-8 rounded-full bg-black flex items-center justify-center">
      <!-- Comet Icon -->
      <svg class="w-5 h-5 text-white" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
      </svg>
    </div>
    <span class="text-xl font-semibold text-gray-900 tracking-tight">comet</span>
  </div>
  
  <!-- Actions -->
  <div class="flex items-center gap-3">
    <a href="#" class="inline-flex items-center gap-2 bg-teal-700 text-white px-5 py-2 rounded-full text-sm font-medium hover:bg-teal-800 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
      </svg>
      Download
    </a>
    <button class="w-10 h-10 rounded-full border border-gray-200 flex items-center justify-center hover:bg-gray-100 transition-colors">
      <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
      </svg>
    </button>
  </div>
</nav>
```

## 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:** light

#### Color Roles
- **color.text.primary:** #091717 (33)
- **color.text.secondary:** #091717 (14)
- **color.surface.base:** #fbfaf4 (4)
- **color.accent:** #0000ee (26)
- **color.border.default:** #091717 (33)
- **color.focus.ring:** #091717 (33)

#### Typography Roles
- **font.family.primary:** sans-serif (38)
- **font.family.secondary:** GT Standard VF Variable S Black (28)
- **font.size.display:** 64px (2)
- **font.size.body:** 24px (6)
- **font.size.label:** 20px (2)
- **ratio:** display is 2.67x body

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

#### Radius Roles
- **radius.pill:** 50px (6)

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

#### Motion Intent
- **level:** none
- **range:** Not enough evidence
- **common durations:** Not enough evidence
- **easing style:** Not enough evidence

### Distinctive Implementation Signals

- Frequent pill radius (50px) creates a soft/capsule interaction language.
- Type hierarchy is ratio-driven: display is 2.67x body.

### Extraction Diagnostics

- Sampled 79 visible elements from 470 total DOM elements.
- Confidence: medium.
- 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.