linear.com Sample

## Design Thinking

Before coding, understand the context and choose a bold aesthetic direction:

- **Purpose:** What problem does this interface solve? Who uses it?
- **Style:** Choose a strong direction: minimalist, maximalist, retro-futurist, organic/natural, luxury/refined, playful/toy-like, magazine/editorial, brutal/raw, art deco/geometric, soft/pastel, industrial/utilitarian, or another clear aesthetic.
- **Constraints:** Technical requirements such as framework, performance, and accessibility.
- **Differentiation:** What makes it memorable? What is the one thing people will remember?
  **Key:** Choose one clear concept and execute it precisely. Bold maximalism and refined minimalism can both work. Intent matters more than intensity.


## Beautiful Defaults

- Start with composition, not components.
- Prefer a full-bleed hero image or full-canvas visual anchor.
- Make the brand or product name the most prominent text.
- Keep copy concise and scannable.
- Use whitespace, alignment, scale, cropping, and contrast before adding borders.
- Limit the system by default: no more than two fonts and one accent color.

# linear.app Design System

## Visual DNA

Ultra-dark developer aesthetic with glassmorphism surfaces, precision typography using Inter Variable with aggressive negative tracking (-1.056px to -1.408px), and a strict 4px spatial grid system. Technical credibility established through monospace accents (Berkeley Mono) for labels and code, layered translucent interfaces with backdrop-filter blur, and a restrained color palette anchored in near-black backgrounds (rgb(8, 9, 10)) with high-contrast off-white text (rgb(247, 248, 248)).

## Engineering CSS Evidence

### Typography

**Headings:**
- **Primary:**
  - **Font Family:** Inter Variable
  - **Font Family Stack:** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
  - **Font Size:** 48px
  - **Font Weight:** 510
  - **Line Height:** 48px
  - **Letter Spacing:** -1.056px
  - **Text Transform:** Not enough evidence
- **Variants:** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 48px | 510 | 48px (7), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13px | 510 | 19.5px (5), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 16px | 590 | 24px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 20px | 590 | 26.6px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 64px | 510 | 64px (1), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 72px | 510 | 72px (1)

**Body:**
- **Primary:**
  - **Font Family:** Inter Variable
  - **Font Family Stack:** "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif
  - **Font Size:** 14px
  - **Font Weight:** 400
  - **Line Height:** 24px
  - **Letter Spacing:** -0.165px
  - **Text Transform:** uppercase
- **Variants:** "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace | 14px | 400 | 24px (70), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 15px | 400 | 24px (38), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13.3333px | 400 (32), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 12px | 400 | 16.8px (24), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 13px | 400 | 19.5px (17), "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif | 16px | 400 | 24px (11)

### Color

**Mode:** mixed

**Usage:**
- **Background:** rgba(0, 255, 5, 0.1), rgba(255, 255, 255, 0.05), rgba(0, 255, 5, 0.07), rgba(255, 0, 0, 0.1), rgb(8, 9, 10), rgba(255, 0, 0, 0.12)
- **Surface:** Not enough evidence
- **Text Primary:** rgb(208, 214, 224), rgb(247, 248, 248), rgb(138, 143, 152), rgb(255, 255, 255), rgb(98, 102, 109), rgb(85, 205, 255)
- **Text Secondary:** rgb(208, 214, 224), rgb(138, 143, 152), rgb(255, 255, 255), rgb(247, 248, 248)
- **Border:** rgb(208, 214, 224), rgb(138, 143, 152), rgb(247, 248, 248), rgb(255, 255, 255), rgb(208, 214, 224) rgb(208, 214, 224) rgb(208, 214, 224) rgba(0, 0, 0, 0), rgb(98, 102, 109)
- **Accent:** Not enough evidence
- **Gradients:** linear-gradient(rgba(11, 11, 11, 0.8) 0px, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)

### Spacing

**Base Unit:** 4px
**Scale:** 12px, 24px, 32px, 8px, 2px, 128px, 96px, 1px, 20px, 40px, 14px, 16px
**Section Padding:** 96px 0px 128px
**Card Padding:** Not enough evidence
**Gaps:** 12px, 40px

### Material

**Surface Style:** glass / translucent
**Radius:** 2px, 4px, 12px, 2px 0px 0px 2px, 0px 2px 2px 0px, 12px 12px 0px 0px
**Border Style:** 0px none rgb(208, 214, 224), 0px none rgb(138, 143, 152), 0px none rgb(247, 248, 248), 0px none rgb(255, 255, 255), 0px none rgb(98, 102, 109), 0px none rgb(85, 205, 255), 0px none rgb(255, 196, 124), 0px none rgb(8, 9, 10)
**Shadow Style:** rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px, rgba(0, 0, 0, 0.4) 0px 1px 0px 0px
**Blur:** blur(0px), blur(20px)

### Motion

**Motion Level:** moderate
**Durations:** 0s, 0.16s, 0.16s, 0.4s, 0.1s
**Easings:** ease, cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.25, 0.46, 0.45, 0.94), ease-out, cubic-bezier(0.25, 0.46, 0.45, 0.94)
**Hover Patterns:** all, filter, transform, background, border-color, background
**Scroll Patterns:** 1 sticky/fixed elements, 36 flex containers

### Component Samples

**navigation:**
- **Count:** 2
- **Typography:** 16px / 24px, weight 400
- **Padding:** 8px 14px 14px 8px
- **Radius:** Not enough evidence
- **Color:** rgb(247, 248, 248)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(247, 248, 248)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**hero:**
- **Count:** 1
- **Typography:** 15px / 24px, weight 400
- **Padding:** Not enough evidence
- **Radius:** Not enough evidence
- **Color:** rgb(138, 143, 152)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(138, 143, 152)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**section:**
- **Count:** 7
- **Typography:** 16px / 24px, weight 400
- **Padding:** 96px 0px 128px
- **Radius:** Not enough evidence
- **Color:** rgb(247, 248, 248)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(247, 248, 248)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

### Extraction Diagnostics

- Sampled 300 visible elements from 3956 total DOM elements.
- Confidence: high.
- No extraction warnings.

## AI Visual Analysis

### Core Style

Dark-first interface utilizing near-black background (rgb(8, 9, 10)) with high-contrast off-white typography (rgb(247, 248, 248)). Technical/developer-focused aesthetic emphasizing code-centric visuals including syntax-highlighted diffs and monospace typography (Berkeley Mono) for technical labels. Aggressive information density with compact line heights (1.0-1.6) and tight letter spacing (-0.165px to -1.408px).

### Texture and Atmosphere

Glassmorphism surfaces defined by backdrop-filter blur(20px) and translucent backgrounds (rgba(11, 11, 11, 0.8)). Subtle depth achieved through hairline borders (rgba(255,255,255,0.05)) and minimal shadow stacks (rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px). Layered UI cards floating over dark canvas with rounded corners (2px-12px, 9999px for pills).

### Layout and Composition

Asymmetric two-column composition for feature sections with sticky navigation header (72px height). Generous vertical section padding (96px top, 128px bottom) contrasting with compact component density. Product UI mockups dominate hero area showcasing actual interface elements (issue tracking, roadmaps, analytics). Flexbox-based grid system with 12-column structure and consistent gap spacing (12px, 40px).

### Interaction Direction

Subtle state changes with quick transition durations (0.1s for buttons, 0.16s-0.4s for structural elements). Smooth cubic-bezier(0.25, 0.46, 0.45, 0.94) easing for standard interactions. Pill-shaped interactive elements (border-radius: 9999px) with transparent backgrounds transitioning to filled states. Scroll-triggered animations implied by sticky header behavior and grid-dot-agent keyframe animations (3200ms duration).

## Design System Rules

### Do

- Use Inter Variable as primary font family with weight 510 for headings and 400 for body text
- Apply Berkeley Mono for code snippets, labels, and technical metadata (70 instances observed)
- Implement negative letter-spacing on headlines: -1.056px for 48px, -1.408px for 64px sizes
- Maintain strict 4px base unit spacing system (observed values: 8px, 12px, 16px, 20px, 24px, 32px, 40px, 96px, 128px)
- Use glassmorphism surfaces with backdrop-filter: blur(20px) and rgba(11,11,11,0.8) background
- Implement pill-shaped buttons with border-radius: 9999px and 0.1s color/background transitions
- Apply text-transform: uppercase for micro labels and certain body variants (14px/24px)
- Use color hierarchy: rgb(247, 248, 248) for primary text, rgb(208, 214, 224) for secondary, rgb(138, 143, 152) for tertiary
- Set section padding to 96px 0px 128px for major content divisions
- Use cubic-bezier(0.25, 0.46, 0.45, 0.94) easing for standard hover transitions

### Don't

- Use pure black backgrounds (evidence specifies rgb(8, 9, 10) or #08090a as base)
- Exceed font-weight 680 (maximum bold weight in system)
- Apply sharp corners below 2px radius (minimum observed: 2px)
- Use opaque white for backgrounds (system relies on translucency)
- Break the 4px spatial grid with arbitrary spacing values
- Use box-shadows exceeding rgba(0, 0, 0, 0.4) opacity (evidence shows subtle shadows only)
- Apply positive letter-spacing on large headings (evidence shows only negative tracking)
- Use system-ui fonts without Inter Variable fallback stack

### Implementation Notes

- Header requires fixed positioning with 72px height, blur(20px) backdrop-filter, and border-bottom: rgba(255,255,255,0.08)
- Color system utilizes CSS custom properties with oklab() color space for gradient definitions
- Typography implements variable font "Inter Variable" with continuous weight range 100-900
- Button components use transparent backgrounds transitioning to rgb(94, 106, 210) for primary actions
- Grid system relies on 36 flex containers with 12-column grid structure (--grid-columns: 12)
- Motion system distinguishes between quick transitions (0.1s), regular (0.25s), and emphasis (0.4s)
- Implement asymmetric padding for navigation items (8px 14px 14px 8px observed)
- Use rgba(255,255,255,0.05) for border-translucent values on dark surfaces

# Core Principles

1. Firm negative constraints:

- Do not use purple/blue gradients on a white background.
- Do not use generic fonts such as Inter, Roboto, Arial, or system-ui.
- Do not use a predictable hero-CTA-features-testimonials template.
- Do not use generic geometric shapes or abstract blobs.
- Do not use stock-looking imagery or cliched visuals.

## Performance

- Keep page loads fast and avoid unnecessary large assets.
- Use modern image formats such as WebP with appropriate compression.
- Implement lazy loading for long-page media.


**Important:** Implementation complexity should match the aesthetic vision. Maximalist designs may need richer code, animation, and effects. Minimalist or refined designs need restraint, precision, spacing, typography, and subtle details. Elegance comes from fully expressing the chosen vision. Do not hold back from a distinctive, committed result.