# Export a Website Design System as a Tailwind CSS Theme

[Open the live Fudge conversation](https://design.withfudge.com/share/export-a-website-design-system-as-tailwind-css-theme)

Last updated: 2026-08-25

To export a website design system as a Tailwind CSS theme, inspect the page first, name the visual roles you can verify, and then map those observations into semantic Tailwind tokens. The result is an implementation starting point based on the captured page. It is not automatically the site's complete internal design system.

## Build the token map first

Inventory the details that repeat across the page: font families and weights, text sizes, line heights, color roles, spacing, borders, radii, shadows, gradients, and component treatments. Name values by purpose. `text-muted` and `surface-raised` are easier to maintain than arbitrary names such as `gray-2`.

For a Tailwind v4 project, CSS variables can provide the shared source of truth:

```css
@theme {
  --font-sans: "Example Sans", ui-sans-serif, system-ui, sans-serif;
  --color-page: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #171717;
  --color-text-muted: #6b7280;
  --color-accent: #5b5ce2;
  --radius-card: 1rem;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 0.08);
}
```

Replace the example values only after checking the captured reference. If a value is estimated, label it in project notes rather than presenting it as confirmed.

The captured Linear reference provides a concrete typography example. It is represented here with Inter at weights 400 and 500. The supplied notes associate 400 with body copy, labels, navigation, and controls, and 500 with headings and emphasized interface text. Use those observations as reference-specific evidence, not as a recommendation for every project.

## 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 type and color roles

Use `font-sans` for the main family, then map observed weights to utilities such as `font-normal` and `font-medium`. Add explicit font sizes and line heights when they repeat or when matching the reference closely matters. Also confirm that your project can load every weight you use. A fallback font can change line breaks, card heights, and navigation spacing.

For colors, begin with a small semantic set: page background, raised surface, primary text, muted text, border, accent, and state colors. Do not turn every sampled shade into a permanent token. A color that appears once in an illustration or decorative overlay may not be part of the reusable interface.

## Add spacing and components carefully

Look for repeated page gutters, section gaps, card padding, control heights, and grid gaps. Use existing spacing values when they preserve the visual rhythm. Add custom values only when a measurement is both important and repeated.

Then create component recipes from the shared roles. A button might combine the accent color, contrasting text, repeated radius, horizontal padding, and medium weight. A card might combine a surface color, border, radius, shadow, and internal gap. Record hover, focus, disabled, and open states only when they were checked or when you explicitly mark them as project decisions.

## Verify before shipping

Compare a small verification page with the reference at the same viewport. Include the first visible section, navigation, a heading and paragraph pair, a card, a button, and a form control. Then test narrower and wider widths, longer labels, text wrapping, focus visibility, contrast, image crops, and content that was not present in the reference.

Keep the original observations beside the theme. This separates measured page details from later decisions such as a new brand color, responsive breakpoint, or product-specific state. If you need a faster handoff, inspect the captured page's structure, typography, and component styles, then request a Tailwind v4 theme with uncertain values clearly marked for review.

## Use this in your AI agent

> Inspect the saved website reference and export a Tailwind CSS v4 theme from observed design details. Define semantic color, typography, spacing, radius, border, shadow, gradient, and component tokens. Include only values supported by the reference, label estimates and unobserved states, and return usable CSS plus a short mapping from each token to the page element where it was observed.

[Install Fudge for your AI agent](/mcp)

---

Promote a value to a token when it appears across multiple elements, represents a clear role, or controls an important visual decision. Common candidates are page background, surface, primary text, muted text, accent, border, card radius, control height, page gutter, and repeated section gaps.

Keep one-off values local when they belong to an illustration, a single marketing graphic, or an isolated decorative treatment. Do not create a token for every sampled color or spacing measurement. A smaller semantic theme is easier to review and keeps later changes consistent.

Use a simple test: if changing the value should update several components together, it probably belongs in the theme. If changing it affects only one unusual element, keep it close to that component and note where it came from.

---

Check the theme against the reference at the same viewport first, then test narrower and wider widths. Review text wrapping, card height, navigation behavior, button states, form focus styles, image crops, and spacing between sections. A close desktop screenshot does not prove that the responsive layout is correct.

Verify font loading and available weights, since a fallback font can change line breaks and component height. Run an accessibility review for text contrast, focus visibility, target size, and heading order. Finally, separate observed values from project decisions such as a new brand color, product-specific state, or responsive breakpoint.

The result should be a reviewed theme that starts from the captured page while still meeting your own content, accessibility, and responsive requirements.

## Related questions

- [Export a Website Design System as a Tailwind v4 Theme](/share/export-a-website-design-system-as-tailwind-v4-theme)
- [Export Website Design Details as Structured JSON](/share/export-a-website-design-system-as-structured-json-design-details)
- [Generate color and font tokens from a live website](/share/generate-color-and-font-tokens-from-a-live-website)
- [Export a website design system as a reusable design reference file](/share/export-a-website-design-system-as-reusable-design-reference-file)