CURATED · OPEN · FREE

Linear

A dark, precision-focused SaaS design system for developer tools.

SaaSProductivityApp UIDark Mode

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://linear.app

📦 Browse pack contents →

Identity DNA

precisionvelocitytechnical claritystructuredAI-native

A high-end watch instrument for software teams—dark, precise, zero decoration.

Color

#F7F8F8Ink

#D0D6E0Ink soft

#08090ABG

rgba(255,255,255,0.05)BG soft

rgba(255,255,255,0.02)BG quiet

#62666DMuted

rgba(255,255,255,0.08)Line

Extreme contrast for focus, with subtle noise and semi-transparent layers to create depth.

Typography

geometric-sans · humanist-sans · monospace

display64px · 400
body16px · 400
mono13px · 400

Use tight negative tracking on large headlines. · Maintain 400 weight for body text to keep the interface light. · Use mono fonts exclusively for technical references and identifiers.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Strict 4px grid with tight component spacing.

Surfaces

sm · 4px

md · 6px

lg · 12px

pill · 9999px

1px solid rgba(255,255,255,0.08)

0px 1.2px 0px 0px rgba(0,0,0,0.03) · 0px 2px 4px 0px rgba(0,0,0,0.4) · inset 0px 0px 12px 0px rgba(0,0,0,0.2)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Dense, full-width dark canvas with nested elevated panels.

Motion & Interaction

150msmicro

160mssmall

400msmedium

cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

Subtle fade-in and filter transitions on hover. · Smooth background color shifts. · Micro-interactions on cursor and focus states.

Slight brightness increase or background opacity shift. · Immediate state change with subtle scale or color feedback.

Components

button Pill-shaped or slightly rounded rectangles with transparent backgrounds and thin borders.
card Elevated dark panels with a subtle 1px inner border and soft drop shadows.
chip Small, rounded rectangles used for tags and status indicators.
input Dark, semi-transparent background fields with minimal border styling.
hero Massive, bold sans-serif headline paired with a clean subheader and a large product mockup.

Voice & Don'ts

Tone Technical, precise, and confident.
Headlines Direct, action-oriented, and authoritative.
CTAs Minimalist and clear, often just a simple text link or a low-emphasis button.

Don't use high-saturation colors — screenshot shows a strictly grayscale/white palette.
Don't use rounded, playful shapes — screenshot shows sharp or very subtly rounded corners.
Don't use serif or decorative fonts — screenshot shows a clean, geometric sans-serif.
Don't use bright, colorful gradients — screenshot shows a dark, flat, grain-textured background.
Don't use thick, heavy borders — screenshot shows hairline 1px dividers.
Don't use complex, multi-layered shadows — screenshot shows only subtle, low-opacity drop shadows.
Avoid: Marketing fluff
Avoid: Vague or ambiguous terminology
Avoid: Excessive exclamation points
Avoid: Playful or casual language

Inside the pack — real screenshots

Linear — 桌面滚动分段（90% viewport 步进） — 桌面滚动分段（90% viewport 步进）

Captured from the live site · real computed styles

System prompt

Design a high-precision SaaS interface for developer tools and AI-era productivity. The system uses a deep dark mode palette, primarily #08090A for backgrounds with white #F7F8F8 text for high contrast. Typography is clean and geometric, with negative tracking for large headlines. Key hex colors are #08090A, #F7F8F8, and #62666D for muted elements. Do not use high-saturation colors or playful, rounded shapes; the aesthetic must remain sharp, technical, and professional. The layout is dense and full-width, utilizing semi-transparent panels to create depth. Ensure transitions are fast and subtle to maintain a sense of velocity.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko