# Design System: linear.app

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** dark · balanced · rounded · Light theme
**Built with:** Radix UI

**Design rhythm:** 4px grid · pill buttons · soft corners · generous line-height (1.6) · soft elevation

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Primary  | `#B2D5FF` | CTAs, primary actions, links |
| Accent   | `#C1DDFF` | Highlights, success states, decorative |
| Surface  | `#23252A` | Main page background |
| Elevated | `#35363B` | Cards, raised containers |
| Text     | `#F7F8F8` | Body and heading text |
| Muted    | `#8A8F98` | Secondary text, captions |
| Border   | `#23252A` | Dividers, borders |

## 3. Typography

- **H1** — Inter 64px / weight 510, line-height 1, tracking -1.408px
- **H2** — Inter 48px / weight 510, line-height 1, tracking -1.056px
- **H3** — Inter 20px / weight 590, line-height 1.33, tracking -0.24px
- **H4** — Inter 16px / weight 590, line-height 1.5
- **Body** — Inter 15px / weight 400, line-height 1.6, tracking -0.165px
- **Code** — Berkeley 12.25px / weight 400, line-height 1.3, tracking -0.182px
- **Caption** — Inter 12px / weight 510
- **Scale:** 64px / 24px / 16px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16,20,24,32
- **Border radius:** pill buttons, 8px cards
- **Radius vocabulary:** button → pill, card → 8px, input → 6px, chip → 4px

## 5. Effects

### Shadows (low → high)
- **subtle** — `rgb(35, 37, 42) 0px 0px 0px 1px inset`

### Gradients
- `#08090A,#D0D6E0`
- `#B2D5FF,#DFD1FF`

## 6. Component Specs

### Button
- #B2D5FF bg
- #8A8F98 text
- 9999px radius
- 400 weight

### Card
- #E4F222 bg
- 8px radius
- 24px 32px padding

### Input
- default input

### Link
- #F7F8F8

## 7. Implementation Rules

**DO:**
- Use `#B2D5FF` for all primary CTAs and interactive accents
- Reserve `#C1DDFF` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16,20,24,32) — don't introduce arbitrary values
- Match the radius vocabulary: pill buttons, 8px cards
- Pair Inter 700 headings with Inter 16px 400, 1.6 line-height
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: linear.app · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*