# Export a Tailwind theme from linear.app

[Open the live Fudge conversation](https://design.withfudge.com/share/export-tailwind-theme-from-linear-app)

Last updated: 2026-07-28

Exported a Tailwind v4 theme from captured `linear.app` design details. The useful part is the relationship between canvas, surface, text, accent, spacing, and radius tokens rather than treating the palette as a flat screenshot sample.

```css
@import "tailwindcss";

@theme {
  --color-gray-50: oklch(0.97837 0.00107 196.90516);
  --color-gray-100: oklch(0.92346 0.00174 202.39692);
  --color-gray-200: oklch(0.81363 0.00308 213.38044);
  --color-gray-300: oklch(0.7038 0.00441 224.36397);
  --color-gray-400: oklch(0.59398 0.00575 235.34749);
  --color-gray-500: oklch(0.48415 0.00709 246.33101);
  --color-gray-600: oklch(0.37433 0.00842 257.31454);
  --color-gray-700: oklch(0.2645 0.00976 268.29806);
  --color-gray-800: oklch(0.1587 0.00586 268.29806);
  --color-gray-900: oklch(0.0529 0.00195 268.29806);
  --color-gray-950: oklch(0 0 0);

  --color-slate-50: oklch(0.93722 0.00762 260.71074);
  --color-slate-100: oklch(0.87444 0.01524 260.71074);
  --color-slate-400: oklch(0.64881 0.01459 262.35864);
  --color-slate-600: oklch(0.40734 0.0097 261.74961);
  --color-slate-950: oklch(0.05092 0.00121 261.74961);

  --color-bg-base: var(--color-gray-950);
  --color-text-primary: var(--color-gray-50);
  --color-action-primary: var(--color-gray-800);
  --color-primary: var(--color-gray-800);
  --color-secondary: var(--color-gray-600);
  --color-accent: var(--color-slate-400);

  --spacing-0: 0;
  --spacing-100: 4px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-500: 24px;
  --spacing-600: 32px;
  --spacing-700: 48px;
  --spacing-800: 64px;
  --spacing-900: 80px;

  --radius-sm: 3px;
  --radius-md: 5.5px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;
}
```

Treat exported tokens as a starting point. Preserve observed relationships first: canvas, surface, muted text, accent, border, and interaction states.

## Colors

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

## 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)