linear.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
Dark-native product marketing aesthetic with "true black" foundations (#0a0a0a). Emphasizes immersive product storytelling through embedded, realistic UI mockups that appear to float above the background. Glassmorphism and subtle ambient lighting create depth without visual noise. Information architecture follows a numbered narrative (1.0, 2.0, 3.0) suggesting a workflow sequence.

### 2. Color Palette
- **Background**: Near-black (#0a0a0a) with occasional deep purple/blue ambient glows behind mockups
- **Surface**: Translucent dark grays (rgba(255,255,255,0.03)) for cards and panels
- **Text**: High-contrast white (#ffffff) for headings, muted gray (#8a8a8a) for body and metadata
- **Accents**: Status colors (red for "At risk", green for completed states, blue for active agents) used sparingly in UI mockups
- **Borders**: Ultra-subtle 1px borders (rgba(255,255,255,0.06-0.1)) to define containers without heaviness

### 3. Font Stack
Primary sans-serif (Inter or SF Pro Display) with tight tracking for headlines. Monospace for code sections and version numbers ("2.0"). Headlines scale aggressively (48-72px) with tight line-height (1.1).

### 4. Texture
Matte finish with controlled glassmorphism blur (backdrop-filter) on floating panels. No grain or noise textures—pure digital smoothness. Subtle radial gradients behind product mockups suggest ethereal glow.

### 5. Motion Design
Smooth 60fps transitions. Mockups likely employ scroll-triggered parallax or fade-up reveals. Micro-interactions on buttons and cards use subtle scale and opacity shifts rather than color changes.

## Component Guidelines
### Button
Primary: White fill with dark text, pill-shaped (full radius). Secondary: Transparent with white text and 1px border. Ghost: Text only with arrow icon for links ("Plan →").

### Card / Panel
Dark translucent backgrounds, 12-16px border-radius, 1px subtle border. Heavy use of internal padding (24-32px). Floating appearance achieved through box-shadow and z-index layering.

### Navigation
Fixed position, glassmorphism blur on scroll, minimal height (~64px). Logo left, links center/right, CTA button far right.

## Distinctive Element Few-shot Examples

### 1. Hero Product Mockup Container
**Purpose:** Immediately demonstrate product value by embedding a realistic, interactive-looking application interface within the hero fold.
**Evidence:** Screenshot 1 shows the "Faster app launch" issue view embedded below the headline. DOM contains classes `IssueView_header__sldQv`, `Sidebar_sidebar__yeDLZ`, and `IssueView_chatBoxHeader__dsIb0` confirming the actual app UI structure is rendered.
**Visual Rules:**
- Layout: Centered container breaking out of text column width, overlapping into next section
- Color: True black background, mockup container with subtle purple/blue ambient glow at edges
- Typography: Massive H1 (64px+) white text above, small feature link ("Issue tracking is dead →") with dot indicator
- Spacing: Generous top padding (160px+), mockup positioned to create depth through overlap
- Radius / border / shadow: 16px border-radius on mockup, 1px border rgba(255,255,255,0.08), heavy drop-shadow lifting it from background
- Motion: Mockup appears to float or drift slightly; content inside suggests interactivity (chat bubbles, activity logs)
**Recreation Prompt:**
> Create a hero section with a massive white headline on pure black background. Below the subheadline, render a floating glassmorphism container holding a realistic dark-mode application interface (sidebar + main content + right panel chat). The container should have 16px rounded corners, a subtle 1px border, and a soft purple ambient glow emanating from behind. Inside the mockup, show realistic issue tracking content including user avatars, status badges, and monospace code snippets.
**Structure Sketch:**
```html
<section class="hero">
  <h1>The product development system for teams and agents</h1>
  <div class="hero-mockup-container">
    <div class="ambient-glow"></div>
    <div class="app-window">
      <nav class="sidebar">Linear, Inbox, My issues...</nav>
      <main class="issue-view">
        <header>Faster app launch</header>
        <div class="activity-feed">...</div>
      </main>
      <aside class="agent-chat">Codex...</aside>
    </div>
  </div>
</section>
```

### 2. Timeline Roadmap Visualization Panel
**Purpose:** Visualize product planning capabilities through a horizontal, calendar-based roadmap showing initiatives across time.
**Evidence:** Screenshot 2 shows "Define the product direction" with calendar months (FEB-JUN) and initiative bars. DOM shows `Plan_timelineWrapper__Cpnud` and `Plan_timelineContent__Dj8aZ` classes. DistinctiveCandidates contain "FEBMARAPRMAYJUNJULAUGSEP" text patterns.
**Visual Rules:**
- Layout: Full-width dark panel below split header, horizontal scroll or overflow visible
- Color: Dark translucent surface for timeline track, colored dots/badges for initiative status (green, orange, purple)
- Typography: Small caps or uppercase month labels (FEB, MAR, APR), initiative titles in white with emoji/icons
- Spacing: Initiatives positioned absolutely along the timeline track, connected by subtle lines
- Radius / border / shadow: Panel has 12px radius, floating initiative cards have subtle lift and border
- Motion: Horizontal parallax or reveal animation on scroll; initiative cards may slide in from bottom
**Recreation Prompt:**
> Create a feature section with a two-column header (large heading left, description right) marked with "2.0 Plan →". Below, place a wide, dark translucent panel (rgba(255,255,255,0.02)) containing a horizontal timeline spanning months (FEB through SEP). Display initiative cards ("UI Refresh", "Split fares", "Autonomy status clarity") as floating bars positioned along the timeline with small colored status indicators and connecting lines. Use glassmorphism for the floating cards with 8px radius.
**Structure Sketch:**
```html
<section class="feature-roadmap">
  <header class="section-header">
    <div>
      <span class="section-number">2.0</span>
      <h2>Define the product direction</h2>
    </div>
    <p>Plan and navigate from idea to launch...</p>
  </header>
  <div class="timeline-panel">
    <div class="months-row">FEB MAR APR MAY JUN...</div>
    <div class="initiatives-track">
      <div class="initiative-card" style="left: 20%;">
        <span class="icon">⚡</span>
        <span>UI Refresh</span>
        <div class="status-dot"></div>
      </div>
    </div>
  </div>
</section>
```

### 3. Side-by-Side Code Diff Viewer
**Purpose:** Demonstrate code review capabilities with a realistic, syntax-highlighted split diff showing before/after states.
**Evidence:** Screenshot 3 shows split code comparison with red removals and green additions. DOM contains multiple code blocks and `page_panel__h_tIJ` class wrapping the content. File paths visible: "HomeScreen.ts" vs "HomeScreen.tsx".
**Visual Rules:**
- Layout: Two-pane flex layout (50/50), fixed line numbers column on left of each pane
- Color: Dark background (#0d1117 or similar), red background/text for deletions (#ff4444/15%), green for additions (#3fb950/15%), muted gray line numbers
- Typography: Monospace 13-14px, tight line-height (1.5), syntax highlighting in subtle colors
- Spacing: Padding within code blocks (16px), clear separation between panes with 1px vertical divider
- Radius / border / shadow: Container has 12px radius, thin border, file names as tabs above each pane
- Motion: Staggered line reveal or smooth horizontal slide when entering viewport
**Recreation Prompt:**
> Create a split-pane code diff viewer showing a before/after comparison of a React component. Left pane shows red-highlighted removed lines (returning ActivityIndicator), right pane shows green-highlighted additions. Use dark background (#111), monospace font (SF Mono), and gray line numbers. Include file path headers ("HomeScreen.tsx") at top of each pane. Container should have 12px rounded corners, 1px border rgba(255,255,255,0.1), and a subtle shadow.
**Structure Sketch:**
```html
<div class="code-diff-panel">
  <div class="diff-header">
    <div class="file-tab">kinetic-ios/src/screens/Home/HomeScreen.tsx</div>
    <div class="file-tab">kinetic-ios/src/HomeScreen.tsx</div>
  </div>
  <div class="diff-body">
    <div class="pane removed">
      <table>
        <tr><td class="line-num">09</td><td class="code">if (!isFullySynced) {</td></tr>
        <tr class="highlight-red"><td class="line-num">10</td><td class="code">return &lt;ActivityIndicator /&gt;</td></tr>
      </table>
    </div>
    <div class="pane added">
      <table>
        <tr><td class="line-num">09</td><td class="code">if (syncStatus === SyncStatus.PENDING) {</td></tr>
        <tr class="highlight-green"><td class="line-num">10</td><td class="code">return &lt;ActivityIndicator /&gt;</td></tr>
      </table>
    </div>
  </div>
</div>
```

### 4. Analytics Dashboard Grid (Pulse + Scatter Plot)
**Purpose:** Showcase data insights through a mixed-media grid combining text-based status updates and abstract data visualizations.
**Evidence:** Screenshot 3 shows "Understand progress at scale" with "Weekly Pulse" card (text updates) and scatter plot ("Cycle time by agent"). DOM shows `Monitor_grid__a9Cqx` and distinctiveCandidates mention scatter plot data.
**Visual Rules:**
- Layout: Asymmetric two-column grid (40/60 split), left card contains text list, right card contains chart
- Color: Dark card backgrounds, chart uses distinct dot colors (blue for Cursor, orange for Codex, gray for No Agent)
- Typography: Card headers in 18px white, body text in gray, small caps labels for chart axes
- Spacing: 24px gap between cards, internal padding 24px
- Radius / border / shadow: Cards have 12px radius, 1px border rgba(255,255,255,0.06), no heavy shadows—flat design
- Motion: Scatter plot dots animate in with staggered delay; "At risk" badge may pulse subtly
**Recreation Prompt:**
> Create a two-column dashboard grid for the "Monitor" section. Left card: "Weekly Pulse" with project status list including an "At risk" badge (red text/dot) and bullet points. Right card: Scatter plot visualization showing "Cycle time by agent" with three data series represented by colored dots (blue, orange, gray) against a dark background with faint grid lines. Cards should have dark backgrounds (#161b22), 12px rounded corners, and thin borders.
**Structure Sketch:**
```html
<div class="monitor-grid">
  <div class="pulse-card">
    <h3>Weekly Pulse for May 8</h3>
    <div class="project-item">
      <h4>UI refresh <span class="badge at-risk">At risk</span></h4>
      <ul>
        <li>iOS implementation is mostly complete...</li>
        <li>Risk of timeline slip if remaining design decisions...</li>
      </ul>
    </div>
  </div>
  <div class="chart-card">
    <h3>Cycle time by agent</h3>
    <div class="scatter-plot">
      <div class="series cursor-dots">...</div>
      <div class="series codex-dots">...</div>
      <div class="series no-agent-dots">...</div>
    </div>
  </div>
</div>
```

### 5. Section Header with Version Numbering
**Purpose:** Create a narrative sequence through numbered capabilities (1.0, 2.0, 3.0) that suggests a complete product workflow from intake to monitoring.
**Evidence:** Screenshot 2 shows "2.0 Plan →" and distinctiveCandidates contain patterns like "1.0Intake→", "5.0Monitor→". DOM headings include "Make product operations self-driving" (1.0), "Define the product direction" (2.0), etc.
**Visual Rules:**
- Layout: Flex row with mono number, label, and arrow; positioned above or beside main heading
- Color: Version number in muted gray (rgba(255,255,255,0.4)), label and arrow in brighter white/gray
- Typography: Monospace or tabular-nums for "2.0", uppercase or small-caps for category label ("INTAKE", "PLAN", "MONITOR")
- Spacing: 8px gap between number and label, tight grouping
- Radius / border / shadow: None—purely typographic element
- Motion: Number may count up on scroll into view; arrow icon shifts right on hover
**Recreation Prompt:**
> Create section headers that include a version index like "2.0" in muted gray monospace font, followed by a category label "Plan" and a right-arrow icon (→). Place this as an eyebrow element above the main section heading. Use low contrast for the number (gray-500), higher contrast for the label (gray-300), and ensure the arrow suggests clickability. The entire element should feel like a breadcrumb or workflow step indicator.
**Structure Sketch:**
```html
<div class="section-eyebrow">
  <span class="version-index">2.0</span>
  <span class="section-label">Plan</span>
  <svg class="arrow-icon" viewBox="0 0 16 16">
    <path d="M6 12l4-4-4-4"></path>
  </svg>
</div>
<h2>Define the product direction</h2>
```

## 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:** #f7f8f8 (106)
- **color.text.secondary:** #f7f8f8 (49)
- **color.surface.base:** #ffffff (23)
- **color.accent:** #ffffff (98)
- **color.border.default:** #f7f8f8 (104)
- **color.focus.ring:** #f7f8f8 (2)

#### Typography Roles
- **font.family.primary:** Inter Variable (264)
- **font.family.secondary:** Berkeley Mono (1)
- **font.size.display:** 72px (16)
- **font.size.body:** 13px (33)
- **font.size.label:** 12px (4)
- **ratio:** display is 5.54x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 6px (49)
- **space.2:** 12px (42)
- **space.3:** 24px (32)
- **space.4:** 1px (23)
- **space.5:** 32px (16)

#### Radius Roles
- **radius.sharp:** 2px (24)
- **radius.medium:** 6px (17)
- **radius.pill:** 9999px (15)

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

#### Motion Intent
- **level:** subtle
- **range:** 100-160ms
- **common durations:** 100ms (46), 160ms (24)
- **easing style:** cubic-bezier(0.25, 0.46, 0.45, 0.94) (28), cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94) (4)

### Distinctive Implementation Signals

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

### Extraction Diagnostics

- Sampled 266 visible elements from 3958 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.