prismdinstrument

EXTRACTED · 10 SECTIONS · 59 COLORS · GRADE A

linear.app

Accent #5e6ad2 · Inter Variable — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

107

keyframes

DESIGN.md tokens.json

real render · source of truth

linear.app is built on a near-black canvas (rgb(8, 9, 10)). The system uses rgb(94, 106, 210) as the accent for primary actions and brand signals. Fully-rounded CTAs (9999px) signal a friendly, tactile interaction model alongside Inter Variable as the primary typeface. A layered elevation system (13 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 107 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

59 colors measured · click any swatch to copy

Canvas

#08090a

AAA 18.73:1

Ink

#f7f8f8

AAA 18.73:1

Accent

#5e6ad2

AA·lg 4.24:1

Line

#62666d

AA·lg 3.45:1

Semantic states

No semantic state colors detected — this system signals state through weight & motion, not hue.

59 colors mined from the live renderexpand

Type — the ladder, in the real face

9 roles · rendered live in the real Inter Variable (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl72px · 510

display lg

display-lg64px · 510 · ×1.13

display md

display-md20px · 590 · ×3.20

headline

headline16px · 590 · ×1.25

body

body16px · 400 · ×1.00

body sm

body-sm14px · 510 · ×1.14

caption

caption12px · 400 · ×1.17

button

button13.3333px · 400 · ×0.90

mono

mono14px · 400 · ×0.95

Depth — elevation is extracted, not invented

13 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

19 easing curves · 107 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.25, 0.46, 0.45, 0.94)

ease-in-out-quartcubic-bezier(0.77,0,0.175,1)

ease-in-out-circcubic-bezier(0.785,0.135,0.15,0.86)

ease-out-circcubic-bezier(0.075,0.82,0.165,1)

ease-out-quintcubic-bezier(0.23,1,0.32,1)

ease-in-quintcubic-bezier(0.755,0.05,0.855,0.06)

ease-out-expocubic-bezier(0.19,1,0.22,1)

ease-in-out-quadcubic-bezier(0.455,0.03,0.515,0.955)

107 keyframe animations extracted

swipe-out-left

swipe-out-right

swipe-out-up

swipe-out-down

sonner-fade-in

sonner-fade-out

sonner-spin

grid-dot-0-0-agent

grid-dot-0-1-agent

grid-dot-0-2-agent

grid-dot-0-3-agent

grid-dot-0-4-agent

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 6px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 56px

Radius

none
0px

xs
4px

sm
8px

md
12px

lg
20px

xl
32px

full
9999px

Components — the closed vocabulary

14 component families · 50 variants counted on the live DOM

Component	Variants found
buttons	×10
links	×10
heading H2	×4
timeline Pill	×4
inputs	×3
nav Links	×3
footer Links	×3
code Block	×3
changelog Row	×3
badges	×2
heading H3	×2
heading H1	×1
heading H4	×1
avatar	×1

Component style specs (§4)expand

Buttons

Pill

Background: transparent
Text: #8a8f98 {colors.ink-subtle}
Padding: 0px 12px
Radius: 9999px
Font: 13px weight 400
Use: Status pills, tags, chips
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Ghost

Background: transparent
Text: #ffffff
Padding: 0px 4px
Radius: 4px
Font: 13.3333px weight 400
Use: Subtle action, toolbar, nav button
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Icon Button

Background: transparent
Text: #62666d {colors.hairline}
Padding: 0px
Radius: 6px
Font: 13.3333px weight 400
Use: Toolbar/UI icons
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Icon Button

Background: rgba(255, 255, 255, 0.02)
Text: #e2e4e7
Padding: 0px
Radius: 6px
Border: 1px solid rgb(36, 40, 44)
Font: 13.3333px weight 400
Use: Toolbar/UI icons
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Ghost

Background: transparent
Text: #d0d6e0
Padding: 0px 6px
Radius: 6px
Font: 13px weight 510
Use: Subtle action, toolbar, nav button
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Primary Brand

Background: #5e6ad2 {colors.primary}
Text: #ffffff
Padding: 0px 16px
Radius: 0px
Font: 14px weight 510
Use: Primary CTA / brand action
Focus: backgroundColor: rgba(255, 255, 255, 0.06), color: rgb(201, 204, 208), border: 0px none rgb(201, 204, 208)

Pill

Background: #e5e5e6
Text: #08090a {colors.canvas}

Layout — structure & dimensions

4 layout metrics measured

max Width100%

header Height73px

sidebar Width0px

container Padding72px 0px 0px

Responsive — real breakpoints

5 media-query stops read from the live CSS

600px

640px

768px

1024px

1280px

Do's & Don'ts

27 enforceable rules pulled verbatim from the spec

Use dark background (`#08090a`) as the foundation — this is a dark-mode-native design

Use Inter Variable as the primary typeface — it defines the brand personality

Use weight 680 for the heaviest text — this design uses a custom heavy weight, not the standard 700 (bold)

Use negative letter-spacing (-1.408px) at display sizes for compressed, editorial headlines

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Indigo (`#5e6ad2`) as the primary accent — it's the brand's signature interactive color

Use pill-shaped radius (9999px) for primary CTA buttons — the brand uses fully-rounded, pill CTAs

Use 8px border-radius on cards — consistent with the grid card corners

Style form inputs with a `1px solid rgba(255, 255, 255, 0.08)` border — use border-based inputs, not floating labels or underline-only

Maintain nav height at 72px — consistent vertical space for the navigation bar

Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar

Use a single primary CTA in the hero — the design intentionally avoids choice paralysis

Each card includes a top image — imagery is part of the card identity, not optional

Lay out testimonials in a grid (9+ items) — quantity signals scale and trust

Build a content-dense footer (5 columns, ~38 links) — this site treats the footer as a sitemap, not an afterthought

Don't

Don't use light backgrounds — the dark canvas is the native medium

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't substitute weight 680 with the standard 700 — the custom value is part of the brand's type personality

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't use rectangular buttons for primary actions — the rounded pill shape is the brand standard

Don't remove the input border — the border is the primary affordance indicator for form fields

Don't collapse or hide the nav on scroll without an explicit scroll-triggered animation — the design uses fixed nav presence

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the linear.app design system. Canvas #08090a · ink #f7f8f8 · accent #5e6ad2. Type: Inter Variable — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add linear

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press