Brand guidelines `#e4f222`

May 18, 2026

# linear.app

A reading of the visual language at https://linear.app. Every token, every rule, every component — captured from the live site.

Page intent
  landing
System grade
  C 76/100
Tokens
  30 colours · 16 sizes
Generated
  designlang

Chapter 01

## About

Page intent
  landing 31% confidence
Material language
  material-you
Imagery style
  mixed
Component library
  unknown
Stack
  next
Voice tone
  neutral

Chapter 02

## Logo

linear.app

Source
  inferred
Dimensions
  —
Aspect
  —
Format
  unknown

Chapter 03

## Colour

1 primary · 1 secondary · 1 accent · 10 neutrals · 30 total

Primary #E4F222

RGB
  `228, 242, 34`
HSL
  `64°, 89%, 54%`

Secondary #5E6AD2

RGB
  `94, 106, 210`
HSL
  `234°, 56%, 60%`

Accent #00FF05

RGB
  `0, 255, 5`
HSL
  `121°, 100%, 50%`

### Neutrals

`#F7F8F8`
`#62666D`
`#D0D6E0`
`#E2E4E7`
`#8A8F98`
`#08090A`
`#23252A`
`#383B3F`
`#000000`
`#121414`

### Full palette

`#F7F8F8`
`#62666D`
`#D0D6E0`
`#E2E4E7`
`#8A8F98`
`#F79CE0`
`#08090A`
`#F7BF8B`
`#8FA6FF`
`#FFDF9F`
`#83DCDC`
`#00FF05`
`#23252A`
`#F34E52`
`#27A644`
`#383B3F`
`#000000`
`#FF0000`
`#6366F1`
`#02B8CC`
`#5E6AD2`
`#121414`
`#8B5CF6`
`#55CCFF`
`#6D78D5`
`#E4F222`
`#10B981`
`#0F3338`

WCAG 83% · 5 passing pairs · 1 failing. Full breakdown in §11.

Chapter 04

## Typography

2 families · 16 sizes · 4 weights

Display
  Inter Variable
Body
  Berkeley Mono
Weights
  400, 510, 590, 300

### Specimen

The product development system for teams and agents The product development system for teams and agents
Faster app launch

### Scale

Step | Size | Sample
--- | --- | ---
`t00` | `64px` | The product development syst
`t01` | `40px` | The product development syst
`t02` | `32px` | The product development syst
`t03` | `24px` | The product development syst
`t04` | `20px` | The product development syst
`t05` | `18px` | The product development syst
`t06` | `17px` | The product development syst
`t07` | `16px` | The product development syst
`t08` | `15px` | The product development syst
`t09` | `14px` | The product development syst

Chapter 05

## Spacing

Base 1px · 29 steps captured

### Rhythm

`1px`
`39px`
`47px`
`51px`
`56px`
`69px`
`79px`
`91px`
`95px`
`99px`
Chapter 06

## Shape

9 radii · 6 elevation tiers

### Border radii

`1px`
`4px`
`7px`
`12px`
`16px`
`20px`

### Elevation

`xs`
`sm`
`md`
`lg`
`xl`
`2xl`
Chapter 07

## Iconography

unknown · 24 captured

Library
  unknown
Confidence
  0%
Stroke style
  fillDominant

`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
`icon`
Chapter 08

## Motion

Feel: responsive · 3 durations · 2 easings

### Duration scale

`100ms`
`160ms`
`400ms`

### Easings

- `ease-out`
- `ease-in-out`

Chapter 09

## Components

unknown · 2 component patterns captured

### Mocks

Card

#### Built from these tokens

Radius, primary, surface, text — all sampled from the live site.

Read more →

### Detected patterns

#### button

Slots
  label, icon, badge
Variants
  —
Sizes
  —

#### input

Slots
  leading, trailing
Variants
  —
Sizes
  —

Chapter 10

## Voice

neutral · — · —

### Headlines from the site

- The product development system for teams and agents The product development system for teams and agents
- Faster app launch
- A new species of product tool. Purpose-built for modern teams with AI workflows at its core, Linear sets a new standard for planning and building products.
- Make product operations self-driving

### CTA verbs

- ``×5
- ``×2
- ``×2
- ``×2
- ``×2
- ``×2
- ``×1
- ``×1

Chapter 11

## Accessibility

83% WCAG 2.1 contrast
5 passing · 1 failing

### Failing pairs

Aa 3.82:1

Foreground
  `#6d78d5`
Background
  `#232534`
Rule
  AA-normal

### Suggested replacements

- `#6d78d5` → `` (3.82:1)

Chapter 12

## Tokens

Drop-in code for the most common stacks. All values from the live extraction.

CSS variables variables.css

    :root {
      --color-primary: #e4f222;
      --font-display: "Inter Variable";
      --space-base: 4px;
      --radius-md: 4px;
    }

Tailwind config tailwind.config.js

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          colors: { brand: '#e4f222' },
          fontFamily: { display: ['Inter Variable', 'serif'] },
          spacing: { base: '4px' },
          borderRadius: { md: '4px' },
        },
      },
    };

Run `npx designlang pack linear.app` for the full bundle (DTCG, shadcn, Figma vars, motion, anatomy, Storybook).

Chapter 13

## Usage

1. ### Lead with the primary.

   It belongs on calls-to-action and one accent moment per screen. Not on body copy.

2. ### Two type families, three weights.

   Display for headlines, body for paragraphs. Resist a third unless there is a real reason.

3. ### Snap to the spacing scale.

   Padding, margin, and gap should land on the values in §05. One-off pixels accumulate into noise.

4. ### Treat accessibility as a hard constraint.

   When a colour pair fails WCAG, fix the colour — not the contrast check.