---
name: linear-design
description: Design direction for a dark, rounded, comfortable interface with a #F0BF00 accent and Inter Variable type, measured from linear.app. Use when designing, building or restyling any UI so it keeps this look.
---

# Linear design direction

A dark, rounded, comfortable interface with a #F0BF00 accent and Inter Variable type.

This is a design language, not a page to copy. Invent layouts and content freely; keep the character below.

## Principles

- Monochrome. #F0BF00 is a trace accent for small details only; primary buttons are #E5E5E6.
- A dark canvas of #08090A with #101112 surfaces. Hierarchy comes from type and space before colour.
- Dramatic type contrast: display type runs about 4.6× the body size.
- Corners are rounded, never rounder than 16px.
- Depth comes from soft, low shadows, used on raised surfaces only.
- Comfortable rhythm, inside a 1196px frame.

## Colour

- Canvas: `#08090A`, the page.
- Surface: `#101112`, cards and raised areas.
- Text: `#F7F8F8`, primary text.
- Muted: `#8A8F98`, secondary text and captions.
- Accent: `#F0BF00`, primary actions and focus.
- Border: `#E5E5E6`, dividers and outlines, subtle.

## Type

- Display: Inter Variable, 64px on 64px, weight 510, tracking -1.4px.
- Heading: Inter Variable, 20px on 26.6px, weight 590, tracking -0.2px.
- Body: Inter Variable, 14px on 21px, weight 400, tracking -0.2px.

## Shape and space

- Radii: 0px, 8px, 14px, 16px.
- Spacing: 6px, 7px, 8px, 10px, 12px, 32px.
- Content width: 1196px.

## Components

- Button (filled): `#E5E5E6` fill, 16px corners, 32px tall, 0 by 12px padding, 1px `#E5E5E6` border.

## Avoid

- Do not use #F0BF00 for buttons, links or large areas.