---
source: gallery_linear
---

# linear.app — Atmosphere

> Monochrome, engineering-grade dark UI for Linear — near-black canvas, crisp white type, confident AI-era product messaging.

> Extracted by [Coherent](https://getcoherent.design) from `https://linear.app` on 2026-07-24 03:48:39 UTC.
> Mode: `dark` · captured in 4160ms · density: `spacious`

<!-- coherent-extract: v1 -->

## Hero

**Detected via:** `h1` (64px)

> The product development system for teams and agentsThe product developmentsystem for teams and agentsThe product development system for teams and agents

## Color

| Token | Hex | Role | Usage |
|-------|-----|------|-------|
| `#f7f8f8` | ![#f7f8f8](https://placehold.co/16x16/f7f8f8/f7f8f8.png) | text | body text |
| `#8a8f98` | ![#8a8f98](https://placehold.co/16x16/8a8f98/8a8f98.png) | neutral | h2 text |
| `#d0d6e0` | ![#d0d6e0](https://placehold.co/16x16/d0d6e0/d0d6e0.png) | neutral | h3 text |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | button-secondary text |
| `#08090a` | ![#08090a](https://placehold.co/16x16/08090a/08090a.png) | brand | body background |
| `#f7f8f8` | ![#f7f8f8](https://placehold.co/16x16/f7f8f8/f7f8f8.png) | text | a text |
| `#ffffff` | ![#ffffff](https://placehold.co/16x16/ffffff/ffffff.png) | text | button-primary text |

### Backgrounds

- **page** — `#08090a`

## Typography

**Font families**

- Inter Variable
- SF Pro Display
- -apple-system
- system-ui
- Segoe UI
- Roboto

**Scale**

| Role | Size | Weight | Line height | Family |
|------|------|--------|-------------|--------|
| display | `64px` | 510 | `64px` | Inter Variable |
| h1 | `48px` | 510 | `48px` | Inter Variable |
| h2 | `24px` | 400 | `31.92px` | Inter Variable |
| h3 | `20px` | 590 | `26.6px` | Inter Variable |
| h4 | `16px` | 400 | `24px` | Inter Variable |
| body | `15px` | 400 | `24px` | Inter Variable |
| small | `12px` | 510 | `16.8px` | Inter Variable |

## Spacing

Scale: `1px` · `32px` · `128px`

## Radius

Scale: `0px` · `2px` · `4px` · `6px` · `7px` · `8px` · `12px` · `16px` · `22px` · `400px` · `9999px`

## Shadows

- `rgba(0, 0, 0, 0) 0px 8px 2px 0px, rgba(0, 0, 0, 0.01) 0px 5px 2px 0px, rgba(0, 0, 0, 0.04) 0px 3px 2px 0px, rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 0px 1px 0px`
- `rgba(0, 0, 0, 0.1) 0px 0px 0px 2px`
- `rgba(0, 0, 0, 0.2) 0px 0px 0px 1px`
- `rgb(35, 37, 42) 0px 0px 0px 1px inset`
- `rgba(0, 0, 0, 0.4) 0px 2px 4px 0px`
- `rgba(0, 0, 0, 0.03) 0px 1.2px 0px 0px`
- `rgba(0, 0, 0, 0.4) 0px 1px 0px 0px`
- `rgba(0, 0, 0, 0.2) 0px 0px 12px 0px inset`
- `rgba(8, 9, 10, 0.6) 0px 4px 32px 0px`
- `rgba(8, 9, 10, 0.1) 0px 0px 0px 1px, rgba(8, 9, 10, 0.4) 0px 0px 64px 0px`
- `rgb(35, 37, 42) 1px 0px 0px 0px inset`

## Motion

| Duration | Easing | Property |
|----------|--------|----------|
| `160ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | filter |
| `100ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | border-color |
| `100ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | color |
| `160ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | border |
| `160ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | background |
| `160ms` | `cubic-bezier(0.25, 0.46, 0.45, 0.94)` | transform |
| `400ms` | `ease-out` | background |

## Gradients

- **linear** — `linear-gradient(rgba(11, 11, 11, 0.8) 0%, oklab(0.149576 0.00000680983 0.00000298768 / 0.761905) 100%)`
- **radial** — `radial-gradient(52.53% 57.5% at 50% 100%, rgba(8, 9, 10, 0) 0%, rgba(8, 9, 10, 0.5) 100%)`
- **linear** — `linear-gradient(rgb(8, 9, 10) 10%, rgb(208, 214, 224) 100%)`
- **radial** — `radial-gradient(50% 50%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 90%)`
- **linear** — `linear-gradient(-216deg, rgb(138, 143, 152) 0%, rgb(98, 102, 109) 60%, rgb(138, 143, 152) 80%, rgb(138, 143, 152) 100%)`
- **radial** — `radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 50%)`
- **linear** — `linear-gradient(90deg, color(srgb 0 0 0 / 0) 0%, color(srgb 0.6 0.231373 0.231373 / 0.2) 100%)`
- **linear** — `linear-gradient(90deg, color(srgb 0 0 0 / 0) 0%, color(srgb 0.129412 0.701961 1 / 0.2) 100%)`
- **radial** — `radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 50%)`

## Patterns

- **unknown** — `%23a`

## Breakpoints

Strategy: `desktop-first`

| Name | Min/Max width |
|------|---------------|
| md | `600px` |
| lg | `1024px` |
| xl | `1280px` |

## Container widths

- **h2** (unspecified) — `1250px`
- **footer** (unspecified) — `100%`

## Borders

- `1px solid #e5e5e6`
- `1px solid #ffffff`
- `1px solid #24282c`
- `1px solid #ffffff`
- `1px solid #313234`
- `1px solid #23252a`
- `1px solid #323334`
- `1px solid #383b3f`
- `1px solid #ffffff`
- `1px solid #ffffff`

## Z-index scale

- **z-1** — `1`
- **z-3** — `3`
- **footer** — `50`
- **z-100** — `100`

## Glassmorphism

`backdrop-filter: blur(20px)`

## Voice

Tone: `confident` · `technical` · `minimal` · `futuristic`

- *(hero)* "The product development system for teams and agents"
- *(meta-description)* "Purpose-built for planning and building products with AI agents."
- *(body)* "A new species of product tool."
- *(body)* "Designed for the AI era."


---
Captured deterministically from computed CSS. Numerical fields (color, motion, spacing) reflect the live site at extraction time.