Create a Tailwind v4 Theme from a Website Reference

To create a Tailwind v4 theme from a website reference, inspect the reference for repeated design choices and express those choices as semantic CSS variables. Then test the result against your own content, states, and accessibility needs before committing it to a project.

Make the decision clear

Use this sequence:

1. Capture a complete page. Include navigation, content, controls, cards, and a responsive view when possible.
2. Record the context. Save the viewport, page state, and any visible interaction state. A menu or dialog can reveal values missing from the default view.
3. Group observations by role. Separate colors, typography, spacing, borders, radii, shadows, gradients, and component states.
4. Convert repetition into tokens. A recurring action color can become an accent role. A repeated card edge can become a surface or card radius.
5. Keep uncertainty visible. If a value is inferred from a rendered page or appears once, label it as an adaptation rather than a confirmed system rule.

The supplied example is based on a captured Linear page titled "The system for product development." Its typography evidence describes a compact sans-serif approach with contrast from size, weight, and muted color, and lists Inter at weights 400 and 500 for different interface uses. Use that evidence as direction for the captured page, not as a complete theme for every page.

Build the Tailwind v4 theme

Tailwind v4 keeps the theme close to your CSS, which makes semantic decisions easy to inspect and revise.

These values illustrate the structure and are not verified measurements from the captured reference. Replace them with observed values. For each exported token, keep a note such as "secondary text on light surface" or "primary action background." That note helps determine whether the value belongs in the global theme or only in a component.

What to inspect before exporting

Color: Find the page background, raised surface, primary text, secondary text, border, link, action, and status roles. Check whether a role changes between light and dark areas.

Typography: Record family, available variants, weight, size, and line height for headings, body copy, navigation, buttons, labels, and code. A family name alone is not enough if the required weight is unavailable.

Layout: Look for the spacing rhythm between sections, cards, controls, and text blocks. Note container width, alignment, and whether spacing changes at smaller viewports.

Components: Record shared radii, border widths, shadows, gradients, focus rings, hover treatments, and disabled states. A resting screenshot rarely captures complete component behavior.

Before shipping, render a test page with long headings, multi-line copy, a form, a card grid, buttons, errors, and keyboard focus. Check contrast on every surface, test narrow and wide layouts, and remove tokens that never appear in your interface.

Describe the result accurately as an observed reference theme or an adaptation. The strongest output is a concise, named token set with evidence notes and a short list of open questions.

Use this in your AI agent

> Review my saved website reference and create a Tailwind v4 theme from its observed design details. Inspect page structure, typography families and weights, semantic colors, spacing rhythm, borders, radii, shadows, gradients, and visible component states. Return ready-to-paste @theme CSS, a token table with locations and confidence, and a validation checklist. Clearly separate measured or observed details from suggested adaptations, and do not describe the result as an official design system without supporting evidence. > > Install Fudge for your AI agent

A Tailwind v4 theme is a reusable vocabulary for your project. Copied CSS is usually tied to the source page's markup, selectors, and content. A theme names decisions such as background, foreground, muted, accent, radius-control, and shadow-card, allowing your components to share them without inheriting the source site's structure.

Copying CSS can preserve accidental details such as a one-off margin, an illustration color, or a selector that works only with the original page hierarchy. A reference-based theme should keep repeated values that support your interface and leave out details that do not transfer.

A visible page also may not reveal every breakpoint or component state. Mark uncertain values, test the theme with your own content, and add focus, error, and disabled treatments where the evidence is incomplete.

Use four checks. First, confirm evidence: every core token should have a visible use or an explicit adaptation note. Remove values that appear only in decorative artwork unless your product needs them.

Second, test coverage. Check headings, body text, labels, buttons, links, cards, inputs, alerts, focus rings, disabled controls, and error states. Confirm that the available font weights and line heights work with long content.

Third, test narrow and wide layouts for cramped controls, broken wrapping, inconsistent section spacing, and weak borders or shadows. Fourth, document ownership and maintenance. Label the file as a reference adaptation, keep evidence notes near the tokens, and remove unused values. Commit the smallest theme that gives your components a consistent visual language.

Related questions

• Export a website design system as color and font tokens
• Create a Tailwind CSS Theme from a Website Reference
• Export a Website Design System as CSS Custom Properties
• Create structured JSON design details from a website reference