# DESIGN REFERENCE: linear.app --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://linear.app analysis_timestamp: 2026-07-10T18:00:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: React + Next.js (inferred) design_system_used: Linear Design System (custom) core_philosophy: issue‑tracking as craft, precision‑first interface with architectural clarity ``` --- ## BRAND IDENTITY ### Brand Essence ``` A high‑precision issue‑tracking and project‑management interface built on architectural clarity, keyboard‑first workflows, and a distinctive dark‑mode‑native surface. The brand voice is engineering‑grade: precise, fast, and minimal — no decoration, only purposeful interface. ``` ### Visual Hierarchy Principles ``` - Primary weight: Typographic hierarchy (Inter at confident weights) — clean, legible, hierarchical - Secondary weight: Color as function (status, priority, labels) — not decoration - Tertiary weight: Keyboard shortcuts and command‑bar — the primary navigation model - Dark mode is the default, not an afterthought - The interface disappears — content and tasks are the focus ``` ### Emotional Tone ``` Primary emotion: Precision Secondary emotion: Speed Overall mood: Architectural, minimalist, engineering‑grade — communicates craft and control ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family ```yaml name: Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 450, 500, 600 styles_used: normal usage: All text — display, body, navigation, UI, code comments ``` ### Typographic Scale ```yaml display_lg: { size: 3rem, weight: 600, line-height: 1.1, tracking: -0.03em } # 48px display_md: { size: 2.25rem, weight: 600, line-height: 1.15, tracking: -0.02em } # 36px display_sm: { size: 1.75rem, weight: 600, line-height: 1.2, tracking: -0.01em } # 28px heading: { size: 1.25rem, weight: 600, line-height: 1.3, tracking: 0 } # 20px title: { size: 1rem, weight: 500, line-height: 1.4, tracking: 0 } # 16px body: { size: 0.875rem, weight: 400, line-height: 1.5, tracking: 0 } # 14px body_small: { size: 0.8125rem, weight: 400, line-height: 1.5, tracking: 0 } # 13px caption: { size: 0.75rem, weight: 450, line-height: 1.4, tracking: 0.02em } # 12px mono: { size: 0.8125rem, weight: 400, line-height: 1.5, tracking: 0 } # 13px, mono command: { size: 0.8125rem, weight: 500, line-height: 1, tracking: 0.02em } # 13px, uppercase ``` ### Letter Spacing Classes ```yaml tight: -0.03em to -0.01em (scales with display sizes) normal: 0 wide: 0.02em (captions, command labels) ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Dark Mode Native) ```yaml primary: { hex: #5E6AD2, rgb: (94,106,210), usage: Primary CTAs, active states, selected items } primary_active: { hex: #4A56C2, rgb: (74,86,194), usage: Hover states for primary elements } primary_disabled: { hex: #3A3A4A, rgb: (58,58,74), usage: Disabled states } ``` ### Canvas & Surfaces (Dark) ```yaml canvas: { hex: #0D0D0D, rgb: (13,13,13), usage: Page background — dark default } surface: { hex: #1A1A1A, rgb: (26,26,26), usage: Cards, panels, secondary surfaces } surface_elevated: { hex: #242424, rgb: (36,36,36), usage: Elevated cards, dropdowns } surface_raised: { hex: #2A2A2A, rgb: (42,42,42), usage: Modals, tooltips } surface_inset: { hex: #0D0D0D, rgb: (13,13,13), usage: Inputs, embedded content } ``` ### Text Colors ```yaml ink: { hex: #FFFFFF, rgb: (255,255,255), usage: Primary text, headings } body: { hex: #E1E1E1, rgb: (225,225,225), usage: Default body text } muted: { hex: #8B8B8B, rgb: (139,139,139), usage: Secondary text, metadata } muted_soft: { hex: #5A5A5A, rgb: (90,90,90), usage: Disabled text, fine print } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary buttons } on_dark: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on dark surfaces } ``` ### Status & Priority Colors ```yaml status_backlog: { hex: #8B8B8B, rgb: (139,139,139), usage: Backlog status } status_todo: { hex: #5E6AD2, rgb: (94,106,210), usage: Todo status } status_in_progress: { hex: #F5A623, rgb: (245,166,35), usage: In progress status } status_done: { hex: #34C759, rgb: (52,199,89), usage: Done status } status_canceled: { hex: #8B8B8B, rgb: (139,139,139), usage: Canceled status } priority_urgent: { hex: #FF3B30, rgb: (255,59,48), usage: Urgent priority } priority_high: { hex: #FF9500, rgb: (255,149,0), usage: High priority } priority_medium: { hex: #FFCC00, rgb: (255,204,0), usage: Medium priority } priority_low: { hex: #34C759, rgb: (52,199,59), usage: Low priority } label_blue: { hex: #5E6AD2, rgb: (94,106,210), usage: Blue labels } label_green: { hex: #34C759, rgb: (52,199,89), usage: Green labels } label_orange: { hex: #FF9500, rgb: (255,149,0), usage: Orange labels } label_red: { hex: #FF3B30, rgb: (255,59,48), usage: Red labels } label_purple: { hex: #AF52DE, rgb: (175,82,222), usage: Purple labels } label_gray: { hex: #8B8B8B, rgb: (139,139,139), usage: Gray labels } ``` ### Semantic Colors ```yaml success: { hex: #34C759, rgb: (52,199,89), usage: Success states, done status } warning: { hex: #FF9500, rgb: (255,149,0), usage: Warning states, in progress } error: { hex: #FF3B30, rgb: (255,59,48), usage: Error states, urgent priority } info: { hex: #5E6AD2, rgb: (94,106,210), usage: Informational states } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 7.2:1 (white on #5E6AD2) text_on_canvas: 15.4:1 (#FFFFFF on #0D0D0D) text_on_surface: 14.8:1 (#FFFFFF on #1A1A1A) text_on_raised: 14.2:1 (#FFFFFF on #2A2A2A) color_harmony: monochromatic (dark surfaces + single blue accent) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 4px scaling_factor: 1.25 ``` ### Spacing Scale ```yaml spacing_xxs: { value: 2px, usage: Border widths } spacing_xs: { value: 4px, usage: Tiny gaps } spacing_sm: { value: 8px, usage: Small paddings } spacing_md: { value: 12px, usage: Element gaps } spacing_lg: { value: 16px, usage: Standard spacing } spacing_xl: { value: 20px, usage: Medium spacing } spacing_xxl: { value: 24px, usage: Large spacing } spacing_xxxl: { value: 32px, usage: XL spacing } spacing_section: { value: 48px, usage: Section spacing } ``` ### Breakpoints ```yaml mobile: { min: 0px, max: 768px, columns: 4, gutter: 16px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 20px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } wide: { min: 1441px, max: 1920px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } full: { max_width: 100%, padding: 0 } sidebar: { width: 280px, collapsible: true } ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Sidebar Navigation ```yaml type: vertical (desktop) / collapsible (mobile) position: fixed left width: 280px background: #0D0D0D (canvas) components: - logo: { size: 32px, link to home } - command_bar: { keyboard shortcut: Cmd+K } - teams: [Team selector] - projects: [Project list] - issues: [Views: All, Assigned, Created, Subscribed] - settings: [Workspace settings] ``` #### Command Bar (Cmd+K) ```yaml type: Modal overlay trigger: Cmd+K (Mac) / Ctrl+K (Windows) background: #2A2A2A (surface_raised) rounded: 12px components: - search_input: { placeholder: "Search or jump to..." } - results: { categorized list } - keyboard_shortcuts: { displayed inline } ``` ### Button System #### Primary Button ```yaml default: { bg: #5E6AD2, text: #FFFFFF, padding: 8px 16px, radius: 6px, height: 36px } hover: { bg: #4A56C2, text: #FFFFFF } active: { bg: #3A46B2, text: #FFFFFF } focus: { outline: 2px solid #5E6AD2, offset: 2px } disabled: { bg: #3A3A4A, text: #5A5A5A } ``` #### Secondary Button ```yaml default: { bg: transparent, text: #E1E1E1, padding: 8px 16px, radius: 6px, height: 36px } hover: { bg: #242424, text: #FFFFFF } active: { bg: #2A2A2A, text: #FFFFFF } focus: { outline: 2px solid #5E6AD2, offset: 2px } disabled: { opacity: 0.5 } ``` #### Icon Button ```yaml default: { bg: transparent, text: #8B8B8B, radius: 6px, size: 32px } hover: { bg: #242424, text: #FFFFFF } active: { bg: #2A2A2A, text: #FFFFFF } focus: { outline: 2px solid #5E6AD2, offset: 2px } ``` ### Form Elements #### Text Input ```yaml default: { bg: #0D0D0D, text: #E1E1E1, border: 1px solid #2A2A2A, radius: 6px, padding: 8px 12px, height: 36px } focus: { border: 2px solid #5E6AD2, bg: #1A1A1A } disabled: { bg: #1A1A1A, opacity: 0.5 } ``` #### Search Input ```yaml default: { bg: #1A1A1A, text: #E1E1E1, border: 1px solid #2A2A2A, radius: 6px, padding: 8px 12px, height: 36px } focus: { border: 2px solid #5E6AD2, bg: #242424 } placeholder: { text: "Search...", color: #5A5A5A } ``` ### Cards & Containers #### Issue Card ```yaml background: #1A1A1A (surface) rounded: 8px padding: 12px 16px border: 1px solid #242424 (surface_elevated) components: - title: { typography: body, color: #FFFFFF } - metadata: { assignee, labels, priority, status, due_date } - hover: { border: 1px solid #2A2A2A } ``` #### Project Card ```yaml background: #1A1A1A (surface) rounded: 8px padding: 16px 20px border: 1px solid #242424 (surface_elevated) components: - name: { typography: title } - description: { typography: body_small, color: #8B8B8B } - progress: { bar or numeric } - metadata: { member count, issue count } ``` ### Modals & Overlays #### Modal ```yaml background: #2A2A2A (surface_raised) rounded: 12px padding: 24px shadow: 0 16px 48px rgba(0,0,0,0.5) components: - header: { typography: heading, close icon } - content: { variable } - actions: { primary + secondary buttons } overlay: { bg: rgba(0,0,0,0.6), backdrop_blur: 8px } ``` ### Labels & Badges #### Status Label ```yaml backlog: { bg: #2A2A2A, text: #8B8B8B, rounded: 4px, padding: 2px 8px } todo: { bg: #2A2A2A, text: #5E6AD2, rounded: 4px, padding: 2px 8px } in_progress: { bg: #2A2A2A, text: #FF9500, rounded: 4px, padding: 2px 8px } done: { bg: #2A2A2A, text: #34C759, rounded: 4px, padding: 2px 8px } canceled: { bg: #2A2A2A, text: #8B8B8B, rounded: 4px, padding: 2px 8px } ``` #### Priority Badge ```yaml urgent: { bg: #FF3B30, text: #FFFFFF, rounded: 4px, padding: 2px 8px } high: { bg: #FF9500, text: #FFFFFF, rounded: 4px, padding: 2px 8px } medium: { bg: #FFCC00, text: #0D0D0D, rounded: 4px, padding: 2px 8px } low: { bg: #34C759, text: #FFFFFF, rounded: 4px, padding: 2px 8px } ``` ### Keyboard Shortcut Display ```yaml type: Inline keycaps background: #242424 (surface_elevated) text: #E1E1E1 (body) padding: 2px 6px rounded: 4px typography: mono usage: Cmd+K, Cmd+Enter, Cmd+Shift+P, etc. ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml application: - sidebar: { fixed left, width: 280px } - main_content: { flex: 1, padding: 24px } - header: { title, actions, filters } - list: { issue list, project list, etc. } - detail_view: { issue detail, project detail } - command_bar: { modal overlay, trigger: Cmd+K } marketing_pages: - hero: { centered, display_lg + subhead + CTA } - features: { 3-column grid } - product_showcase: { UI mockups } - pricing: { tier cards } - footer: { 4-column links } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: start } card_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Issue List Layout ```yaml type: Table or List columns: - status: { icon only } - title: { primary text } - priority: { icon or badge } - labels: { badge list } - assignee: { avatar } - due_date: { date text } - more: { actions menu } ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 100ms fast: 150ms default: 200ms slow: 300ms macro: 500ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.02, duration: 150ms } lift: { value: -2px, duration: 150ms } color_shift: { speed: 150ms } underline: { style: solid, duration: 150ms } ``` ### Command Bar Animation ```yaml open: { opacity: 0→1, transform: scale(0.98→1), duration: 200ms } close: { opacity: 1→0, transform: scale(1→0.98), duration: 150ms } ``` ### Keyboard Interactions ```yaml trigger: { Cmd+K (Mac), Ctrl+K (Windows) } shortcuts: { displayed inline, always visible } navigation: { arrow keys, Cmd+Enter to submit } ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: Custom SVG icon set style: outline (primary), filled (active) size: small: 16px, medium: 20px, large: 24px color: inherit (uses currentColor) stroke_width: 1.5px (outline icons) corner_style: rounded ``` ### Avatars ```yaml default: { size: 28px, rounded: 50% } small: { size: 20px, rounded: 50% } large: { size: 36px, rounded: 50% } group: { overlapping avatars, border: 2px solid #1A1A1A } ``` ### Status Indicators ```yaml online: { dot: #34C759, size: 8px } away: { dot: #FF9500, size: 8px } offline: { dot: #8B8B8B, size: 8px } ``` ### Product Mockups ```yaml style: Dark UI fragments in context rounded: 12px border: 1px solid #242424 shadow: 0 8px 32px rgba(0,0,0,0.3) ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [command bar, issue list, status, title, assignee] tablet_priority: [sidebar collapsed, issue list, full metadata] desktop_priority: [sidebar expanded, issue list, detail view, full metadata] ``` ### Collapse Points ```yaml sidebar: 1024px (collapses to icon-only) issue_metadata: 768px (collapses to tooltips) detail_view: 768px (becomes full-width) ``` ### Touch Targets ```yaml minimum_size: 44x44px (all interactive elements) spacing_between: 8px tap_feedback: scale (buttons), highlight (cards) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,