arc.net 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
Playful yet sophisticated product-marketing aesthetic with a "browser chrome" meta-commentary—using UI mockups as the primary visual language. Combines soft, organic textures with precise, airy layouts. Heavy use of gradient mesh backgrounds and wavy/scalloped borders creates a friendly, approachable personality distinct from typical corporate SaaS.

### 2. Color Palette
- **Primary**: Vibrant electric indigo/violet (dominant in header and CTAs)
- **Secondary**: Soft pastel gradients (peach, pink, cream, mint) used as section backgrounds
- **Accent**: Multi-color gradient fills (sunset orange-to-pink-to-blue) used in product icons
- **Neutrals**: Clean white content areas, soft gray text, near-black for primary actions
- **Texture**: Subtle grain/noise overlays on colored backgrounds to prevent flatness

### 3. Font Stack
- **Display/Headlines**: Serif typeface (resembling Instrument Serif or similar) for emotional impact and editorial feel—used for "Meet Dia" and feature headers
- **Body/UI**: Clean, geometric sans-serif (resembling Inter or SF Pro) for navigation, buttons, and feature descriptions
- **Hierarchy**: Large expressive serifs for emotional statements; functional sans-serif for utility text

### 4. Texture
- **Grain/Noise**: Consistent subtle texture overlay on all colored backgrounds (visible as speckled pattern in the indigo header)
- **Wavy Borders**: Scalloped/wavy SVG borders separating color blocks—creates a "torn paper" or organic transition effect between sections
- **Soft Shadows**: Diffused, large-radius shadows on browser mockups to create depth without harshness

### 5. Motion Design
- **Marquee**: Continuous horizontal scroll of testimonials/logos with seamless loop
- **Scroll-triggered**: Browser mockups likely animate in with subtle parallax or fade-up effects
- **Micro-interactions**: Buttons likely have soft scale/opacity transitions; the "Try Dia" arrow suggests hover slide effect

## Component Guidelines
### Button
Pill-shaped (high border-radius) with either solid indigo or near-black fill. Text is sans-serif, medium weight. Often includes trailing arrow icon. Secondary buttons use subtle borders or text-only treatments.

### Card
Not traditional cards—instead uses "browser window" mockups as content containers with traffic light buttons (red/yellow/green circles) in top-left to simulate macOS window chrome.

### Navigation
Minimal top bar with logo left, horizontal link list center/right. Transparent or blended with hero gradient. Links are small, sans-serif, with ample spacing (16px+ gaps).

### Typography
Large serif headings (48-64px) centered or left-aligned. Body text is muted gray, comfortable line-height (1.5+), max-width constrained for readability.

## Distinctive Element Few-shot Examples

### 1. Hero Browser Mockup with Dia CTA
**Purpose:**
Primary conversion zone introducing the Arc browser interface while cross-promoting the "Dia" AI feature. Establishes the site's visual metaphor of showing the actual product UI rather than abstract illustrations.

**Evidence:**
- DOM shows heading "Meet Dia, the next evolution of Arc" followed by "A familiar design that weaves AI into everyday tasks"
- Screenshot shows large browser window mockup with Arc sidebar, command bar, and chat interface
- "Try Dia" button positioned prominently above the mockup

**Visual Rules:**
- Layout: Centered column layout with headline → subhead → CTA button → massive browser mockup (80-90% viewport width)
- Color: Background transitions from electric indigo (top) to soft peach/cream gradient via wavy border; browser mockup sits on white/cream lower section
- Typography: Large serif headline ("Meet Dia..."), smaller sans-serif subhead, black pill button with white text
- Spacing: Generous vertical padding (120px+), mockup overlaps sections slightly
- Radius / border / shadow: Browser mockup has rounded corners (16-24px) with realistic macOS traffic lights; soft diffuse shadow underneath
- Motion: Subtle parallax on scroll; button hover likely translates arrow right

**Recreation Prompt:**
Create a hero section with a vibrant indigo-to-peach gradient background using a wavy bottom border. Center a large serif headline "Meet Dia, the next evolution of Arc" with a sans-serif subheadline below. Add a black pill-shaped CTA button with a colorful gradient icon on the left and arrow on right. Below, place a large realistic browser window mockup showing a sidebar with app icons and a main content area with an AI chat interface. Use soft shadows and ensure the browser has macOS-style traffic light buttons in the top-left.

**Structure Sketch:**
```html
<section class="hero-gradient">
  <div class="wavy-border-bottom"></div>
  <div class="content">
    <h1 class="serif-display">Meet Dia, the next evolution of Arc</h1>
    <p class="sans-body">A familiar design that weaves AI into everyday tasks</p>
    <button class="pill-cta">
      <img src="dia-icon-gradient.svg" alt="">
      <span>Try Dia</span>
      <span class="arrow">→</span>
    </button>
    <div class="browser-mockup">
      <div class="browser-chrome">
        <div class="traffic-lights"></div>
        <div class="sidebar"></div>
        <div class="main-content"></div>
      </div>
    </div>
  </div>
</section>
```

### 2. Scalloped Section Divider
**Purpose:**
Creates visual rhythm and brand personality by breaking the harsh horizontal lines between color sections. Signals a "friendly" and "crafted" aesthetic different from standard flat design.

**Evidence:**
- Visible in all screenshots as wavy/scalloped white line separating the indigo header from cream content areas
- DOM variables suggest careful padding and max-width constraints

**Visual Rules:**
- Layout: Full-width SVG or CSS mask positioned at section boundaries
- Color: White (or matching lower section color) creating negative space wave pattern
- Texture: Inherits subtle grain from parent background
- Radius / border: Consistent sine-wave or scallop pattern with ~20px amplitude
- Motion: Static or subtle wave animation on scroll

**Recreation Prompt:**
Create a full-width section divider using an SVG wave or scalloped pattern that sits between a vibrant indigo header and a cream content section. The wave should have regular, soft curves (like a sine wave) creating a "torn paper" edge effect. Apply a subtle grain texture overlay to match the textured backgrounds. Ensure the divider is white to create seamless transition between colored sections.

**Structure Sketch:**
```html
<div class="section-divider">
  <svg viewBox="0 0 1440 60" preserveAspectRatio="none">
    <path d="M0,30 Q30,0 60,30 T120,30 T180,30 ..." fill="white"/>
  </svg>
</div>
```

### 3. Testimonial Quote Marquee
**Purpose:**
Social proof through rapid-fire media endorsements. Creates energy and momentum while showcasing press coverage without static grid clutter.

**Evidence:**
- DOM shows "marquee-container" and "marquee" classes with repeated quotes: "Rethinking the fundamentals...", "Arc is the best browser to come out in the last decade", etc.
- Multiple duplicate entries suggest infinite scroll loop
- Positioned between hero and feature sections (top: 1528px in DOM)

**Visual Rules:**
- Layout: Full-width overflow-hidden container with flex row of quote blocks
- Color: Transparent or subtle background, letting page background show through
- Typography: Large serif or italicized text for quotes, small caps/label for publication source
- Spacing: Horizontal gap of 60-80px between quotes; continuous loop with no visible seam
- Motion: Constant linear horizontal scroll (marquee effect), pause on hover optional

**Recreation Prompt:**
Create an infinite horizontal marquee of testimonial quotes. Each quote should be in quotation marks using a large serif font, followed by the publication name in smaller sans-serif. Duplicate the content four times to ensure seamless looping. Container should be full-width with overflow hidden. Animate with CSS translateX from 0 to -50% linear over 30 seconds. Include fade edges (gradient masks) on left and right sides to soften the entry/exit.

**Structure Sketch:**
```html
<div class="marquee-container">
  <div class="marquee-track">
    <div class="quote">"Rethinking the fundamentals..." <span>Bloomberg</span></div>
    <div class="quote">"Arc is the best browser..." <span>Inverse</span></div>
    <!-- Duplicated 4x for seamless loop -->
  </div>
</div>
```

### 4. Feature Showcase Browser Window
**Purpose:**
Demonstrates specific Arc features (Spaces, Split View, Themes) using realistic product screenshots within browser chrome, maintaining the "show don't tell" philosophy.

**Evidence:**
- DOM shows sections with class "c-OBxzD" containing text like "Space for the different sides of you" and "Your perfect setup" with media elements
- Screenshot 2 shows Photo Gallery/Spaces feature with sidebar navigation and masonry grid
- Screenshot 3 shows Split View feature with pink-themed sidebar and dual-pane layout

**Visual Rules:**
- Layout: Two-part vertical stack—centered text header (label + headline + description) above massive browser mockup (90% width, 800px+ height)
- Color: Section background alternates between soft pastels (peach, mint, lavender) and white; browser mockup shows themed Arc interface colors
- Typography: Small uppercase sans-serif label (e.g., "SPACES"), large bold sans-serif headline (e.g., "Your perfect setup."), regular gray description
- Radius / border: Browser window has 12-16px rounded corners, realistic drop shadow (0 20px 40px rgba(0,0,0,0.1))
- Motion: Scroll-triggered reveal; mockup may have subtle floating/bobbing animation or parallax

**Recreation Prompt:**
Create a feature section with a soft pastel background (light peach or mint). Center a small uppercase label, followed by a large bold headline "Your perfect setup." and a gray description. Below, place a massive realistic Arc browser mockup showing a split view interface—left side showing a website preview, right side showing a design canvas or second webpage. The browser should have a custom pink/orange theme visible in the sidebar. Add realistic macOS window controls and a soft drop shadow. Use CSS transform and opacity for a fade-up scroll animation.

**Structure Sketch:**
```html
<section class="feature-section bg-pastel">
  <div class="text-header">
    <span class="label">SETUP</span>
    <h2 class="headline">Your perfect setup.</h2>
    <p class="description">Find your perfect setup with Split View...</p>
  </div>
  <div class="browser-mockup large">
    <div class="window-chrome">
      <div class="sidebar themed-pink">
        <!-- Folder tree, favorites -->
      </div>
      <div class="split-view">
        <div class="pane left"></div>
        <div class="pane right"></div>
      </div>
    </div>
  </div>
</section>
```

### 5. Floating "Try Dia" Pill Button with Gradient Icon
**Purpose:**
High-priority secondary CTA that stands out through unique visual treatment (3D gradient icon) while maintaining the site's playful, colorful aesthetic.

**Evidence:**
- Visible in screenshots as black pill button with colorful sunset-gradient square icon and arrow
- DOM shows link with text "Try Dia" and href to diabrowser.com
- Positioned prominently in hero section and potentially sticky elsewhere

**Visual Rules:**
- Layout: Inline-flex row with gap between icon, text, and arrow
- Color: Near-black (#1a1a1a) background, white text, multi-color gradient icon (orange-yellow-blue-purple mesh gradient)
- Typography: Medium-weight sans-serif, 16-18px size
- Radius / border: Full pill shape (border-radius: 9999px), no border
- Motion: On hover, arrow translates right 4px; subtle scale(1.02) on entire button; gradient icon may have shimmer effect

**Recreation Prompt:**
Create a pill-shaped button with a near-black background and white text "Try Dia". On the left side, place a square-rounded icon with a vibrant multi-color mesh gradient (sunset colors: orange, pink, blue, purple). On the right side, place a right-pointing arrow. Use flexbox with 12px gaps. On hover, animate the arrow translating 4px to the right and add a subtle lift shadow. The gradient icon should appear slightly 3D or glossy.

**Structure Sketch:**
```html
<a href="#" class="cta-pill">
  <div class="gradient-icon">
    <div class="mesh-gradient"></div>
  </div>
  <span class="text">Try Dia</span>
  <span class="arrow">→</span>
</a>

<style>
  .cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
    color: white;
    padding: 12px 24px;
    border-radius: 9999px;
    text-decoration: none;
  }
  .gradient-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff6b35, #f7931e, #007bff, #6b2c91);
  }
  .arrow { transition: transform 0.2s; }
  .cta-pill:hover .arrow { transform: translateX(4px); }
</style>
```

## 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:** #3139fb (22)
- **color.text.secondary:** #000000 (8)
- **color.surface.base:** #3139fb (3)
- **color.accent:** #fffcec (36)
- **color.border.default:** #3139fb (22)
- **color.focus.ring:** #3139fb (22)

#### Typography Roles
- **font.family.primary:** Marlin Soft SQ (27)
- **font.family.secondary:** Marlin (21)
- **font.size.display:** 45.51px (1)
- **font.size.body:** 16px (7)
- **font.size.label:** 14px (8)
- **ratio:** display is 2.84x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 24px (80)
- **space.2:** 8px (32)
- **space.3:** 10px (15)
- **space.4:** 32px (14)
- **space.5:** 20px (5)

#### Radius Roles
- **radius.sharp:** 4px (1)
- **radius.medium:** 8px (5)
- **radius.pill:** 22px (1)

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

#### Motion Intent
- **level:** subtle
- **range:** 150-200ms
- **common durations:** 150ms (8), 200ms (1)
- **easing style:** ease, ease (5), ease, ease-out (3), ease-in-out (1)

### Distinctive Implementation Signals

- Frequent pill radius (22px) creates a soft/capsule interaction language.
- Motion is subtle, centered around 150-200ms.
- Type hierarchy is ratio-driven: display is 2.84x body.

### Extraction Diagnostics

- Sampled 71 visible elements from 450 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.