Linear
MIT
Minimal dark-first design system for a modern developer tool, built on cool grays and purple accents with refined typography and subtle interactions
Published by Layout3 importsminimal tierLayout StudioImport this kit into a Studio project and start editing.
CLI installRun it in any project. No account needed.
npx @layoutdesign/context install linear# layout.md — Linear.app Design System
---
## 0. Quick Reference
**Stack:** Vanilla CSS + CSS custom properties · Token source: extracted-css-vars (high confidence, 44 props) · Dark-first UI, near-black background, cool gray palette, Inter Variable typeface.
**How to apply:** Use as `var(--token-name)` in CSS, `style={{ prop: 'var(--token-name)' }}` in JSX, or `bg-[var(--token-name)]` in Tailwind.
```css
/* ── CORE TOKENS ── */
:root {
/* Colours */
--linear-info: hsl(208, 100%, 97%);
--linear-error: hsl(359, 100%, 97%);
--linear-accent: var(--accent-purple);
--linear-bg-app: #fff;
--linear-border: var(--gray4);
--linear-success: hsl(143, 85%, 96%);
--linear-warning: hsl(49, 100%, 97%);
--linear-bg-hover: hsl(0, 0%, 12%);
--linear-bg-surface: rgb(15, 16, 17);
--linear-text-muted: rgb(208, 214, 224);
--linear-bg-elevated: rgb(15, 16, 17);
--linear-accent-hover: rgb(94, 106, 210);
--linear-text-primary: rgb(247, 248, 248);
--linear-border-strong: hsl(0, 0%, 25%);
--linear-text-secondary: rgb(138, 143, 152);
--linear-text-placeholder: rgb(8, 9, 10);
/* Other */
--linear-space-lg: 20px;
--linear-space-md: 16px;
--linear-space-sm: 12px;
--linear-space-xl: 24px;
--linear-space-xs: 8px;
--linear-font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
--linear-font-sans: "Inter Variable", "SF Pro Display", -apple-system, ...;
--linear-radius-lg: 9999px;
--linear-radius-md: 6px;
--linear-radius-sm: 4px;
--linear-shadow-md: 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;
--linear-shadow-sm: 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;
--linear-space-2xl: 96px;
--linear-space-3xl: 128px;
--linear-radius-full: 9999px;
--linear-ease-default: ease;
--linear-font-size-lg: 15px;
--linear-font-size-md: 14px;
--linear-font-size-sm: 13px;
--linear-font-size-xs: 12px;
--linear-duration-base: 0.16s;
--linear-duration-fast: 0.1s;
--linear-duration-slow: 1.2s;
--linear-font-size-2xl: 24px;
--linear-font-size-3xl: 48px;
--linear-line-height-tight: 16.8px;
--linear-font-weight-medium: 510;
--linear-line-height-normal: 19.5px;
--linear-font-weight-regular: 400;
--linear-font-weight-semibold: 590;
}
```
```tsx
// Pill CTA button — primary action pattern
<button style={{
background: 'var(--accent-purple)',
color: 'var(--text-primary)',
borderRadius: '9999px',
padding: '0 12px',
lineHeight: '32px',
fontSize: '13px',
fontWeight: 510,
transition: `background-color var(--duration-base) var(--ease-ui)`,
display: 'inline-flex', alignItems: 'center', gap: '8px',
}}>Get started</button>
```
**NEVER rules:**
- **NEVER** use `border-radius` > `8px` on cards/modals — only pill buttons use `9999px`
- **NEVER** use a white or light background for page surfaces — the design is dark-first (`rgb(15,16,17)`)
- **NEVER** hardcode `#5E6AD2` — reference `var(--accent-purple)`
- **NEVER** use default browser fonts (Arial/Roboto/Helvetica) — always `"Inter Variable"` first
- **NEVER** omit the `transition` on interactive elements — every button/toggle uses `0.16s` easing
- **NEVER** use `font-weight: 600` or `700` — Linear uses `510` (medium) and `590` (semibold)
- **NEVER** set `color` to pure white `#ffffff` for body text — use `rgb(138, 143, 152)` (muted)
**Full design system → see layout.md**
---
## 1. Design Direction & Philosophy
### Character & Mood
Linear's visual language is **precision-engineered darkness** — a near-zero background that recedes completely, letting content and color carry all weight. The aesthetic communicates speed, control, and technical seriousness. It is a tool for professionals who value density and clarity over decoration.
### Aesthetic Intent
- **Monochromatic foundation with a single purple accent.** The entire UI is constructed from cool grays and near-blacks. `rgb(94, 106, 210)` is the only chromatic brand color applied to interactive CTAs.
- **Tight typographic control.** Headings use variable font weight `510` (not a standard web weight), negative letter-spacing at all scales, and 1:1 line-height ratios at display sizes (64px size / 64px line-height).
- **Layered surfaces with opacity, not solid fills.** Cards use `rgba(0,0,0,0)` borders and `rgba(255,255,255,0.05)` backgrounds — surfaces are defined by transparency, not opaque color blocks.
- **Sub-pixel precision.** Margins of `-2px` on headings, `1.225px` code padding, `letter-spacing: -1.408px` at h1 — every value is intentional.
### What This Design Explicitly Rejects
- ❌ **Warm colors** — the entire palette is cool (gray or blue-purple). No amber, orange, or red except in status/error tokens.
- ❌ **Rounded cards** — `border-radius` on content surfaces is exactly `8px`, never more.
- ❌ **Heavy shadows** — elevation is expressed through border opacity (`rgba(255,255,255,0.05)`), not drop shadows.
- ❌ **Standard font weights** — no `400` headings, no `700` anything. Uses OpenType variable axis values `510` and `590`.
- ❌ **Light/white page backgrounds** for the main product UI.
- ❌ **Verbose UI copy** — components are compact; `fontSize: 13px` is the dominant interactive element size.
---
## 2. Colour System
### Tier 1 — Primitive Values
```css
/* ── GRAY SCALE (Radix-style, extracted: high confidence) ── */
--gray1: hsl(0, 0%, 99%); /* lightest — near white */
--gray2: hsl(0, 0%, 97.3%); /* app background (light mode) */
--gray3: hsl(0, 0%, 95.1%); /* subtle hover (light mode) */
--gray4: hsl(0, 0%, 93%); /* normal-border reference */
--gray5: hsl(0, 0%, 90.9%); /* disabled backgrounds */
--gray6: hsl(0, 0%, 88.7%); /* dividers */
--gray7: hsl(0, 0%, 85.8%); /* borders */
--gray8: hsl(0, 0%, 78%); /* placeholder text */
--gray9: hsl(0, 0%, 56.1%); /* muted icons */
--gray10: hsl(0, 0%, 52.3%); /* secondary icons */
--gray11: hsl(0, 0%, 43.5%); /* secondary text (light mode) */
--gray12: hsl(0, 0%, 9%); /* high-contrast text (light mode) */
```
### Tier 2 — Semantic Aliases
```css
/* ── DARK UI SURFACES (synthesised from computed styles) ─── */
/* reconstructed: high confidence, inferred from card/body/page computed values */
--surface-page: rgb(0, 0, 0); /* root page background */
--surface-elevated: rgb(15, 16, 17); /* card, panel surfaces */
--surface-code: rgba(255, 255, 255, 0.05); /* inline code background */
--surface-overlay: rgba(0, 0, 0, 0.8); /* modal scrim */
/* ── TEXT HIERARCHY (synthesised from computed element colors) ── */
/* extracted: high confidence */
--text-primary: rgb(247, 248, 248); /* headings, labels, inputs — near white */
--text-secondary: rgb(138, 143, 152); /* body copy, h2 labels — muted cool gray */
--text-tertiary: rgb(208, 214, 224); /* h3, code text — mid-tone cool gray */
--text-inverse: rgb(8, 9, 10); /* text on light pill buttons */
/* ── BRAND ACCENT (extracted: high confidence, from link/CTA bg) ── */
--accent-purple: rgb(94, 106, 210); /* primary CTA, active states */
/* ── BORDERS (synthesised from computed border values) ── */
--border-subtle: rgba(255, 255, 255, 0.05); /* card default border */
--border-code: rgba(255, 255, 255, 0.08); /* code/mono element border */
--border-standard: rgba(255, 255, 255, 0.25); /* hover-state border */
/* ── STATUS TOKENS (extracted: high confidence) ─────────── */
--normal-bg: #fff; /* default/normal toast bg */
--normal-border: var(--gray4); /* default/normal toast border */
--normal-text: var(--gray12); /* default/normal toast text */
--normal-bg-hover: hsl(0, 0%, 12%); /* normal toast hover bg */
--normal-border-hover: hsl(0, 0%, 25%); /* normal toast hover border */
--success-bg: hsl(143, 85%, 96%); /* success toast background */
--success-border: hsl(145, 92%, 87%); /* success toast border */
--success-text: hsl(140, 100%, 27%); /* success toast text */
--info-bg: hsl(208, 100%, 97%); /* info toast background */
--info-border: hsl(221, 91%, 93%); /* info toast border */
--info-text: hsl(210, 92%, 45%); /* info toast text */
--warning-bg: hsl(49, 100%, 97%); /* warning toast background */
--warning-border: hsl(49, 91%, 84%); /* warning toast border */
--warning-text: hsl(31, 92%, 45%); /* warning toast text */
--error-bg: hsl(359, 100%, 97%); /* error toast background */
--error-border: hsl(359, 100%, 94%); /* error toast border */
--error-text: hsl(360, 100%, 45%); /* error toast text */
```
### Tier 3 — Component Tokens
```css
/* ── BUTTON ──────────────────────────────────────────────── */
--btn-primary-bg: var(--accent-purple); /* purple CTA */
--btn-primary-text: var(--text-primary);
--btn-secondary-bg: rgb(229, 229, 230); /* light pill button (role_button) */
--btn-secondary-text: var(--text-inverse);
--btn-secondary-border: rgb(229, 229, 230);
/* ── CARD ─────────────────────────────────────────────────── */
--card-bg: var(--surface-elevated); /* rgb(15,16,17) */
--card-border: var(--border-subtle); /* rgba(255,255,255,0.05) */
--card-radius: var(--border-radius); /* 8px */
--card-padding: 0px 24px 28px;
/* ── CODE ─────────────────────────────────────────────────── */
--code-bg: var(--surface-code);
--code-border: var(--border-code);
--code-radius: 4px;
--code-text: var(--text-tertiary);
```
### Color Palette Table
| Token | Value | Usage |
|---|---|---|
| `--gray1` | `hsl(0,0%,99%)` | Lightest surface (light mode) |
| `--gray12` | `hsl(0,0%,9%)` | High-contrast text (light mode) |
| `--surface-page` | `rgb(0,0,0)` | Page root bg |
| `--surface-elevated` | `rgb(15,16,17)` | Cards, panels |
| `--text-primary` | `rgb(247,248,248)` | Headings, labels |
| `--text-secondary` | `rgb(138,143,152)` | Body copy |
| `--accent-purple` | `rgb(94,106,210)` | Primary CTA |
| `--border-subtle` | `rgba(255,255,255,0.05)` | Card borders |
---
## 3. Typography System
### Font Stack
```css
/* ── FONT FAMILIES ───────────────────────────────────────── */
/* extracted: high confidence */
--font-sans: "Inter Variable", "SF Pro Display", -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
```
### Composite Type Scale
```css
/* ── COMPOSITE TYPOGRAPHY TOKENS ─────────────────────────── */
/* Each group defines ALL five properties together — never split apart */
/* extracted: high confidence from computed h1 */
--type-display: {
font-family: var(--font-sans);
font-size: 64px;
font-weight: 510;
line-height: 64px; /* 1:1 tight — intentional */
letter-spacing: -1.408px;
color: var(--text-primary);
}
/* extracted: high confidence from computed h2 */
--type-heading: {
font-family: var(--font-sans);
font-size: 48px;
font-weight: 510;
line-height: 48px; /* 1:1 tight — intentional */
letter-spacing: -1.056px;
color: var(--text-secondary); /* h2 renders muted on linear.app */
}
/* extracted: high confidence from computed h3 */
--type-subheading: {
font-family: var(--font-sans);
font-size: 20px;
font-weight: 590;
line-height: 26.6px;
letter-spacing: -0.24px;
color: var(--text-tertiary);
}
/* extracted: high confidence from computed body */
--type-body: {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.165px;
color: var(--text-secondary);
}
/* extracted: high confidence from computed link/nav */
--type-ui-md: {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 510;
line-height: 21px;
letter-spacing: normal;
color: var(--text-primary);
}
/* extracted: high confidence from computed role_button / toggle */
--type-ui-sm: {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 510;
line-height: 32px;
letter-spacing: normal;
color: var(--text-inverse); /* on light pill buttons */
}
/* extracted: high confidence from computed code */
--type-mono: {
font-family: var(--font-mono);
font-size: 12.25px;
font-weight: 400;
line-height: 15.925px;
letter-spacing: -0.182px;
color: var(--text-tertiary);
}
```
### Type Scale Reference Table
| Token | Size | Weight | Line-height | Letter-spacing | Color |
|---|---|---|---|---|---|
| `--type-display` | 64px | **510** | 64px | -1.408px | `--text-primary` |
| `--type-heading` | 48px | **510** | 48px | -1.056px | `--text-secondary` |
| `--type-subheading` | 20px | 590 | 26.6px | -0.24px | `--text-tertiary` |
| `--type-body` | 15px | 400 | 24px | -0.165px | `--text-secondary` |
| `--type-ui-md` | 14px | 510 | 21px | normal | `--text-primary` |
| `--type-ui-sm` | 13px | 510 | 32px | normal | varies |
| `--type-mono` | 12.25px | 400 | 15.925px | -0.182px | `--text-tertiary` |
### Weight Scale
| Name | Value | Usage |
|---|---|---|
| Regular | **400** | Body copy, inputs, most UI text |
| Medium | **510** | Headings (h1, h2), links, UI labels, buttons |
| Semibold | **590** | h3, feature card titles, strong UI labels |
> **Critical:** Linear uses OpenType variable font axis values `510` and `590`. These are NOT the same as `font-weight: 500` or `font-weight: 600`. The `font-weight` CSS property accepts these when using a variable font.
### Pairing Rules
- Display (h1) pairs with body copy at `--text-secondary` — the contrast is intentional
- `--type-heading` (h2) intentionally uses `--text-secondary` color, NOT `--text-primary` — the muted h2 is a design choice
- Code/mono is always `"Berkeley Mono"` first — never substitute Inter for code contexts
---
## 4. Spacing & Layout
```css
/* ── BASE UNIT ───────────────────────────────────────────── */
/* reconstructed: moderate confidence, inferred from padding/gap census */
--space-1: 4px; /* tight internal padding (toggle: 0 4px) */
--space-2: 6px; /* code padding, dropdown padding */
--space-3: 8px; /* toggle gap, small component padding */
--space-4: 12px; /* button horizontal padding */
--space-5: 16px; /* link horizontal padding, icon size */
--space-6: 20px; /* [TBD - extract manually] */
--space-7: 24px; /* card horizontal padding */
--space-8: 28px; /* card bottom padding */
--space-9: 32px; /* h2 horizontal padding, input padding */
--space-10: 40px; /* [TBD - extract manually] */
/* ── BORDER RADIUS SCALE ─────────────────────────────────── */
/* extracted: high confidence from radius census */
--radius-sm: 4px; /* toggle, code blocks, avatar-adjacent elements (12 elements) */
--radius-md: 6px; /* avatar, sidebar nav items, most UI buttons (20 elements) */
--radius-default: var(--border-radius); /* 8px — cards, modals, default component radius */
--radius-full: 9999px; /* pill buttons — header CTAs, primary actions (13 elements) */
/* ── BREAKPOINTS ─────────────────────────────────────────── */
/* extracted: high confidence from media query census */
--bp-xs: 600px; /* small mobile edge */
--bp-sm: 640px; /* standard mobile breakpoint */
--bp-md: 768px; /* tablet */
--bp-lg: 1024px; /* desktop */
--bp-xl: 1280px; /* wide desktop */
/* ── CONTAINER ───────────────────────────────────────────── */
/* reconstructed: moderate confidence */
--container-max: 1280px; /* max content width */
--container-padding: 32px; /* horizontal page gutter (from h2 padding) */
/* ── TOAST / SONNER LAYOUT TOKENS ───────────────────────── */
/* extracted: high confidence — Sonner toast library tokens */
--toast-icon-margin-start: -3px;
--toast-icon-margin-end: 4px;
--toast-svg-margin-start: -1px;
--toast-svg-margin-end: 0px;
--toast-button-margin-start: auto;
--toast-button-margin-end: 0;
--toast-close-button-start: 0;
--toast-close-button-end: unset;
--toast-close-button-transform: translate(-35%, -35%);
--size: 16px; /* toast icon size */
```
### Layout Decision Rules
- **Navigation:** `display: flex; flex-direction: row; align-items: center` — always horizontal flex
- **Cards:** `display: flex; flex-direction: column; justify-content: flex-end` — content anchors to bottom
- **Primary buttons:** `display: grid; align-items: center` — grid for precise centering
- **Links/CTAs:** `display: flex; flex-direction: row; justify-content: center; align-items: center`
- **Use flex** for nav, toolbars, inline elements; **use grid** for card grids and page-level layouts
---
## 5. Page Structure & Layout Patterns
> **Source:** Layout digest + component inventory. No screenshots available. Rows marked **(inferred)** are derived from the component census and structural signals, not visual confirmation.
### 5.1 Section Map
| # | Section | Layout Type | Approx. Height | Key Elements |
|---|---|---|---|---|
| 1 | **Global Navigation / Header** | flex row, full-width | ~60px | Logo, nav links (pill radius), CTA button (`--accent-purple`, `border-radius: 9999px`), dropdown toggles |
| 2 | **Hero** (inferred) | centered column | ~600px | h1 display text (64px/510), body subtext (15px, `--text-secondary`), 1–2 pill CTAs, product screenshot or animation |
| 3 | **Feature / Card Grid** | flex/grid, contained | ~480px | Card components (`rgb(15,16,17)`, `border-radius: 8px`), h3 titles (20px/590), body descriptions |
| 4 | **Product Feature Callouts** (inferred) | alternating 2-col | ~400px per row | h2 (48px, `--text-secondary`), body copy, inline code snippets (`Berkeley Mono`) |
| 5 | **Testimonials / Social Proof** (inferred) | flex row, horizontal scroll or grid | ~300px | Avatar (radius `6px`), badge/tag elements, quote text |
| 6 | **CTA Banner** (inferred) | centered column | ~240px | h2, single primary pill button (`--accent-purple`) |
| 7 | **Footer** (inferred) | flex row, multi-column | ~200px | Nav links, small text (`13px`), badge elements |
### 5.2 Layout Patterns
**Header / Navigation:**
```
display: flex | flex-direction: row | align-items: center | padding: 0
justify-content: space-between (inferred from nav pattern)
Gap: uses normal gap between nav items; pill buttons at end of row
```
- Navigation container: `display: flex; flex-direction: row; align-items: center`
- Nav items rendered as pill-shaped anchor elements: `border-radius: 9999px`
- Primary CTA in header: `background: var(--accent-purple)`, `border-radius: 9999px`, `padding: 0 12px`, `line-height: 32px`
**Feature Card Grid:**
```
grid or flex wrap | gap: ~24px (inferred from card padding rhythm)
card: display: flex | flex-direction: column | justify-content: flex-end
card padding: 0px 24px 28px
```
- Cards are `display: flex; flex-direction: column; justify-content: flex-end` — content floats to bottom
- Card border: `1px solid rgba(255,255,255,0.05)` (near-invisible, surface-defining)
- Card background: `rgb(15,16,17)` — distinguishable from `rgb(0,0,0)` page bg only at close range
**2-Column Feature Row (inferred):**
- Approximate ratio: 50/50 or 60/40 content-to-visual
- Gap: ~32px (from container padding token)
- Breakpoint collapse: stacks at `--bp-md` (768px)
### 5.3 Visual Hierarchy
1. **h1 at 64px/510 weight** — sole dominant element per section, `--text-primary` (near-white)
2. **h2 at 48px/510 weight** — intentionally muted at `--text-secondary` (cool gray) — creates recessive section framing
3. **Accent color is used sparingly** — `var(--accent-purple)` appears on 1 CTA per visual region; never decorative
4. **CTA placement:** Primary pill button (`border-radius: 9999px`, `background: var(--accent-purple)`) in header and hero zone; secondary light pill buttons (`background: rgb(229,229,230)`, `color: rgb(8,9,10)`) for lesser actions
5. **Whitespace rhythm:** Large vertical padding between sections (inferred ~80–120px); card grid uses 24–28px internal padding
### 5.4 Content Patterns
**Text + CTA pattern (hero):**
- `h1` (display, primary color) → `p` (body, secondary color) → pill CTA buttons (flex row, 8px gap)
**Feature card pattern:**
- Card wraps `flex-column justify-end` → visual/illustration fills top → `h3` (20px/590) → `p` (15px/400, secondary)
**Inline code pattern:**
- `<code>` in body copy: `Berkeley Mono`, 12.25px, `rgba(255,255,255,0.05)` bg, `rgba(255,255,255,0.08)` border, `border-radius: 4px`
**Nav item pattern:**
- `<button>` or `<a>` with `border-radius: 9999px` in header; `border-radius: 6px` in sidebar; font `13px/510`
---
## 6. Component Patterns
### 6.1 Primary CTA Button (Pill)
**Anatomy:** `[optional icon] [label text]`
**Token mappings:**
| State | Background | Text | Border | Shadow | Transition |
|---|---|---|---|---|---|
| Default | `var(--accent-purple)` | `var(--text-primary)` | none | none | all 0.16s ease-ui |
| Hover | lighten `var(--accent-purple)` ~10% | same | none | none | same |
| Focus | same | same | `box-shadow: 0 0 0 2px rgba(0,0,0,0.2)` | — | same |
| Active | darken `var(--accent-purple)` ~10% | same | none | none | same |
| Disabled | `var(--accent-purple)` at 40% opacity | 40% opacity | none | none | none |
```tsx
// Production-ready pill CTA button — linear.app pattern
type ButtonVariant = 'primary' | 'secondary';
interface LinearButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: ButtonVariant;
loading?: boolean;
children: React.ReactNode;
}
export function LinearButton({
variant = 'primary',
loading = false,
disabled,
children,
...props
}: LinearButtonProps) {
const isPrimary = variant === 'primary';
return (
<button
disabled={disabled || loading}
style={{
// Layout
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
// Sizing
padding: '0 12px',
lineHeight: '32px',
minWidth: 0,
// Typography — --type-ui-sm composite
fontFamily: 'var(--font-sans)',
fontSize: '13px',
fontWeight: 510,
letterSpacing: 'normal',
textDecoration: 'none',
whiteSpace: 'nowrap',
// Colors
color: isPrimary ? 'var(--text-primary)' : 'var(--text-inverse)',
backgroundColor: isPrimary ? 'var(--accent-purple)' : 'rgb(229, 229, 230)',
border: isPrimary ? 'none' : '1px solid rgb(229, 229, 230)',
// Shape
borderRadius: '9999px',
// Elevation (secondary only)
boxShadow: isPrimary
? 'none'
: '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',
// Motion
transition: 'border 0.16s cubic-bezier(0.25,0.46,0.45,0.94), background-color 0.16s cubic-bezier(0.25,0.46,0.45,0.94), color 0.16s cubic-bezier(0.25,0.46,0.45,0.94), box-shadow 0.16s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.16s cubic-bezier(0.25,0.46,0.45,0.94)',
// Disabled
opacity: (disabled || loading) ? 0.4 : 1,
cursor: (disabled || loading) ? 'not-allowed' : 'pointer',
// Reset
outline: 'none',
}}
onMouseEnter={e => {
if (!disabled && !loading) {
(e.currentTarget as HTMLButtonElement).style.filter = 'brightness(1.12)';
}
}}
onMouseLeave={e => {
(e.currentTarget as HTMLButtonElement).style.filter = 'none';
}}
onFocus={e => {
e.currentTarget.style.boxShadow = 'rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px';
}}
onBlur={e => {
e.currentTarget.style.boxShadow = isPrimary ? 'none'
: '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';
}}
{...props}
>
{loading ? <span aria-hidden style={{ display: 'inline-block', width: '12px', height: '12px', borderRadius: '50%', border: '2px solid currentColor', borderTopColor: 'transparent', animation: 'spin 0.6s linear infinite' }} /> : null}
{children}
</button>
);
}
```
---
### 6.2 Card
**Anatomy:** `[visual/illustration area] [h3 title] [p description]`
| State | Background | Border | Radius | Padding |
|---|---|---|---|---|
| Default | `rgb(15,16,17)` | `1px solid rgba(255,255,255,0.05)` | `8px` | `0 24px 28px` |
| Hover (inferred) | `rgb(20,21,22)` slight lift | `rgba(255,255,255,0.08)` | `8px` | same |
| Focus | same + focus ring | same | same | same |
| Active | same | same | same | same |
| Loading | skeleton shimmer overlay | same | same | same |
```tsx
export function LinearCard({ title, description, children }: {
title: string;
description?: string;
children?: React.ReactNode;
}) {
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
backgroundColor: 'var(--surface-elevated)', /* rgb(15,16,17) */
border: '1px solid var(--border-subtle)', /* rgba(255,255,255,0.05) */
borderRadius: 'var(--border-radius)', /* 8px */
padding: 'var(--card-padding)', /* 0 24px 28px */
transition: 'border-color 0.16s cubic-bezier(0.25,0.46,0.45,0.94)',
overflow: 'hidden',
}}
onMouseEnter={e => {
(e.currentTarget as HTMLDivElement).style.borderColor = 'var(--border-code)'; /* rgba(255,255,255,0.08) */
}}
onMouseLeave={e => {
(e.currentTarget as HTMLDivElement).style.borderColor = 'var(--border-subtle)';
}}
>
{children}
<h3 style={{
fontFamily: 'var(--font-sans)',
fontSize: '20px',
fontWeight: 590,
lineHeight: '26.6px',
letterSpacing: '-0.24px',
color: 'var(--text-tertiary)',
margin: '0 0 8px 0',
}}>
{title}
</h3>
{description && (
<p style={{
fontFamily: 'var(--font-sans)',
fontSize: '15px',
fontWeight: 400,
lineHeight: '24px',
letterSpacing: '-0.165px',
color: 'var(--text-secondary)',
margin: 0,
}}>
{description}
</p>
)}
</div>
);
}
```
---
### 6.3 Toggle / Nav Item
**Anatomy:** `[icon?] [label]` — horizontal flex, `gap: 6px`
| State | Background | Transition |
|---|---|---|
| Default | `transparent` | `background 0.16s ease-ui` |
| Hover | subtle overlay (inferred `rgba(255,255,255,0.06)`) | same |
| Active/Selected | `rgba(255,255,255,0.08)` (inferred) | same |
| Focus-visible | `box-shadow: 0 0 0 2px rgba(0,0,0,0.2)` | same |
| Disabled | `opacity: 0.4`, `cursor: not-allowed` | none |
```css
.linear-toggle {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
padding: 0 4px;
border-radius: 4px; /* --radius-sm */
font-family: var(--font-sans);
font-size: 13.3333px;
font-weight: 400;
color: rgb(255, 255, 255);
background: transparent;
border: none;
cursor: pointer;
transition: background 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.linear-toggle:hover {
background: rgba(255, 255, 255, 0.06);
}
.linear-toggle[aria-pressed="true"],
.linear-toggle[data-active="true"] {
background: rgba(255, 255, 255, 0.08);
}
.linear-toggle:focus-visible {
outline: none;
box-shadow: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
.linear-toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
}
```
---
### 6.4 Inline Code
**Anatomy:** `<code>` inline element
| State | Background | Border |
|---|---|---|
| Default | `rgba(255,255,255,0.05)` | `1px solid rgba(255,255,255,0.08)` |
| (No interactive states — non-interactive element) | — | — |
```tsx
export function InlineCode({ children }: { children: React.ReactNode }) {
return (
<code style={{
fontFamily: 'var(--font-mono)', /* "Berkeley Mono", ui-monospace... */
fontSize: '12.25px',
fontWeight: 400,
lineHeight: '15.925px',
letterSpacing: '-0.182px',
color: 'var(--text-tertiary)', /* rgb(208,214,224) */
backgroundColor: 'var(--surface-code)', /* rgba(255,255,255,0.05) */
border: '1px solid var(--border-code)', /* rgba(255,255,255,0.08) */
borderRadius: '4px',
padding: '1.225px 6px',
display: 'inline-flex',
alignItems: 'center',
}}>
{children}
</code>
);
}
```
---
### 6.5 Toast / Notification (Sonner)
**Anatomy:** `[icon] [message] [action button?] [close button]`
| Variant | BG | Border | Text |
|---|---|---|---|
| Normal | `var(--normal-bg)` = `#fff` | `var(--normal-border)` = `var(--gray4)` | `var(--normal-text)` = `var(--gray12)` |
| Success | `var(--success-bg)` | `var(--success-border)` | `var(--success-text)` |
| Info | `var(--info-bg)` | `var(--info-border)` | `var(--info-text)` |
| Warning | `var(--warning-bg)` | `var(--warning-border)` | `var(--warning-text)` |
| Error | `var(--error-bg)` | `var(--error-border)` | `var(--error-text)` |
| State | Box-shadow |
|---|---|
| Focus-visible (toast) | `rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px` |
| Focus-visible (button within) | `rgba(0,0,0,0.4) 0px 0px 0px 2px` |
| Focus-visible (close button) | `rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px` |
```tsx
export function Toast({ variant = 'normal', message, action }: {
variant?: 'normal' | 'success' | 'info' | 'warning' | 'error';
message: string;
action?: { label: string; onClick: () => void };
}) {
return (
<div
role="status"
aria-live="polite"
tabIndex={0}
style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
backgroundColor: `var(--${variant}-bg)`,
border: `1px solid var(--${variant}-border)`,
borderRadius: 'var(--border-radius)',
color: `var(--${variant}-text)`,
padding: '12px 16px',
fontSize: '14px',
fontFamily: 'var(--font-sans)',
}}
>
<span style={{ marginInlineStart: 'var(--toast-icon-margin-start)', marginInlineEnd: 'var(--toast-icon-margin-end)' }}>
{/* icon slot */}
</span>
<span style={{ flex: 1 }}>{message}</span>
{action && (
<button
onClick={action.onClick}
style={{ marginInlineStart: 'var(--toast-button-margin-start)', marginInlineEnd: 'var(--toast-button-margin-end)' }}
>
{action.label}
</button>
)}
</div>
);
}
```
---
### 6.6 Avatar
**Anatomy:** `<img>` or placeholder block
| Property | Value |
|---|---|
| `border-radius` | `6px` (--radius-md) |
| `display` | `block` |
| Background (placeholder) | `rgba(0,0,0,0)` — transparent, image required |
---
### 6.7 Input
**Anatomy:** `[label] [input field]`
| State | Color | Notes |
|---|---|---|
| Default | `var(--text-primary)` = `rgb(247,248,248)` | `fontSize: 16px`, `padding: 1px 32px` |
| Focus | `var(--text-primary)` | `box-shadow` focus ring (from toast pattern) |
| Disabled | 40% opacity (inferred) | `cursor: not-allowed` |
| Error | `var(--error-text)` border | Use `--error-border`, `--error-bg` |
```tsx
export function LinearInput({ label, error, disabled, ...props }: {
label?: string;
error?: string;
disabled?: boolean;
} & React.InputHTMLAttributes<HTMLInputElement>) {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
{label && (
<label style={{
fontFamily: 'var(--font-sans)',
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
color: 'var(--text-primary)',
display: 'block',
}}>
{label}
</label>
)}
<input
disabled={disabled}
style={{
fontFamily: 'var(--font-sans)',
fontSize: '16px',
fontWeight: 400,
color: error ? 'var(--error-text)' : 'var(--text-primary)',
backgroundColor: error ? 'var(--error-bg)' : 'transparent',
border: `1px solid ${error ? 'var(--error-border)' : 'var(--border-standard)'}`,
borderRadius: 'var(--border-radius)',
padding: '1px 32px',
outline: 'none',
opacity: disabled ? 0.4 : 1,
cursor: disabled ? 'not-allowed' : 'text',
transition: 'border-color 0.16s cubic-bezier(0.25,0.46,0.45,0.94)',
width: '100%',
}}
{...props}
/>
{error && (
<span style={{ fontSize: '13px', color: 'var(--error-text)', fontFamily: 'var(--font-sans)' }}>
{error}
</span>
)}
</div>
);
}
```
---
## 7. Elevation & Depth
```css
/* ── BORDER TOKENS ───────────────────────────────────────── */
/* extracted: high confidence */
--border-subtle: 1px solid rgba(255, 255, 255, 0.05); /* cards, base surfaces */
--border-code: 1px solid rgba(255, 255, 255, 0.08); /* code, elevated surfaces */
--border-standard: 1px solid rgba(255, 255, 255, 0.25); /* hover state, active inputs */
--border-gray: 1px solid var(--gray4); /* light-mode / toast borders */
/* ── SHADOW TOKENS ───────────────────────────────────────── */
/* extracted: high confidence from role_button computed boxShadow */
--shadow-button-secondary:
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; /* subtle multi-layer shadow on light pill buttons */
/* extracted: from focus-visible CSS rules */
--shadow-focus-ring:
rgba(0, 0, 0, 0.1) 0px 4px 12px,
rgba(0, 0, 0, 0.2) 0px 0px 0px 2px; /* keyboard focus ring for interactive elements */
--shadow-focus-button:
rgba(0, 0, 0, 0.4) 0px 0px 0px 2px; /* stronger focus ring on buttons within toasts */
/* ── Z-INDEX SCALE ───────────────────────────────────────── */
/* reconstructed: moderate confidence */
--z-base: 0; /* default document flow */
--z-raised: 10; /* cards on hover */
--z-dropdown: 100; /* dropdowns, tooltips */
--z-overlay: 200; /* modals, dialogs */
--z-toast: 300; /* toast notifications (always topmost) */
```
### Layering Principles
- **Elevation is expressed through border opacity, not shadows.** The difference between `rgba(255,255,255,0.05)` (resting) and `rgba(255,255,255,0.08)` (elevated) is subtle by design.
- **Heavy box-shadows are absent** from dark-mode surfaces — they appear only on the light pill button (secondary CTA) and focus rings.
- **Focus rings use outward `box-shadow`**, not `outline` — this maintains the dark aesthetic while meeting accessibility requirements.
- **Toasts float above everything** — always `z-index: 300` or higher.
---
## 8. Motion
```css
/* ── DURATION TOKENS ─────────────────────────────────────── */
/* extracted: high confidence from computed transition census */
--duration-fast: 0.1s; /* micro-interactions: immediate feedback (16 button elements) */
--duration-base: 0.16s; /* standard UI transitions: hover, focus, active (dominant) */
--duration-slow: 1.2s; /* complex animations: grid dot sequences, illustrations */
/* ── EASING TOKENS ───────────────────────────────────────── */
/* extracted: high confidence from transition property values */
--ease-default: ease; /* general purpose (144 elements) */
--ease-ui: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* UI interactions — slightly ease-out */
/* ── STANDARD TRANSITION COMPOSITIONS ───────────────────── */
/* These exact strings appear in computed styles */
--transition-toggle:
background 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-dropdown:
filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-button-full:
border 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
color 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* ── TOAST/SONNER ANIMATION KEYFRAMES ───────────────────── */
/* extracted: high confidence — Sonner library keyframes */
/* sonner-fade-in: opacity 0→1, scale 0.8→1 */
/* sonner-fade-out: opacity 1→0, scale 1→0.8 */
/* sonner-spin: opacity cycling for loading spinner */
/* swipe-out-left/right/up/down: combined transform+opacity exit */
/* ── GRID DOT ANIMATIONS ─────────────────────────────────── */
/* Decorative 5×5 grid animation system (3 modes: agent, upDown, pong) */
/* Each dot in a 5×5 grid has its own named keyframe controlling opacity */
/* between 0.3 (dim) and 1 (lit) over the animation cycle */
/* Duration for grid dots: ~1.2s (--duration-slow), looping */
/* Use sparingly — this is a hero illustration element only */
```
### Motion Rules
- **Every interactive element transitions** — `0.16s` is the floor for any hover/focus/active state change
- **Use `--ease-ui`** (cubic-bezier) for UI interactions, not bare `ease` — they look nearly identical but `--ease-ui` is the exact extracted value
- **Never animate layout properties** (width, height, top, left) — only `opacity`, `transform`, `background-color`, `border-color`, `box-shadow`, `filter`
- **`--duration-slow` (1.2s)** is reserved for decorative illustration animations only — never use for UI feedback
- **Respect `prefers-reduced-motion`** — all grid-dot and decorative animations must be suppressed
```css
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
```
---
## 9. Anti-Patterns & Constraints
1. **NEVER hardcode `#5E6AD2` or `rgb(94,106,210)` inline → Why it fails:** The accent purple is the single most-referenced color in the codebase; hardcoding it means a brand update requires a grep-and-replace across every component. AI agents trained on generic patterns will write `color: #5E6AD2` without hesitation. **What to do instead:** Always write `var(--accent-purple)`. Define the token once in `:root`.
2. **NEVER use a white or light background on dark-mode surfaces → Why it fails:** AI agents default to `background: white` or `background: #f5f5f5` when no explicit background is specified because most training data is light-mode. On Linear's near-black UI this creates a jarring patch of white. **What to do instead:** Explicitly set `background: var(--surface-page)` or `var(--surface-elevated)` on every container.
3. **NEVER use `font-weight: 600` or `font-weight: 700` for headings → Why it fails:** AI agents reach for 600/700 as "heading weight" because those are standard bold values. Linear uses a variable font with custom axis values `510` (medium) and `590` (semibold). Using 600 renders noticeably different on Inter Variable and breaks the precise typographic calibration. **What to do instead:** Use `font-weight: 510` for headings/UI labels and `font-weight: 590` for h3/strong labels.
4. **NEVER set `border-radius: 8px` on pill CTA buttons → Why it fails:** AI agents apply `--border-radius: 8px` (the design system default) to all buttons because it's the only explicit radius token extracted. But the header/primary CTAs use `border-radius: 9999px`. Applying 8px creates a noticeably boxy button that looks wrong against the brand identity. **What to do instead:** Primary and header buttons always use `border-radius: 9999px`. Only cards, modals, and secondary UI elements use `8px`.
5. **NEVER use `rgb(255, 255, 255)` or `#fff` for body text on dark backgrounds → Why it fails:** Pure white text on near-black backgrounds creates harsh contrast that departs from Linear's intentional palette. AI agents default to pure white when generating dark-mode text. **What to do instead:** Use `var(--text-primary)` = `rgb(247, 248, 248)` for primary text and `var(--text-secondary)` = `rgb(138, 143, 152)` for body copy.
6. **NEVER omit `transition` from interactive elements → Why it fails:** AI agents often generate static components with no transition property, treating animation as an enhancement. On Linear, the `0.16s cubic-bezier(0.25,0.46,0.45,0.94)` transition is a core expectation — its absence makes components feel broken and unpolished. **What to do instead:** Every `button`, `a`, and interactive `div` must include at minimum `transition: background-color 0.16s cubic-bezier(0.25,0.46,0.45,0.94)`.
7. **NEVER construct dynamic Tailwind class names → Why it fails:** `bg-[${variant}-bg]` is never resolved by Tailwind's JIT engine because it requires the full class string at build time. Dynamically constructed strings are purged as unused. **What to do instead:** Use CSS custom properties with inline styles for variant-driven color tokens (`style={{ backgroundColor: 'var(--${variant}-bg)' }}`), or use a static class map (`const classMap = { success: 'bg-success-surface', ... }`).
8. **NEVER use `font-family: Inter` or `font-family: "Inter"` → Why it fails:** Linear uses the *variable* font face `"Inter Variable"` — the name matters for the font file loaded. Writing just `Inter` will fallback to a system Inter (if installed) or fail silently, missing the variable font features that enable weights like `510`. **What to do instead:** Always use `var(--font-sans)` which begins with `"Inter Variable"`.
9. **NEVER use `outline` for focus rings → Why it fails:** Linear's focus state uses `box-shadow` (extracted from `[data-sonner-toast]:focus-visible`), not `outline`. Using `outline` creates a jagged ring that ignores `border-radius`. AI agents emit `outline: 2px solid blue` as a default accessible focus state. **What to do instead:** Apply `outline: none` and use `box-shadow: var(--shadow-focus-ring)` on `:focus-visible`.
10. **NEVER place toast/notification background colors on dark page surfaces → Why it fails:** The status tokens (`--success-bg`, `--error-bg`, etc.) use near-white HSL values designed for the light-mode Sonner toast component. AI agents sometimes apply these to dark-mode alert banners or inline notifications, creating a light rectangle in a dark UI. **What to do instead:** Status token backgrounds are toast-only. For inline status states on dark surfaces, synthesize dark equivalents or use border + text color only.
11. **NEVER use absolute positioning for structural layout → Why it fails:** AI agents fall back to `position: absolute` for centering, aligning navigation items, or stacking elements because it feels simple. This breaks at responsive breakpoints and creates z-index conflicts with Linear's toast/dropdown layers. **What to do instead:** Use `display: flex` with `align-items: center` for navigation and inline layouts; `display: grid` for card grids.
---
## Appendix A: Complete Token Reference
Every token extracted from the source. §0 CORE TOKENS is the primary AI signal; this appendix is reference material an AI can cross-check against when a curated role is missing.
```css
/* Colours (49) */
--gray1: hsl(0, 0%, 99%);
--gray2: hsl(0, 0%, 97.3%);
--gray3: hsl(0, 0%, 95.1%);
--gray4: hsl(0, 0%, 93%);
--gray5: hsl(0, 0%, 90.9%);
--gray6: hsl(0, 0%, 88.7%);
--gray7: hsl(0, 0%, 85.8%);
--gray8: hsl(0, 0%, 78%);
--gray9: hsl(0, 0%, 56.1%);
--gray10: hsl(0, 0%, 52.3%);
--gray11: hsl(0, 0%, 43.5%);
--gray12: hsl(0, 0%, 9%);
--normal-bg: #fff;
--success-bg: hsl(143, 85%, 96%);
--success-border: hsl(145, 92%, 87%);
--success-text: hsl(140, 100%, 27%);
--info-bg: hsl(208, 100%, 97%);
--info-border: hsl(221, 91%, 93%);
--info-text: hsl(210, 92%, 45%);
--warning-bg: hsl(49, 100%, 97%);
--warning-border: hsl(49, 91%, 84%);
--warning-text: hsl(31, 92%, 45%);
--error-bg: hsl(359, 100%, 97%);
--error-border: hsl(359, 100%, 94%);
--error-text: hsl(360, 100%, 45%);
--normal-bg-hover: hsl(0, 0%, 12%);
--normal-border-hover: hsl(0, 0%, 25%);
--surface-page: rgb(0, 0, 0);
--surface-card: rgb(15, 16, 17);
--surface-code: rgba(255, 255, 255, 0.05);
--accent-purple: rgb(94, 106, 210);
--text-primary: rgb(247, 248, 248);
--text-secondary: rgb(138, 143, 152);
--text-tertiary: rgb(208, 214, 224);
--border-subtle: rgba(255, 255, 255, 0.05);
--border-code: rgba(255, 255, 255, 0.08);
--normal-border: var(--gray4);
--surface-elevated: rgb(15, 16, 17);
--surface-overlay: rgba(0, 0, 0, 0.8);
--text-inverse: rgb(8, 9, 10);
--border-standard: rgba(255, 255, 255, 0.25);
--btn-primary-bg: var(--accent-purple);
--btn-secondary-bg: rgb(229, 229, 230);
--btn-secondary-border: rgb(229, 229, 230);
--card-bg: var(--surface-elevated);
--card-border: var(--border-subtle);
--code-bg: var(--surface-code);
--code-border: var(--border-code);
--border-gray: 1px solid var(--gray4);
/* Typography (19) */
--toast-close-button-transform: translate(-35%, -35%);
--normal-text: var(--gray12);
--size: 16px;
--font-size-xs: 12px; /* 24 elements — e.g. span "Faster app launch", span "02/145", span "02" /* mined from computed styles */ */
--font-size-sm: 13px; /* 104 elements — e.g. h3 "Product", h3 "Features", h3 "Company" /* mined from computed styles */ */
--font-size-md: 14px; /* 3 elements — e.g. p "Render UI before veh", span "Linear", a "Skip to content →" /* mined from computed styles */ */
--font-size-lg: 15px; /* 14 elements — e.g. p "Purpose-built for pl", p "Linear is shaped by ", p "Designed for workflo" /* mined from computed styles */ */
--font-size-2xl: 24px; /* 5 elements — e.g. p "Turn conversations a", p "Plan and navigate fr", p "Build and deploy AI " /* mined from computed styles */ */
--font-size-3xl: 48px; /* 7 elements — e.g. h2 "A new species of pro", h2 "Make product
operat", h2 "Define the
product " /* mined from computed styles */ */
--font-weight-regular: 400; /* 136 elements — e.g. p "Purpose-built for pl", p "Render UI before veh", p "Linear is shaped by " /* mined from computed styles */ */
--font-weight-medium: 510; /* 55 elements — e.g. h1 "The productdevelopme", h2 "A new species of pro", h2 "Make product
operat" /* mined from computed styles */ */
--font-weight-semibold: 590; /* 12 elements — e.g. h3 "Faster app launch", h4 "Activity", span "Linear" /* mined from computed styles */ */
--line-height-tight: 16.8px; /* 22 elements — e.g. span "Faster app launch", span "02/145", span "02" /* mined from computed styles */ */
--line-height-normal: 19.5px; /* 79 elements — e.g. h3 "Product", h3 "Features", h3 "Company" /* mined from computed styles */ */
--btn-primary-text: var(--text-primary);
--btn-secondary-text: var(--text-inverse);
--code-text: var(--text-tertiary);
--font-sans: "Inter Variable", "SF Pro Display", -apple-system, ...;
--font-mono: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Spacing (40) */
--toast-icon-margin-start: -3px;
--toast-icon-margin-end: 4px;
--toast-svg-margin-start: -1px;
--toast-svg-margin-end: 0px;
--toast-button-margin-start: auto;
--toast-button-margin-end: 0;
--normal-border: var(--gray4);
--space-xs: 8px; /* 93 elements — e.g. nav .Sidebar_sidebar__yeDLZ, nav .Sidebar_sidebar__yeDLZ, div .page_container__YSA5u /* mined from computed styles */ */
--space-sm: 12px; /* 5 elements — e.g. header .IssueView_chatBoxHeader__dsIb0, header .IssueView_chatBoxHeader__dsIb0, div .Flex_root__DOQCW /* mined from computed styles */ */
--space-md: 16px; /* 6 elements — e.g. header .IssueView_chatBoxHeader__dsIb0, div .SlackIssue_row__Os_Mw, div .SlackIssue_row__Os_Mw /* mined from computed styles */ */
--space-lg: 20px; /* 5 elements — e.g. header .IssueView_chatBoxHeader__dsIb0, header .Monitor_header__guWRp, header .Monitor_header__guWRp /* mined from computed styles */ */
--space-xl: 24px; /* 10 elements — e.g. header .IssueView_header__sldQv, header .SlackIssue_header__NtjDx, header .SlackIssue_header__NtjDx /* mined from computed styles */ */
--space-2xl: 96px; /* 5 elements — e.g. section .PageSection_root__kFVv1, section .PageSection_root__kFVv1, section .PageSection_root__kFVv1 /* mined from computed styles */ */
--space-3xl: 128px; /* 5 elements — e.g. section .PageSection_root__kFVv1, section .PageSection_root__kFVv1, section .PageSection_root__kFVv1 /* mined from computed styles */ */
--card-padding: 0px 24px 28px;
--space-1: 4px;
--space-2: 6px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
--space-8: 28px;
--space-9: 32px;
--space-10: 40px;
--bp-xs: 600px;
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
--container-max: 1280px;
--container-padding: 32px;
--size: 16px;
--type-display: 64px;
--type-heading: 48px;
--type-subheading: 20px;
--type-body: 15px;
--type-ui-md: 14px;
--type-ui-sm: 13px;
--type-mono: 12.25px;
/* Radius (10) */
--border-radius: 8px;
--radius-sm: 4px; /* 12 elements — e.g. button .Sidebar_switchWorkspaceButton__QuP7W "Linear", button .SharedViewStyles_buttonBase__MNsrT, a .Changelog_link__IM2Ji "Linear Agent MCP sup" /* mined from computed styles */ */
--radius-md: 6px; /* 20 elements — e.g. button .Sidebar_searchButton__I0_9C, button .Sidebar_newIssueButton__j96TX, button .Sidebar_navItem__vdR_h "Inbox" /* mined from computed styles */ */
--radius-lg: 9999px; /* 13 elements — e.g. button .Header_anchor__CTwdv "Product", button .Header_anchor__CTwdv "Resources", a .Header_anchor__CTwdv "Customers" /* mined from computed styles */ */
--card-radius: var(--border-radius);
--code-radius: 4px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-default: var(--border-radius);
--radius-full: 9999px;
/* Effects (10) */
--toast-close-button-start: 0;
--toast-close-button-end: unset;
--y: translateY(100%);
--lift-amount: calc(var(--lift) * var(--gap));
--lift: 1;
--scale: var(--toasts-before) * 0.05 + 1;
--shadow-sm: 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; /* 1 element — e.g. a .Button_root__Stmhv /* mined from computed styles */ */
--shadow-button-secondary: 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;
--shadow-focus-ring: rgba(0, 0, 0, 0.1) 0px 4px 12px,
rgba(0, 0, 0, 0.2) 0px 0px 0px 2px;
--shadow-focus-button: rgba(0, 0, 0, 0.4) 0px 0px 0px 2px;
/* Motion (86) */
----motion-grid-dot-0-0-agent: @keyframes grid-dot-0-0-agent {
0% { opacity: 1; }
6.25% { opacity: 1; }… <0.5KB elided>; /* @keyframes grid-dot-0-0-agent */
----motion-grid-dot-0-1-agent: @keyframes grid-dot-0-1-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-0-1-agent */
----motion-grid-dot-0-2-agent: @keyframes grid-dot-0-2-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-0-2-agent */
----motion-grid-dot-0-3-agent: @keyframes grid-dot-0-3-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-0-3-agent */
----motion-grid-dot-0-4-agent: @keyframes grid-dot-0-4-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-0-4-agent */
----motion-grid-dot-1-0-agent: @keyframes grid-dot-1-0-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-1-0-agent */
----motion-grid-dot-1-1-agent: @keyframes grid-dot-1-1-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-1-1-agent */
----motion-grid-dot-1-2-agent: @keyframes grid-dot-1-2-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-1-2-agent */
----motion-grid-dot-1-3-agent: @keyframes grid-dot-1-3-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-1-3-agent */
----motion-grid-dot-1-4-agent: @keyframes grid-dot-1-4-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-1-4-agent */
----motion-grid-dot-2-0-agent: @keyframes grid-dot-2-0-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-2-0-agent */
----motion-grid-dot-2-1-agent: @keyframes grid-dot-2-1-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-2-1-agent */
----motion-grid-dot-2-2-agent: @keyframes grid-dot-2-2-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-2-2-agent */
----motion-grid-dot-2-3-agent: @keyframes grid-dot-2-3-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-2-3-agent */
----motion-grid-dot-2-4-agent: @keyframes grid-dot-2-4-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-2-4-agent */
----motion-grid-dot-3-0-agent: @keyframes grid-dot-3-0-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-3-0-agent */
----motion-grid-dot-3-1-agent: @keyframes grid-dot-3-1-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-3-1-agent */
----motion-grid-dot-3-2-agent: @keyframes grid-dot-3-2-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-3-2-agent */
----motion-grid-dot-3-3-agent: @keyframes grid-dot-3-3-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-3-3-agent */
----motion-grid-dot-3-4-agent: @keyframes grid-dot-3-4-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-3-4-agent */
----motion-grid-dot-4-0-agent: @keyframes grid-dot-4-0-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-4-0-agent */
----motion-grid-dot-4-1-agent: @keyframes grid-dot-4-1-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-4-1-agent */
----motion-grid-dot-4-2-agent: @keyframes grid-dot-4-2-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-4-2-agent */
----motion-grid-dot-4-3-agent: @keyframes grid-dot-4-3-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-4-3-agent */
----motion-grid-dot-4-4-agent: @keyframes grid-dot-4-4-agent {
0% { opacity: 0.3; }
6.25% { opacity: 0.3;… <0.5KB elided>; /* @keyframes grid-dot-4-4-agent */
----motion-grid-dot-0-0-upDown: @keyframes grid-dot-0-0-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-0-0-upDown */
----motion-grid-dot-0-1-upDown: @keyframes grid-dot-0-1-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-0-1-upDown */
----motion-grid-dot-0-2-upDown: @keyframes grid-dot-0-2-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-0-2-upDown */
----motion-grid-dot-0-3-upDown: @keyframes grid-dot-0-3-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-0-3-upDown */
----motion-grid-dot-0-4-upDown: @keyframes grid-dot-0-4-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-0-4-upDown */
----motion-grid-dot-1-0-upDown: @keyframes grid-dot-1-0-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-1-0-upDown */
----motion-grid-dot-1-1-upDown: @keyframes grid-dot-1-1-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-1-1-upDown */
----motion-grid-dot-1-2-upDown: @keyframes grid-dot-1-2-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-1-2-upDown */
----motion-grid-dot-1-3-upDown: @keyframes grid-dot-1-3-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-1-3-upDown */
----motion-grid-dot-1-4-upDown: @keyframes grid-dot-1-4-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-1-4-upDown */
----motion-grid-dot-2-0-upDown: @keyframes grid-dot-2-0-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-2-0-upDown */
----motion-grid-dot-2-1-upDown: @keyframes grid-dot-2-1-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-2-1-upDown */
----motion-grid-dot-2-2-upDown: @keyframes grid-dot-2-2-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-2-2-upDown */
----motion-grid-dot-2-3-upDown: @keyframes grid-dot-2-3-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-2-3-upDown */
----motion-grid-dot-2-4-upDown: @keyframes grid-dot-2-4-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-2-4-upDown */
----motion-grid-dot-3-0-upDown: @keyframes grid-dot-3-0-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-3-0-upDown */
----motion-grid-dot-3-1-upDown: @keyframes grid-dot-3-1-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-3-1-upDown */
----motion-grid-dot-3-2-upDown: @keyframes grid-dot-3-2-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-3-2-upDown */
----motion-grid-dot-3-3-upDown: @keyframes grid-dot-3-3-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-3-3-upDown */
----motion-grid-dot-3-4-upDown: @keyframes grid-dot-3-4-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-3-4-upDown */
----motion-grid-dot-4-0-upDown: @keyframes grid-dot-4-0-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-4-0-upDown */
----motion-grid-dot-4-1-upDown: @keyframes grid-dot-4-1-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-4-1-upDown */
----motion-grid-dot-4-2-upDown: @keyframes grid-dot-4-2-upDown {
0% { opacity: 1; }
7.14286% { opacity: 1;… <0.5KB elided>; /* @keyframes grid-dot-4-2-upDown */
----motion-grid-dot-4-3-upDown: @keyframes grid-dot-4-3-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-4-3-upDown */
----motion-grid-dot-4-4-upDown: @keyframes grid-dot-4-4-upDown {
0% { opacity: 0.3; }
7.14286% { opacity: 0… <0.5KB elided>; /* @keyframes grid-dot-4-4-upDown */
----motion-grid-dot-0-0-pong: @keyframes grid-dot-0-0-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-0-0-pong */
----motion-grid-dot-0-1-pong: @keyframes grid-dot-0-1-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-0-1-pong */
----motion-grid-dot-0-2-pong: @keyframes grid-dot-0-2-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-0-2-pong */
----motion-grid-dot-0-3-pong: @keyframes grid-dot-0-3-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-0-3-pong */
----motion-grid-dot-0-4-pong: @keyframes grid-dot-0-4-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-0-4-pong */
----motion-grid-dot-1-0-pong: @keyframes grid-dot-1-0-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-1-0-pong */
----motion-grid-dot-1-1-pong: @keyframes grid-dot-1-1-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-1-1-pong */
----motion-grid-dot-1-2-pong: @keyframes grid-dot-1-2-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-1-2-pong */
----motion-grid-dot-1-3-pong: @keyframes grid-dot-1-3-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-1-3-pong */
----motion-grid-dot-1-4-pong: @keyframes grid-dot-1-4-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-1-4-pong */
----motion-grid-dot-2-0-pong: @keyframes grid-dot-2-0-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-2-0-pong */
----motion-grid-dot-2-1-pong: @keyframes grid-dot-2-1-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-2-1-pong */
----motion-grid-dot-2-2-pong: @keyframes grid-dot-2-2-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-2-2-pong */
----motion-grid-dot-2-3-pong: @keyframes grid-dot-2-3-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-2-3-pong */
----motion-grid-dot-2-4-pong: @keyframes grid-dot-2-4-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-2-4-pong */
----motion-grid-dot-3-0-pong: @keyframes grid-dot-3-0-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-3-0-pong */
----motion-grid-dot-3-1-pong: @keyframes grid-dot-3-1-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-3-1-pong */
----motion-grid-dot-3-2-pong: @keyframes grid-dot-3-2-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-3-2-pong */
----motion-grid-dot-3-3-pong: @keyframes grid-dot-3-3-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-3-3-pong */
----motion-grid-dot-3-4-pong: @keyframes grid-dot-3-4-pong {
0% { opacity: 1; }
12.5% { opacity: 1; }
1… <0.4KB elided>; /* @keyframes grid-dot-3-4-pong */
----motion-grid-dot-4-0-pong: @keyframes grid-dot-4-0-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-4-0-pong */
----motion-grid-dot-4-1-pong: @keyframes grid-dot-4-1-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-4-1-pong */
----motion-grid-dot-4-2-pong: @keyframes grid-dot-4-2-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-4-2-pong */
----motion-grid-dot-4-3-pong: @keyframes grid-dot-4-3-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-4-3-pong */
----motion-grid-dot-4-4-pong: @keyframes grid-dot-4-4-pong {
0% { opacity: 0.3; }
12.5% { opacity: 0.3; }… <0.4KB elided>; /* @keyframes grid-dot-4-4-pong */
----motion-swipe-out-left: @keyframes swipe-out-left {
0% { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
100% { transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%)); opacity: 0; }
}; /* @keyframes swipe-out-left */
----motion-swipe-out-right: @keyframes swipe-out-right {
0% { transform: var(--y) translateX(var(--swipe-amount-x)); opacity: 1; }
100% { transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%)); opacity: 0; }
}; /* @keyframes swipe-out-right */
----motion-swipe-out-up: @keyframes swipe-out-up {
0% { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
100% { transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%)); opacity: 0; }
}; /* @keyframes swipe-out-up */
----motion-swipe-out-down: @keyframes swipe-out-down {
0% { transform: var(--y) translateY(var(--swipe-amount-y)); opacity: 1; }
100% { transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%)); opacity: 0; }
}; /* @keyframes swipe-out-down */
----motion-sonner-fade-in: @keyframes sonner-fade-in {
0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}; /* @keyframes sonner-fade-in */
----motion-sonner-fade-out: @keyframes sonner-fade-out {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.8); }
}; /* @keyframes sonner-fade-out */
----motion-sonner-spin: @keyframes sonner-spin {
0% { opacity: 1; }
100% { opacity: 0.15; }
}; /* @keyframes sonner-spin */
--duration-fast: 0.1s; /* 16 elements — e.g. button, button, a /* mined from computed styles */ */
--duration-base: 0.16s; /* 21 elements — e.g. button, button, button /* mined from computed styles */ */
--duration-slow: 1.2s; /* 1 element — e.g. span /* mined from computed styles */ */
--ease-default: ease; /* 144 elements — e.g. button, button, button /* mined from computed styles */ */
```
More from the gallery
Browse all kits →You may also like
Contra
MITPlayful yet professional design system with teal and purple accents, bold typography, and vibrant accent surfaces—built for modern SaaS platforms and landing pages
Layout03
lightboldsaaslanding-page
DoorDash
MITClean, accessible food-delivery system with DoorDash's signature red accent, light neutral palette, and system-font typography—built for rapid product development
Layout03
lightecommsaasmobile
Mercedes-Benz
MITLuxe, minimalist design system with sharp black-and-white contrast and serif typography, crafted for premium automotive and lifestyle brands
Layout05
darkminimalboldecomm