# Convert Website Design Details into a Tailwind v4 Theme

[Open the live Fudge conversation](https://design.withfudge.com/share/convert-website-design-details-into-tailwind-v4-theme)

Last updated: 2026-08-25

The most reliable way to convert website design details into a Tailwind v4 theme is to separate observed values from project decisions, then map the observations into named tokens. Start with typography, color roles, spacing, radii, shadows, and visible component states instead of copying isolated CSS values.

## Use a token map before writing Tailwind

Create a short inventory with four columns: role, observed value, Tailwind token, and confidence. For example:

| Role | Observed detail | Tailwind token | Decision |
| --- | --- | --- | --- |
| Body font | Inter, regular | `--font-sans` | Confirm availability and project use |
| Emphasized text | Inter, medium | `--font-weight-medium` | Use where the reference shows emphasis |
| Main background | Captured page value | `--color-background` | Confirm against light and dark sections |
| Muted text | Captured page value | `--color-muted` | Check contrast before adopting |
| Corner radius | Repeated component value | `--radius-md` | Round to a reusable scale |

The captured Linear example shows Inter for body copy, labels, navigation, controls, and emphasized interface text. Treat that as an observed reference, not proof of Linear's complete internal design system.

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

## Linear typography

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

## Map the details into Tailwind v4

Tailwind v4 supports a CSS-first theme, so keep the source of truth in your stylesheet:

```css
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --color-background: oklch(98% 0.01 270);
  --color-foreground: oklch(22% 0.02 270);
  --color-muted: oklch(58% 0.02 270);
  --color-border: oklch(88% 0.015 270);
  --color-accent: oklch(58% 0.2 275);

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
}
```

The colors above are placeholders. Replace them with values you have inspected and label estimated values clearly. Use semantic names such as `background`, `foreground`, `muted`, `border`, and `accent` rather than names based on where a color happened to appear, such as `hero-gray` or `button-purple`.

For spacing, convert repeated measurements into a compact scale instead of creating a token for every distance. If the reference repeatedly uses values close to 4, 8, 12, 16, 24, and 32 pixels, those values can become a starting scale. Keep one-off measurements local unless they clearly recur.

Test the tokens in a page shell, navigation row, heading and paragraph pair, primary button, secondary button, card, and form field. Check body text, heading hierarchy, muted-text contrast, borders, shadows, radii, and visible focus or disabled states. If the reference shows only one color mode, treat the other mode as a project decision rather than an observed fact.

For a project artifact, include the CSS theme block, a token table, font loading notes, example component classes, the source reference, the viewport used, and a short `Verify before shipping` section. Mark responsive behavior and interaction states that were not visible. Do not present the output as the source website's official internal design system.

## Use this in your AI agent

> Inspect the saved website reference and convert its observed design details into a Tailwind CSS v4 theme. Identify typography families, weights, sizes, line heights, color roles, spacing scale, borders, radii, shadows, and visible component states. Separate directly observed values from implementation choices, use semantic token names, and return an `@theme` CSS block plus a token table and component verification checklist. Do not claim the output is the source site's official design system. Use the supplied Linear typography example only as a reference pattern, not as unverified project truth.
>
> [Install Fudge for your AI agent](/mcp) to inspect saved references and prepare the theme.

---

Keep shared roles in the main theme and override their values by mode. Component classes can continue using names such as `bg-background`, `text-foreground`, `text-muted`, and `border-border`; only the token values change.

```css
@import "tailwindcss";

@theme {
  --color-background: oklch(98% 0.01 270);
  --color-foreground: oklch(22% 0.02 270);
  --color-muted: oklch(58% 0.02 270);
  --color-border: oklch(88% 0.015 270);
  --color-accent: oklch(58% 0.2 275);
}

.dark {
  --color-background: oklch(19% 0.02 270);
  --color-foreground: oklch(95% 0.01 270);
  --color-muted: oklch(72% 0.02 270);
  --color-border: oklch(34% 0.02 270);
  --color-accent: oklch(72% 0.16 275);
}
```

Check contrast in both modes, especially for muted text, borders, placeholder text, and accent buttons. If the reference only shows one mode, mark the other mode as a project decision rather than an observed value.

---

Ask for a small handoff package rather than only a CSS block. It should include the theme file, a token table, font loading instructions, example component classes, and an uncertainty list.

A useful acceptance checklist is:

1. Every token has a semantic name and a reason for existing.
2. Repeated values are consolidated instead of duplicated.
3. Fonts include the family and weights that were actually observed.
4. Colors are checked against the backgrounds where they appear.
5. Responsive and interaction states are marked as observed or inferred.
6. The agent identifies details that cannot be confirmed from a capture.
7. A developer can build a card, button, navigation row, and form field without inventing more tokens.

Then render those components beside the reference and compare hierarchy, spacing, contrast, and density. Fix the token map when several components drift in the same direction instead of patching each component separately.

## Related questions

- [Create color and font tokens from a website reference](/share/create-color-and-font-tokens-from-a-website-reference)
- [Convert Website Design Details into a Tailwind CSS Theme](/share/convert-website-design-details-into-tailwind-css-theme)
- [Create CSS Custom Properties from a Website Reference](/share/create-css-custom-properties-from-a-website-reference)
- [Convert Website Design Details into Structured JSON](/share/convert-website-design-details-into-structured-json-design-details)