Create a Tailwind CSS Theme from a Website Reference

To create a Tailwind CSS theme from a website reference, capture a representative page, inspect repeated visual choices, and translate those observations into semantic tokens. The goal is a small theme you can adapt to your own product, not a claim that you have recovered the source site's private design system.

Use this workflow

1. Choose a representative page. Pick a page with navigation, headings, body copy, buttons, cards, and at least one responsive section. A hero alone rarely shows enough repeated decisions.
2. Capture the state you want to study. Record the viewport and whether menus, dialogs, hover states, or animations are active.
3. Group repeated choices. Look for recurring surface colors, text levels, spacing, borders, radii, shadows, gradients, and component states.
4. Name roles before values. Prefer names such as background, foreground, muted, accent, border, and surface instead of names based on individual hex values.
5. Export and test. Treat the first export as a starting point. Test it with your own content, breakpoints, focus states, and accessibility requirements.

The example below is grounded in a captured Linear page. Its typography evidence identifies Inter at weight 400 for body copy, labels, navigation, and controls, and weight 500 for headings and emphasized interface text. That describes the supplied capture. It does not prove that every Linear page uses only those values.

A practical Tailwind v4 shape

Tailwind v4 themes work well when design decisions are expressed as CSS variables. Keep the names semantic so one later change does not require editing every component.

The literal values above are an implementation example, not verified measurements from the supplied capture. Replace them with values you actually observe. Keep a short evidence note beside each token, such as "primary button background" or "card border on the light surface."

Check the theme before using it

• Typography: Confirm that the family and weights are available. Test headings, body copy, labels, buttons, and code if your product needs them.
• Contrast: Check muted text, placeholders, disabled controls, buttons, borders, and focus rings on every surface.
• Responsive behavior: Test narrow and wide layouts. Make sure type and spacing do not make controls cramped or headings hard to scan.
• State coverage: Add hover, focus, active, disabled, error, and selected treatments rather than copying only the resting state.
• Scope: Keep repeated values that support your product. Leave out one-off illustration colors and content-specific decoration unless you need them.

Call the result an observed reference theme or an adaptation. It can guide a project without pretending to be an official internal system.

Use this in your AI agent

> Inspect my captured website reference, identify recurring semantic colors, typography families and weights, spacing, borders, radii, shadows, and component states, then create a Tailwind CSS theme using CSS variables for Tailwind v4. Separate observed values from suggested adaptations, flag uncertain values, and return a concise token table plus ready-to-paste CSS. Do not call it the site's official design system unless the evidence supports that claim. > > Install Fudge for your AI agent

Start with roles and repetition. List the main surfaces, text levels, borders, accent actions, and status colors, then record where each value appears. A token belongs in the core theme when it supports more than one component or state.

Use semantic names such as background, surface, foreground, muted, border, accent, and danger. Add component tokens such as radius-control or shadow-card only after the global roles are clear. Keep one-off illustration colors out of the core theme.

Then test the tokens with your own content. A reference may use short labels or unusually large headings, while your product may need different line heights, contrast, or responsive values. Treat the reference as evidence for visual decisions, not as a complete specification.

Ask the agent to inspect the page structure first, then collect repeated visual details and map them to semantic CSS variables. Request a token table and ready-to-paste Tailwind v4 CSS so you can review the evidence before using the code.

Specify the target viewport, whether dark mode matters, and which states to inspect: hover, focus, active, disabled, selected, error, and loading. Ask the agent to separate observed details from recommendations, identify missing evidence, and avoid calling the output an official design system.

Finish with a validation checklist covering contrast, responsive behavior, available font weights, and unused tokens. This produces an editable project artifact instead of a generic visual description.

Related questions

• Create a Tailwind v4 Theme from a Website Reference
• Create structured JSON design details from a website reference
• Export a website design system as color and font tokens
• Create a reusable design reference file from a website