# Inspect the design system behind linear.app

[Open the live Fudge conversation](https://design.withfudge.com/share/inspect-linear-app-design-system)

Last updated: 2026-07-28

These captured Linear pages show the same restrained dark system applied to product and pricing content.

## Color system

- `#08090a` keeps the canvas close to black without flattening every dark surface into one tone.
- `#1f2023` separates cards and controls from the canvas.
- `#f7f8f8` carries primary text, while `#8a8f98` lowers the emphasis of supporting copy.
- `#5e6ad2` is used sparingly, so active and branded moments remain easy to spot.

## Typography and hierarchy

The pages avoid decorative type. Their hierarchy comes from a small number of sizes, short lines, generous space around major sections, and quiet supporting text.

## What to borrow

- Start with a near-black canvas and one slightly lighter surface.
- Use thin, low-contrast borders instead of shadows for separation.
- Keep the palette neutral and reserve the cool accent for active states and important actions.
- Build rhythm with repeated compact controls inside more generous section spacing.
- Let screenshots and interface details provide the visual richness rather than adding decoration around them.

## Captured pages

[![The system for product development](https://pin.fontofweb.com/6434?format=jpg)](https://design.withfudge.com/share/pin-6434)

[The system for product development](https://design.withfudge.com/share/pin-6434)

[![Plan and build products](https://pin.fontofweb.com/6435?format=jpg)](https://design.withfudge.com/share/pin-6435)

[Plan and build products](https://design.withfudge.com/share/pin-6435)

## Colors

- `#08090a`
- `#1f2023`
- `#5e6ad2`
- `#8a8f98`
- `#f7f8f8`

## Linear typography

- **Inter** — weight 400 · Body copy, labels, navigation, and controls.
- **Inter** — weight 500 · Headings and emphasized interface text.