# Create CSS Variables from a Website Reference

[Open the live Fudge conversation](https://design.withfudge.com/share/create-css-variables-from-a-website-reference)

Last updated: 2026-08-25

You can create CSS variables from a website reference by capturing the page, identifying repeated design roles, and grouping the observations into a small set of reusable values. Treat the result as an implementation starting point based on what is visible, not as a claim that you recovered the site's private design system.

## Start with the page states you need

Capture the states that matter to your project, such as a landing page, content page, form, responsive layout, or open navigation. Review the page at the viewport sizes and states you expect to reproduce. Repeated values are more useful than every one-off measurement.

Group your observations into:

1. **Colors:** page background, raised surface, primary text, muted text, border, accent, and status colors.
2. **Typography:** family, weight, size, line height, and letter spacing for display text, headings, body copy, labels, and controls.
3. **Spacing:** recurring gaps, padding, control heights, and section separation.
4. **Shapes:** border widths, corner radii, and shadow levels.
5. **Components:** buttons, cards, inputs, navigation, and repeated panels.

Use semantic names that describe a role. A name such as `--color-surface` is easier to adapt than a name based only on a sampled color. Keep a value local to a component when it appears once or has no clear shared role.

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

## Use a semantic CSS structure

```css
:root {
  --color-page: #ffffff;
  --color-surface: #f7f7f8;
  --color-text: #1f1f23;
  --color-text-muted: #73737d;
  --color-border: #e6e6e8;
  --color-accent: #5e6ad2;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-size-body: 1rem;
  --font-size-heading: 2rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --line-height-body: 1.5;
  --line-height-heading: 1.15;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --shadow-card: 0 8px 24px rgb(0 0 0 / 0.08);
}
```

The values above are a working translation, not verified values for every page. Compare the reference and your implementation at the same viewport. Check text wrapping, button height, card density, contrast, and the relationship between body text and borders.

## Verify roles before expanding the file

Keep text, background, border, accent, and status colors separate. A muted text color may resemble a border in one screenshot but need a different value for readable body copy. If the reference has light and dark modes, record each mode separately rather than assuming one palette can serve both.

Check typography in context. The same family can look different at different weights, and headings commonly use a tighter line height than body copy. The supplied Linear example identifies Inter at weights 400 and 500 for different usage roles. Use that as a grounded comparison, then verify what fits your own page.

Build a small test page with a heading, paragraph, button, input, card, divider, and error message. If the controls feel cramped or the smallest text lacks contrast, adjust the relevant component or token before expanding the global scale.

## Export a useful starting point

When the observations are ready, export CSS variables grouped by role and keep a note beside each value. Mark whether it is observed, approximate, or normalized. CSS is useful for an existing stylesheet, while Tailwind, JSON, or DESIGN.md may be better for a shared handoff. Choose the format that matches your project, but keep the evidence and verification notes with the values.

A captured reference supports implementation decisions. It does not establish ownership of the original site's internal design system. Preserve that distinction in comments and documentation.

## Use this in your AI agent

> Inspect the captured website reference, identify repeated design roles, and create a CSS variables file grouped into colors, typography, spacing, borders, radii, shadows, and component notes. Include observed values, explain which are approximate, separate light and dark values when visible, and avoid inventing tokens that appear only once. Use semantic names and include a short verification checklist for a heading, paragraph, button, input, and card.

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

---

Name variables by role and meaning: `--color-page`, `--color-surface`, `--color-text`, and `--color-text-muted` are easier to reuse than `--gray-100` or `--purple-500`. For typography, separate family, size, weight, and line height so one decision can change without rewriting every component.

Use a small scale for repeated spacing, such as `--space-1` through `--space-8`, but do not force every measurement into that scale. A component-specific value can remain local when it appears only once. The same rule applies to shadows and radii: create shared variables only when those patterns repeat.

If the reference has themes, keep role names stable and override values in a theme selector:

```css
[data-theme="dark"] {
  --color-page: #111113;
  --color-surface: #1b1b20;
  --color-text: #f5f5f7;
  --color-text-muted: #a5a5ad;
}
```

Add comments with the page or component where each value was observed. That helps you distinguish evidence-based values from normalized values and open questions.

---

Build a small test page before applying the variables to the whole project. Include a display heading, paragraph, muted label, primary and secondary button, input with an error state, card, and divider.

Check the heading at the reference viewport and at your target mobile width. Look for unexpected wrapping, overly tight line height, and weights that are unavailable in the loaded font. Compare body text and borders separately, then check the smallest text for readable contrast. Test focus, hover, disabled, and error states when the reference shows them.

Review spacing as a rhythm rather than as isolated numbers. Card padding, button height, form gaps, and section spacing should feel related. If one value makes the layout crowded, adjust the component first instead of changing a global token immediately.

Finally, label each variable as observed, approximated, or normalized. Keep reusable values in the CSS file and page-specific exceptions beside their components.

## Related questions

- [Create a DESIGN.md File from a Website Reference](/share/create-design-md-file-from-a-website-reference)
- [Create CSS Custom Properties from a Website Reference](/share/create-css-custom-properties-from-a-website-reference)
- [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 v4 Theme](/share/convert-website-design-details-into-tailwind-v4-theme)