# Create CSS Custom Properties from a Website Reference [Open the live Fudge conversation](https://design.withfudge.com/share/create-css-custom-properties-from-a-website-reference) Last updated: 2026-08-25 You can create CSS custom properties from a website reference by first recording its visible design decisions, then translating those observations into a small, named token set. The result is a usable starter file for colors, typography, spacing, borders, radii, and shadows, but it should be treated as an observed reference rather than the site's official internal design system. ## Start with the decisions that matter Begin with the values that affect the whole interface: page background, raised surface, primary text, muted text, accent color, border color, font families, common weights, spacing steps, corner radii, and shadow levels. Do not try to copy every one-off value. A useful custom property file explains the repeated choices that a new component should reuse. Use role names instead of names tied to one element. `--color-text-muted` is more useful than `--gray-500-heading`, and `--space-4` is easier to apply consistently than `--hero-padding`. If the reference has both light and dark surfaces, keep those roles separate. If you cannot verify a value, label it as an estimate in your notes instead of presenting it as an exact fact. ## 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. ## Build a CSS token map A practical starting file might look like this: ```css :root { --color-bg: #ffffff; --color-surface: #f7f7f8; --color-text: #171719; --color-text-muted: #6f7078; --color-border: #e6e6e8; --color-accent: #5e6ad2; --font-sans: Inter, system-ui, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --radius-sm: 6px; --radius-md: 10px; --shadow-sm: 0 1px 2px rgb(0 0 0 / 8%); } ``` Replace placeholder values with measurements from the reference, then test the tokens on three different elements: a text block, a control, and a larger section. This catches naming mistakes quickly. For example, a muted text color that works on a large card may be too faint for small navigation labels. Keep the first version compact, and add a token only when it represents a repeated visual decision. ## Check the reference before exporting Review the page at the same viewport and state that influenced your notes. Record whether a color belongs to the page, a card, a border, a button, or an overlay. Check type at more than one size, because a family may use regular text for body copy and a heavier variant for headings. Also compare spacing between related elements rather than measuring only isolated gaps. The examples below show a captured Linear reference and a typography summary naming Inter at weights 400 and 500. Use them as a concrete comparison point: the useful pattern is a compact sans-serif system whose contrast comes from size, weight, and muted color. Borrow that structure only where it matches your own reference, and verify every value against the page you are documenting. Before you call the file a design system, separate confirmed observations from decisions you added yourself. A reference can show rendered colors, type choices, and component patterns without revealing source variables, aliases, responsive rules, or the team's naming conventions. Add comments such as `/* observed */`, `/* approximated */`, and `/* project decision */` if other people will rely on the file. ## Use this in your AI agent > Inspect the saved website reference and create a CSS custom property starter file. Extract observed color roles, typography families and weights, spacing patterns, border colors, radii, shadows, and any repeated component values. Use semantic names such as `--color-bg`, `--color-text-muted`, `--space-4`, and `--radius-md`. Separate confirmed observations from approximations, do not invent values that cannot be checked, and return the CSS plus a short verification checklist. Treat the result as an observed reference, not the site's official internal design system. [Install Fudge for your AI agent](/mcp) to inspect the reference and turn the checked observations into a reusable starting point. --- Start with the smallest set that controls repeated decisions across the page. A good first pass includes `--color-bg`, `--color-surface`, `--color-text`, `--color-text-muted`, `--color-border`, `--color-accent`, one sans-serif family, two or three font weights, six spacing steps, two radii, and one or two shadows. Then map those properties to real elements. Use the background and surface colors on the page and cards, text roles on headings and body copy, the accent on links and primary controls, spacing tokens between sections and inside components, and radii on buttons and cards. If a value appears only once, keep it local until another component needs the same choice. For responsive pages, add layout properties only after checking more than one viewport. Examples include `--content-max-width`, `--section-gap`, and `--control-height`, but they should reflect repeated behavior rather than a single measured section. Keep comments beside uncertain values so the file remains honest and easy to revise. Description: A focused starter list for turning repeated marketing-page decisions into maintainable CSS tokens. Copyable prompt: [Use Fudge with your AI agent](/mcp) to inspect this page and propose the smallest verified CSS token set for its repeated colors, type, spacing, borders, radii, and shadows. --- Verify the tokens in three passes. First, compare the large structure: page background, content width, section spacing, card surfaces, and main alignment. If those are wrong, fine typography adjustments will not make the recreation feel consistent. Second, compare repeated components such as buttons, navigation links, cards, inputs, and labels. Check their text color, font weight, line height, padding, border, radius, and shadow together. A token may be numerically close but still look wrong when paired with the wrong weight or surrounding space. Third, test contrast and hierarchy at the same viewport used for the reference. Look for muted text that becomes difficult to read, borders that disappear, or accent colors that overpower body content. Mark each token as confirmed, approximate, or project-specific. That distinction prevents an extracted CSS file from being mistaken for an official source of truth, especially when the reference does not expose its original variables or responsive rules. Description: A practical review process for checking structure, components, contrast, and uncertainty before relying on extracted tokens. Copyable prompt: [Use Fudge with your AI agent](/mcp) to compare the saved reference with my CSS tokens and return a concise mismatch list grouped by layout, typography, color, spacing, and component styling. ## Related questions - [Create CSS Variables from a Website Reference](/share/create-css-variables-from-a-website-reference) - [Create color and font tokens from a website reference](/share/create-color-and-font-tokens-from-a-website-reference) - [Create a DESIGN.md File from a Website Reference](/share/create-design-md-file-from-a-website-reference) - [Convert Website Design Details into a Tailwind v4 Theme](/share/convert-website-design-details-into-tailwind-v4-theme)