Linear

Design Specification — Linear

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FEFEFF), ink text (#000000), a vivid accent (#7180FF). All type is set in "Inter Variable",Arial,Helvetica,sans-serif. Detected font weights: 450, 500.

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: Inter Variable — stack: "Inter Variable",Arial,Helvetica,sans-serif

Font stacks (most used first)

• "Inter Variable",Arial,Helvetica,sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 450, 500

Line heights (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• rgba(0,0,0,.02) 0 3px 6px -2px,rgba(0,0,0,.043) 0 1px 1px
• 0 0 0 1px #00000016,0px 3px 6px -2px #00000005,0px 1px 1px #0000000a

Layout

Container max-width: 1023px

Breakpoints

• 480px
• 1023px

Animation & Motion

Transitions

• opacity .1s
• none
• opacity .2s ease-out
• opacity .8s .8s ease-out
• background-color .15s,border-color .15s
• background-color .15s,color .15s
• fill .4s

Easing curves

• cubic-bezier(.45,0,.55,1)

Keyframes

@keyframes logoBackgroundPulse { 0%{opacity:0;transform:scale(.8)}70%{opacity:1}100%{opacity:0;transform:scale(1)} }
@keyframes fadeIn { 0%{opacity:0}100%{opacity:1} }

Animations

• fadeIn .4s ease-out 1s both
• none

CTA labels found on page

• Reload

Source Design Tokens (CSS custom properties)

:root {
  --bg-sidebar-light: #efeff0;
  --bg-base-color-light: #f9f9fa;
  --bg-border-color-light: #e2e2e2;
  --content-color-light: #b0b5c0;
  --content-highlight-color-light: #23252a;
  --loading-error-muted-color-light: #5b5b5d;
  --loading-error-secondary-bg-light: #fefeff;
  --loading-error-secondary-border-light: #00000016;
  --loading-error-secondary-hover-bg-light: #f7f7f7;
  --loading-error-secondary-label-light: #2f2f31;
  --loading-error-secondary-shadow-light: 0px 3px 6px -2px #00000005,0px 1px 1px #0000000a;
  --bg-sidebar-dark: #09090a;
  --bg-base-color-dark: #121213;
  --bg-border-color-dark: #212224;
  --content-color-dark: #6b6f76;
  --content-highlight-color-dark: #ffffff;
  --loading-error-muted-color-dark: #97979a;
  --loading-error-secondary-bg-dark: #1c1c1d;
  --loading-error-secondary-border-dark: #ffffff22;
  --loading-error-secondary-hover-bg-dark: #252627;
  --loading-error-secondary-label-dark: #e2e3e5;
  --loading-error-secondary-shadow-dark: 0px 4px 4px -1px #0000000a,0px 1px 1px 0px #00000014;
  --sidebar-width: 244px;
  --agent-toolbar-height: 0px;
  --scrollbar-width: 12px;
  --control-border-radius: var(--control-border-radius, 4px);
  --loading-error-thin-pixel: 1px;
  --radius-rounded: 9999px;
  --bg-color: var(--bg-sidebar-light);
  --bg-sidebar-color: var(--bg-sidebar-light);
  --bg-base-color: var(--bg-base-color-light);
  --bg-border-color: var(--bg-border-color-light);
  --content-color: var(--content-color-light);
  --content-highlight-color: var(--content-highlight-color-light);
  --loading-error-muted-color: var(--loading-error-muted-color-light);
  --loading-error-secondary-bg: var(--loading-error-secondary-bg-light);
  --loading-error-secondary-border: var(--loading-error-secondary-border-light);
  --loading-error-secondary-hover-bg: var(--loading-error-secondary-hover-bg-light);
  --loading-error-secondary-label: var(--loading-error-secondary-label-light);
  --loading-error-secondary-shadow: var(--loading-error-secondary-shadow-light);
}

Do's and Don'ts

Do

• Do reserve the accent #7180FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FEFEFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 450, 500.
• Do align spacing to the 4px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.

Design Tokens (copy-paste)

:root {
  --color-primary: #6C78E6;
  --color-accent: #7180FF;
  --color-background: #FEFEFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E2E2E2;
  --color-border: #B0B5C0;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9F9FA;
  --color-surface-container: #F7F7F7;
  --color-surface-container-high: #EFEFF0;
  --color-surface-container-highest: #E2E3E5;
  --font-sans: "Inter Variable",Arial,Helvetica,sans-serif;
  --font-size-title-lg: 20px;
  --font-size-body-md: 15px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-md: 12px;
  --radius-pill: 9999px;
  --shadow-sm: rgba(0,0,0,.02) 0 3px 6px -2px,rgba(0,0,0,.043) 0 1px 1px;
  --shadow-md: 0 0 0 1px #00000016,0px 3px 6px -2px #00000005,0px 1px 1px #0000000a;
  --space-sm: 8px;
  --space-md: 20px;
  --container-max: 1023px;
}