← Gallery

extracted · 28 artefacts

linear.app

Live extraction of https://linear.app — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 28 files
18colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 28 artefacts for linear.app and renders 12+ sections below.

See full comparison ↗
4,205 charsbrand book ↗
---
site: Linear – The system for product development
url: "https://linear.app"
generated_at: "2026-05-14T22:15:57.552Z"
generator: "designlang@12.11.0"
intent: landing
material: material-you
tokens:
  colors:
    primary: "#e4f222"
    secondary: "#5e6ad2"
    accent: "#00ff05"
    background: "#08090a"
    foreground: "#f7f8f8"
  typography:
    sans: Inter Variable
    mono: Berkeley Mono
    base: 14
  spacing:
    scale: "[1, 39, 47, 51, 56, 69, 79, 91, 95, 99]"
  radii:
    xs: 1
    sm: 4
    md: 7
    lg: 16
    xl: 20
  shadows:
    sm: "rgb(35, 37, 42) 0px 0px 0px 1px inset"
---

# Overview

A **landing** page (heuristic confidence 0.31), dressed in **material-you** material (0.45).

> "Faster app launch"

The author writes in a **neutral** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `content → logo-wall → nav → testimonials → nav → nav → nav → content → testimonials → nav → testimonials → nav → hero → nav → testimonial → hero → nav → nav → nav → testimonial → cta → footer`.

Source: <https://linear.app>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#e4f222` | 2 |
| secondary | `#5e6ad2` | 3 |
| accent | `#00ff05` | 19 |
| background | `#08090a` | — |
| foreground | `#f7f8f8` | — |

**Neutrals:** `#f7f8f8` · `#62666d` · `#d0d6e0` · `#e2e4e7` · `#8a8f98`

**Total unique colors detected:** 30.

# Typography

**Families**
- `Inter Variable` · 3616 uses
- `Berkeley Mono` · 316 uses

**Body size:** `14px` / line-height `21px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `510` | `64px` |
| h2 | `40px` | `510` | `44px` |
| h3 | `20px` | `590` | `26.6px` |
| h4 | `16px` | `400` | `normal` |

# Layout

**Scale:** `1px` · `39px` · `47px` · `51px` · `56px` · `69px` · `79px` · `91px` · `95px` · `99px`

**Layout primitives:** 98 grid containers · 492 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `sm` — `rgba(94, 106, 210, 0) 0px 0px 0px 9.8766px`
- `sm` — `rgba(0, 0, 0, 0.1) 0px 0px 0px 2px`
- `sm` — `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- `sm` — `rgb(35, 37, 42) 0px 0px 0px 1px inset`
- `sm` — `rgba(8, 9, 10, 0.1) 0px 0px 0px 1px, rgba(8, 9, 10, 0.4) 0px 0px 64px 0px`
- `sm` — `rgba(255, 255, 255, 0.03) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.04) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 4px 0px`

**Z-index layers:** 6 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `xs` — `1px`
- `sm` — `4px`
- `md` — `7px`
- `lg` — `12px`
- `lg` — `16px`
- `xl` — `20px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `dropdowns` · `badges` · `avatars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 88 |
| input | — | — | 3 |

# Do's and Don'ts

**Do's**
- Use `linear`, `sign`, `pulse` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 80 !important rules — prefer specificity over overrides.
- Don't 83% of css is unused — consider purging.
- Don't 5916 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://linear.app>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._

Typography

Inter Variable
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · neutral · you-only

top CTA verbs

linear×5sign×2pulse×2initiatives×2projects×2agents×2product×1resources×1

Motion

Durations and easing curves captured from real CSS transitions.

durations

xs100ms
sm160ms
md400ms

easings

  • ease-out-312cubic-bezier(0.25, 0.46, 0.45, 0.94)
  • ease-in-outease

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

747 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'default';
  size?: 'md';
  disabled?: boolean;
  children?: React.ReactNode;
}

export function Button({ variant = 'default', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface InputProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Input({ variant = 'default', size = 'md', ...rest }: InputProps) {
  return React.createElement('input', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

137
total icons
0
stroke-only
93
fill-only
1.68
avg stroke
—
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://linear.app
{
  "colors": {
    "all": [
      {
        "hex": "#f7f8f8",
        "rgb": {
          "r": 247,
          "g": 248,
          "b": 248,
          "a": 1
        },
        "hsl": {
          "h": 180,
          "s": 7,
          "l": 97
        },
        "count": 6016,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#62666d",
        "rgb": {
          "r": 98,
          "g": 102,
          "b": 109,
          "a": 1
        },
        "hsl": {
          "h": 218,
          "s": 5,
          "l": 41
        },
        "count": 719,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#d0d6e0",
        "rgb": {
          "r": 208,
          "g": 214,
          "b": 224,
          "a": 1
        },
        "hsl": {
          "h": 218,
          "s": 21,
          "l": 85
        },
        "count": 368,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#e2e4e7",
        "rgb": {
          "r": 226,
          "g": 228,
          "b": 231,
          "a": 1
        },
        "hsl": {
          "h": 216,
          "s": 9,
          "l": 90
        },
        "count": 295,
        "contexts": [
          "background",
          "border",
          "text"
        ]
      },
      {
        "hex": "#8a8f98",
        "rgb": {
          "r": 138,
          "g": 143,
          "b": 152,
          "a": 1
        },
        "hsl": {
          "h": 219,
          "s": 6,
          "l": 57
        },
        "count": 277,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#f79ce0",
        "rgb": {
          "r": 247,
          "g": 156,
          "b": 224,
          "a": 1
        },
        "hsl": {
          "h": 315,
          "s": 85,
          "l": 79
        },
        "count": 90,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#08090a",
        "rgb": {
          "r": 8,
          "g": 9,
          "b": 10,
          "a": 1
        },
        "hsl": {
          "h": 210,
          "s": 11,
          "l": 4
        },
        "count": 53,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "he

Prompt pack

Paste-ready prompts pre-loaded with the linear.app system, for v0, Lovable, Cursor and Claude Artifacts.

v01,240 chars
Build a landing page with this exact visual language.
COLORS:
  #f7f8f8
  #62666d
  #d0d6e0
  #e2e4e7
  #8a8f98
  #f79ce0
  #08090a
  #f7bf8b
  #8fa6ff
  #ffdf9f
  #83dcdc
  #00ff05
  #23252a
  #f34e52
FONTS: [object Object], [object Object]
SPACING: 1, 39, 47, 51, 56, 69, 79, 91
RADIUS: 1, 4, 7, 12, 16, 20
SHADOWS: rgba(94, 106, 210, 0) 0px 0px 0px 9.8766px | rgba(0, 0, 0, 0.1) 0px 0px 0px 2px | rgba(0, 0, 0, 0.2) 0px 0px 0px 1px
MATERIAL LANGUAGE: material-you
VOICE: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [obje…
Lovable1,076 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: material-you. Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #f7f8f8, #62666d, #d0d6e0, #e2e4e7, #8a8f98.
Typography: [object Object], [object Object].
Corner radius vocabulary: 1, 4, 7, 12, 16, 20.
Shadow vocabulary: rgba(94, 106, 210, 0) 0px 0px 0px 9.8766px | rgba(0, 0, 0, 0.1) 0px 0px 0px 2px | rgba(0, 0, 0, 0.2) 0px 0px 0px 1px.
Page structure:
- logo-wall
- testimonials — headi…
Cursor1,201 chars
# Design brief
Page type: **landing**.
Material language: **material-you**.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#f7f8f8', '#62666d', '#d0d6e0', '#e2e4e7', '#8a8f98', '#f79ce0', '#08090a', '#f7bf8b', '#8fa6ff', '#ffdf9f', '#83dcdc', '#00ff05', '#23252a', '#f34e52'],
  fonts: ['[object Object]', '[object Object]'],
  radii: ['1', '4', '7', '12', '16', '20'],
  shadows: ['rgba(94, 106, 210, 0) 0px 0px 0px 9.8766px', 'rgba…
Claude Artifacts1,196 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: material-you.
Voice: Tone: neutral · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #f7f8f8, #62666d, #d0d6e0, #e2e4e7, #8a8f98, #f79ce0, #08090a, #f7bf8b, #8fa6ff, #ffdf9f, #83dcdc, #00ff05, #23252a, #f34e52.
Fonts: [object Object], [object Object].
Radius vocabulary: 1, 4, 7, 12, 16, 20.
Sections:
- logo-wall
- testimonials — heading: "The product development
system for teams a…

All artefacts

Every file designlang produced for linear.app — 28 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack6 files

Run designlang on your own URL.

Same 28-artefact depth as the linear.app extraction above. No signup, no API key.

npx designlang yoursite.comTry it live