/* ============================================================ LINEAR — DESIGN TOKENS Dark theme. All values reverse-engineered from product UI. Drop this file at the root of your app and import once. ============================================================ */ :root { /* -------------------------------------------------------- COLOR — Backgrounds (dark theme) Linear uses very dark, slightly warm/cool greys with thin elevation steps. Surfaces gain ~2% lightness per step. -------------------------------------------------------- */ --color-bg-app: #08090A; /* page background, deepest */ --color-bg-sidebar: #0C0D0E; /* nav/sidebar */ --color-bg-surface: #101113; /* cards, panels */ --color-bg-elevated: #18191B; /* modals, popovers */ --color-bg-overlay: #1F2023; /* tooltips, hover surfaces */ --color-bg-input: #1A1B1E; --color-bg-hover: rgba(255,255,255,0.04); --color-bg-active: rgba(255,255,255,0.06); --color-bg-selected: rgba(94,106,210,0.10); /* -------------------------------------------------------- COLOR — Text Strict 4-level hierarchy. Don't invent in-between greys. -------------------------------------------------------- */ --color-text-primary: #F7F8F8; /* headlines, primary copy */ --color-text-secondary: #B4B8BE; /* body text */ --color-text-tertiary: #8A8F98; /* labels, metadata */ --color-text-quaternary: #62666D; /* placeholder, disabled */ --color-text-on-accent: #FFFFFF; /* -------------------------------------------------------- COLOR — Borders & dividers Mostly transparent whites; never solid greys. -------------------------------------------------------- */ --color-border-subtle: rgba(255,255,255,0.06); --color-border: rgba(255,255,255,0.08); --color-border-strong: rgba(255,255,255,0.12); --color-border-focus: #5E6AD2; /* -------------------------------------------------------- COLOR — Brand & accents Linear's signature indigo (#5E6AD2) is the workspace accent. The other hues are the status/priority palette. -------------------------------------------------------- */ --color-accent: #5E6AD2; --color-accent-hover: #6E7AE0; --color-accent-active: #4F5ABF; --color-accent-subtle: rgba(94,106,210,0.12); --color-accent-border: rgba(94,106,210,0.30); /* Status / semantic */ --color-red: #EB5757; --color-orange: #F2994A; --color-yellow: #F2C94C; --color-green: #4CB782; --color-blue: #4EA7FC; --color-indigo: #5E6AD2; --color-purple: #A371F7; --color-pink: #EB5388; --color-red-subtle: rgba(235,87,87,0.12); --color-orange-subtle: rgba(242,153,74,0.14); --color-yellow-subtle: rgba(242,201,76,0.14); --color-green-subtle: rgba(76,183,130,0.14); --color-blue-subtle: rgba(78,167,252,0.14); /* -------------------------------------------------------- TYPOGRAPHY Linear uses Inter Variable as primary, with a tight tracking. Mono is the JetBrains/Berkeley family — IBM Plex Mono is a close, free-licensed stand-in. -------------------------------------------------------- */ --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --font-mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-serif: "Tiempos Headline", "Tiempos Text", Georgia, serif; /* Type scale — display (marketing) and ui (product) tracks */ --text-display-2xl: 72px; /* hero */ --text-display-xl: 56px; --text-display-lg: 44px; --text-display-md: 32px; --text-display-sm: 24px; --text-title-lg: 20px; /* page titles in product */ --text-title: 17px; --text-title-sm: 15px; --text-body-lg: 15px; --text-body: 14px; /* default product copy */ --text-body-sm: 13px; --text-label: 12px; --text-mini: 11px; /* metadata, ELN-style */ /* Line-heights — tight for UI, looser for prose */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.45; --lh-relaxed: 1.6; /* Weights — Linear leans on 400/500/600 only */ --fw-regular: 400; --fw-medium: 510; /* Inter optical 510 looks "right" */ --fw-semibold: 590; --fw-bold: 680; /* Letter-spacing — slightly negative for display */ --tracking-display: -0.022em; --tracking-title: -0.012em; --tracking-body: -0.006em; --tracking-label: 0em; --tracking-mono: 0em; /* -------------------------------------------------------- SPACING — 4px base, named for intent not size -------------------------------------------------------- */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 12px; --space-6: 16px; --space-7: 20px; --space-8: 24px; --space-9: 32px; --space-10: 40px; --space-11: 48px; --space-12: 64px; --space-13: 80px; --space-14: 96px; /* -------------------------------------------------------- RADIUS Linear is famously not very rounded. Most surfaces 6–8px. -------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px; /* -------------------------------------------------------- SHADOWS Used very sparingly. Mostly inner highlight + soft drop. -------------------------------------------------------- */ --shadow-xs: 0 1px 0 0 rgba(255,255,255,0.04) inset; --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04) inset; --shadow-lg: 0 16px 40px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.06) inset; --shadow-popover: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08) inset; /* Focus ring */ --ring: 0 0 0 2px var(--color-bg-app), 0 0 0 4px var(--color-accent); /* -------------------------------------------------------- MOTION — Linear uses near-linear, snappy easings -------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-snap: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-fast: 100ms; --duration: 180ms; --duration-slow: 320ms; /* Layout */ --sidebar-width: 220px; --header-height: 44px; } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--color-bg-app); color: var(--color-text-primary); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-normal); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "ss02", "cv11"; } body { font-variation-settings: "opsz" 14; } ::selection { background: var(--color-accent-subtle); color: var(--color-text-primary); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } /* Custom scrollbars — thin, near invisible */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.12); background-clip: padding-box; border: 2px solid transparent; }