MozaikaDesign system

Linear — Design System

dark · modern · medium · custom · confidence 92% · deep decode

Linear is near-black restraint with one decisive accent. The canvas sits at #08090A and a single indigo (#5E6AD2) does all the pointing; everything else is a disciplined grayscale ladder. Inter carries every word — no display face, no flourish — set tight on a strict 8px rhythm so the interface reads as engineered, not decorated. Corners are minimal (2px on surfaces, fully-rounded pills on primary buttons), borders are hairline #26282A, and shadows are nearly absent — depth comes from luminance, not drop-shadow. It feels fast before you click: quiet, dense, keyboard-first, and unmistakably built for people who ship.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/linear.

Tokens

Linear's decoded design system: background #08090A, text #D0D6E0, accent #E5E5E6, link #5E6AD2, primary #D0D6E0; type scale h1 64px / h2 48px / body 15px; 4px spacing base; 2px base radius. The single interactive/action color is #E5E5E6 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

RoleValue
bg#08090A
surface#141516
border#26272A
text#D0D6E0
text_muted#84888E
primary#D0D6E0
accent#E5E5E6
link#5E6AD2
secondary#E4F222
button_bg#E5E5E6
button_text#08090A

Using these colors

Typography

Spacing

Radii

Shadow

rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px

Shadows (elevation)

Motion

Micro-interactions run at 160ms (dominant) with cubic-bezier(0.25, 0.46, 0.45, 0.94).

Native design tokens

TokenValue
--color-text-secondary#d0d6e0
--color-text-tertiary#8a8f98
--color-line-tertiary#18191a
--color-white#fff
--color-accent#7170ff
--color-border-translucent#ffffff0d
--color-line-secondary#202122
--color-bg-level-3#191a1b
--editor-text-color#e4e5e9
--color-line-primary#37393a

…and 110 more measured on the page.

Button states (measured)

Layout (measured)

Motion choreography (measured)

Load order: span.w9ZFkq_animatedTextGradi → circle.grid-dot-0-0-upDown×25 → circle.grid-dot-0-0-pong×25 → circle.grid-dot-0-0-agent×50 → div.qM9FAa_cursor → circle.grid-dot-0-0-empty-once×25

Scroll reveal: 2 elements rest at opacity 0, animate in over 800ms.

Overlay recipe (measured)

dropdown panel: #171718 · radius 8px · enter 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

Input (measured)

height 68px · radius 6px · focus ring 2px solid rgb(94, 105, 209)

Responsive (measured)

Per-section tokens (39)

Export: DESIGN.md

# Linear — Design System

> dark, modern, medium, custom — deep decode (measured live)

Linear is near-black restraint with one decisive accent. The canvas sits at #08090A and a single indigo (#5E6AD2) does all the pointing; everything else is a disciplined grayscale ladder. Inter carries every word — no display face, no flourish — set tight on a strict 8px rhythm so the interface reads as engineered, not decorated. Corners are minimal (2px on surfaces, fully-rounded pills on primary buttons), borders are hairline #26282A, and shadows are nearly absent — depth comes from luminance, not drop-shadow. It feels fast before you click: quiet, dense, keyboard-first, and unmistakably built for people who ship.

## Colors

| Role | Value |
|------|-------|
| bg | `#08090A` |
| surface | `#141516` |
| border | `#26272A` |
| text | `#D0D6E0` |
| text_muted | `#84888E` |
| primary | `#D0D6E0` |
| accent | `#E5E5E6` |
| link | `#5E6AD2` |
| secondary | `#E4F222` |
| button_bg | `#E5E5E6` |
| button_text | `#08090A` |

**Using these colors**

- **Action color** `#E5E5E6` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `accent`, `button_bg` are all `#E5E5E6` — one role, not several (your action color).
- **accent** `#E5E5E6` — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
- **primary** `#D0D6E0` — ≈ the text color — a foreground/text color, not an action color (action = #E5E5E6).
- **link** `#5E6AD2` — inline text links and link-styled controls.
- **secondary** `#E4F222` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
- **Page coverage** (full-page screenshot pixels): `#08090A` 95.2% · `#525355` 4.8%

## Typography

- Heading: **SF Pro Display** _(free fallback: Inter)_
- Body: **Inter**
- Mono: **Berkeley Mono** _(measured)_

| Role | Size / weight · line-height · tracking |
|------|------------------------------------------|
| hero | 64px / 510 · lh 64px · tracking -1.41px |
| h2 | 48px / 510 · lh 48px · tracking -1.06px |
| h3 | 24px / 400 · lh 32px · tracking -0.29px |
| body | 15px / 400 · lh 24px · tracking -0.17px |
| small | 14px / 400 · lh 21px · tracking -0.18px |

- Weight ladder: 300 · 400 · 510 · 590 — use these exact measured weights, not the 400/600 defaults.

> **Fonts —** SF Pro Display is proprietary — closest free match: Inter (Google). Load Inter; keep SF Pro Display first so licensed users still get it. Inter — free, on Google.

## Spacing
- base unit: 4px (inferred from the measured scale)
- measured scale: 2px, 3px, 4px, 6px, 8px, 12px, 15px, 16px, 20px, 24px — snap all gaps/padding to these
- section rhythm: 128px top/bottom padding per section (measured)

## Radius
- base: 2px
- button: 9999px
- card: 6px
- pill: 9999px
- sharp: 2px

## Buttons

| Button | Fill / text | Border | Radius | Padding | Font | Shadow |
|--------|-------------|--------|--------|---------|------|--------|
| primary | `#E5E5E6` / `#08090A` | 1px solid rgb(229, 229, 230) | 9999px | 0px 12px 0px 12px | 510 13px | rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px |
| secondary | `rgba(0, 0, 0, 0)` / `#8A8F98` | none | 9999px | 0px 12px 0px 12px | 400 13px | none |

**States (measured, not guessed)**

- primary hover: background `#FFFFFF`
- primary focus: outline `2px solid rgb(94, 105, 209)`
- secondary hover: background `rgba(255, 255, 255, 0.08)` · color `#F7F8F8`
- transition: `border 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94)`

## Shadows (elevation)
- subtle: `rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px`
- card: `rgba(0, 0, 0, 0.4) 0px 2px 4px 0px`
- button: `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`
- overlay: `rgba(8, 9, 10, 0.6) 0px 4px 32px 0px`

## Motion
- durations: 160ms (dominant) · 400ms · 100ms
- easings: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` (dominant) · `ease-out`
- animated properties: transform, filter, background, opacity

Micro-interactions use the dominant duration + easing; nothing on the page animates slower than the longest duration above — don't invent springier motion.

## Their own tokens (verbatim from :root)

| Token | Value |
|-------|-------|
| `--color-text-secondary` | `#d0d6e0` |
| `--color-text-tertiary` | `#8a8f98` |
| `--color-line-tertiary` | `#18191a` |
| `--color-white` | `#fff` |
| `--color-accent` | `#7170ff` |
| `--color-border-translucent` | `#ffffff0d` |
| `--color-line-secondary` | `#202122` |
| `--color-bg-level-3` | `#191a1b` |
| `--editor-text-color` | `#e4e5e9` |
| `--color-line-primary` | `#37393a` |
| `--transparent` | `#fff0` |
| `--color-fg-primary` | `#f7f8f8` |

_…and 108 more measured on the page._

Prefer these names when extending their system — it's the brand's actual vocabulary.

## Layout (measured)
- container max 1436px · common grid: 2-col
- nav: 73px fixed · backdrop blur(20px) · border-bottom 1px solid rgba(255, 255, 255, 0.08)

| Section (y) | Height | Cols | Gap | Pad y | Split |
|---|---|---|---|---|---|
| 2481 | 1239 | 2 | — | 128/128 | — |
| 3730 | 1231 | 2 | — | 128/128 | — |

## Motion choreography (measured)
Load order: `span.w9ZFkq_animatedTextGradi` @0ms → `circle.grid-dot-0-0-upDown`×25 @0ms → `circle.grid-dot-0-0-pong`×25 @1ms → `circle.grid-dot-0-0-agent`×50 @1ms → `div.qM9FAa_cursor` @1ms → `circle.grid-dot-0-0-empty-once`×25 @1ms
- scroll reveal: 2 elements rest at opacity 0, animate in over 800ms (0 revealed during the drive).
- overlay dropdown (auto-opened): panel #171718 · r 8px · border 1px solid rgba(255, 255, 255, 0.08)
  - enter: opacity from 0 · 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94) | transform from scale(0.9) · 160ms cubic-bezier(0.25, 0.46, 0.45, 0.94)
  - exit: opacity from 0.991169 · 159ms cubic-bezier(0.25, 0.46, 0.45, 0.94) | transform from scale(0.999117) · 159ms cubic-bezier(0.25, 0.46, 0.45, 0.94)

Rebuild the timeline, not just the durations — order, delays and staggers above are the choreography.

## Components (measured)
- input: h 68px · r 6px · border 1px solid rgba(255, 255, 255, 0.08) · bg rgba(255, 255, 255, 0.02) · placeholder #62666D
  - focus ring: `2px solid rgb(94, 105, 209)` — this exact construction, don't invent your own
- link: #F7F8F8 · no underline
- disabled: bg rgba(255, 255, 255, 0.03) · text #F7F8F8

## Responsive (measured)
- breakpoints: 640px · 768px · 928px · 1024px · 1280px · 1440px
- mobile (390px): hero 38px · body 16px · nav: inline

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.
Hover/focus states, shadows and motion timings above are measured from the live page — match them exactly, don't re-guess them.

---

> **Decoded with Mozaika** — measured live, not guessed. Full decoded design system + one-command install: mozaika.design/ds/linear

Export: Tailwind v4 (@theme)

@theme {
  /* action color #E5E5E6 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --color-bg: #08090A;
  --color-surface: #141516;
  --color-border: #26272A;
  --color-text: #D0D6E0;
  --color-text-muted: #84888E;
  --color-primary: #D0D6E0;  /* ≈ the text color — a foreground/text color, not an action color (action = #E5E5E6). */
  --color-accent: #E5E5E6;  /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
  --color-link: #5E6AD2;  /* inline text links and link-styled controls. */
  --color-secondary: #E4F222;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --color-button-bg: #E5E5E6;  /* primary-button fill — the main call-to-action color. */
  --color-button-text: #08090A;
  /* fonts: SF Pro Display is proprietary — closest free match: Inter (Google). Load Inter; keep SF Pro Display first so licensed users still get it. Inter — free, on Google. */
  --font-heading: "SF Pro Display", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, monospace;
  /* measured weights: 300, 400, 510, 590 — use these, not 400/600 */
  --text-hero: 64px; --font-weight-hero: 510; --leading-hero: 64px; --tracking-hero: -1.41px;
  --text-h2: 48px; --font-weight-h2: 510; --leading-h2: 48px; --tracking-h2: -1.06px;
  --text-h3: 24px; --font-weight-h3: 400; --leading-h3: 32px; --tracking-h3: -0.29px;
  --text-body: 15px; --font-weight-body: 400; --leading-body: 24px; --tracking-body: -0.17px;
  --text-small: 14px; --font-weight-small: 400; --leading-small: 21px; --tracking-small: -0.18px;
  --radius-base: 2px;
  --radius-button: 9999px;
  --radius-card: 6px;
  --radius-pill: 9999px;
  --radius-sharp: 2px;
  --shadow-card: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
  --shadow-overlay: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px;
  --color-btn-hover: #FFFFFF;  /* measured primary hover fill */
  --outline-focus: 2px solid rgb(94, 105, 209);  /* measured focus ring */
  --ease-brand: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 100ms;  /* use: duration-[var(--duration-fast)] */
  --duration-base: 160ms;
  --duration-slow: 400ms;
  --section-y: 128px;  /* per-section vertical padding (measured) */
  --spacing: 4px;  /* measured base — drives the p-*/gap-* scale. steps seen on the page: 2, 3, 4, 6, 8, 12, 15, 16, 20, 24px */
}

Export: CSS variables

:root {
  /* action color #E5E5E6 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --bg: #08090A;
  --surface: #141516;
  --border: #26272A;
  --text: #D0D6E0;
  --text-muted: #84888E;
  --primary: #D0D6E0;  /* ≈ the text color — a foreground/text color, not an action color (action = #E5E5E6). */
  --accent: #E5E5E6;  /* THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. */
  --link: #5E6AD2;  /* inline text links and link-styled controls. */
  --secondary: #E4F222;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --button-bg: #E5E5E6;  /* primary-button fill — the main call-to-action color. */
  --button-text: #08090A;
  --font-heading: "SF Pro Display", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "Berkeley Mono", ui-monospace, monospace;
  --text-hero: 64px; --weight-hero: 510; --leading-hero: 64px; --tracking-hero: -1.41px;
  --text-h2: 48px; --weight-h2: 510; --leading-h2: 48px; --tracking-h2: -1.06px;
  --text-h3: 24px; --weight-h3: 400; --leading-h3: 32px; --tracking-h3: -0.29px;
  --text-body: 15px; --weight-body: 400; --leading-body: 24px; --tracking-body: -0.17px;
  --text-small: 14px; --weight-small: 400; --leading-small: 21px; --tracking-small: -0.18px;
  --radius: 2px;
  --radius-button: 9999px;
  --radius-card: 6px;
  --radius-pill: 9999px;
  --radius-sharp: 2px;
  --shadow-card: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px;
  --shadow-overlay: rgba(8, 9, 10, 0.6) 0px 4px 32px 0px;
  --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px;
  --btn-bg-hover: #FFFFFF;
  --focus-ring: 2px solid rgb(94, 105, 209);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast: 100ms;
  --duration-base: 160ms;
  --duration-slow: 400ms;
  --section-y: 128px;
}

/* their own tokens, verbatim from the site's :root */
:root {
  --color-text-secondary: #d0d6e0;
  --color-text-tertiary: #8a8f98;
  --color-line-tertiary: #18191a;
  --color-white: #fff;
  --color-accent: #7170ff;
  --color-border-translucent: #ffffff0d;
  --color-line-secondary: #202122;
  --color-bg-level-3: #191a1b;
  --editor-text-color: #e4e5e9;
  --color-line-primary: #37393a;
  --transparent: #fff0;
  --color-fg-primary: #f7f8f8;
}
/* fonts: SF Pro Display is proprietary — closest free match: Inter (Google). Load Inter; keep SF Pro Display first so licensed users still get it. Inter — free, on Google. */