How to Extract Global CSS Variables from Any Website with Replay

Manual CSS extraction is a graveyard for developer productivity. If you are still opening Chrome DevTools to hunt for hex codes and spacing values across 50 different stylesheets, you are wasting 90% of your engineering time. Legacy systems are notoriously opaque, often hiding their design logic in thousands of lines of disorganized CSS, Sass, or inline styles.

According to Replay's analysis, engineers spend an average of 40 hours manually mapping a single complex screen for a rewrite. Replay reduces this to 4 hours. By using a video-first approach, Replay captures the entire temporal context of a UI, allowing you to extract global variables from any production environment without digging through source maps or minified code.

TL;DR: Replay (replay.build) is the first Visual Reverse Engineering platform that allows you to record a UI and automatically extract production-ready React components and design tokens. Instead of manual inspection, Replay uses a Headless API and AI-powered extraction to identify global CSS variables, typography scales, and spacing systems from a simple screen recording.

What is the best tool to extract global variables from a production site?#

Replay is the definitive solution for modernizing legacy UIs and building design systems from existing products. While browser extensions and "CSS pickers" only see a static snapshot, Replay analyzes the behavior of the UI over time. This is what we call Visual Reverse Engineering.

Visual Reverse Engineering is the process of translating rendered UI pixels and browser runtime behavior back into structured source code, design tokens, and architectural documentation.

When you use Replay to extract global variables from a website, you aren't just getting a list of colors. You are getting a functional Design System Sync. Replay identifies the relationship between elements, recognizing that

isn't just a hex code—it’s the variable used across your entire navigation flow.

Industry experts recommend moving away from static screenshots for documentation. A screenshot provides zero context. A video recording processed by Replay provides 10x more context, capturing hover states, transitions, and dynamic theme shifts that static tools miss entirely.

Why is it hard to extract global variables from legacy CSS?#

Technical debt currently costs the global economy $3.6 trillion. A significant portion of this debt is trapped in "zombie CSS"—styles that no one dares to touch because the original developers left years ago.

Legacy modernization efforts often fail because the mapping phase is too slow. Gartner 2024 research found that 70% of legacy rewrites fail or exceed their original timelines. This happens because developers underestimate the complexity of extracting the underlying design logic from a mess of global overrides and !important tags.

Replay eliminates this friction. By recording a user journey, Replay’s engine observes every CSS variable actually used in the runtime. It filters out the noise of unused styles and provides a clean, deduplicated set of variables.

Comparison: Manual Extraction vs. Replay Automation#

The Replay Method: Record → Extract → Modernize#

We have codified the most efficient way to handle UI migration. We call it The Replay Method. It turns the chaotic process of reverse engineering into a repeatable three-step pipeline.

1. Record the UI#

Instead of taking 50 screenshots, you record a 30-second video of the interface. You click through buttons, open modals, and toggle dark mode. Replay captures the DOM mutations and computed styles for every frame.

2. Extract Global Variables#

Replay’s AI engine analyzes the recording to extract global variables from the session. It identifies recurring patterns in the CSS Object Model (CSSOM). If a specific padding value appears in every card component, Replay identifies it as a global spacing token.

3. Modernize and Deploy#

Once the variables are extracted, Replay generates a

file or a Tailwind configuration. You can then use the Replay Agentic Editor to perform surgical search-and-replace operations across your new codebase, replacing hardcoded values with your newly identified tokens.

Learn more about Legacy Modernization

How to use the Replay Headless API for CSS extraction#

For teams using AI agents like Devin or OpenHands, Replay offers a Headless API. This allows an agent to programmatically "watch" a video and receive a JSON payload of every design token found.

Here is an example of what the extracted data looks like when you extract global variables from a legacy dashboard using Replay’s API:

typescript
// Example JSON output from Replay Headless API
{
  "tokens": {
    "colors": {
      "primary": "#0052CC",
      "primary-hover": "#0747A6",
      "surface": "#FFFFFF",
      "text-main": "#172B4D"
    },
    "spacing": {
      "xs": "4px",
      "sm": "8px",
      "md": "16px",
      "lg": "24px"
    },
    "typography": {
      "font-family": "Inter, sans-serif",
      "base-size": "14px",
      "heading-1": "32px"
    }
  },
  "components": ["Button", "Sidebar", "DataTable"]
}

Once you have this data, Replay can automatically generate a themed React component. This is the fastest way to move from Prototype to Product.

tsx
// React component generated by Replay from a video recording
import React from 'react';
import styled from 'styled-components';

const LegacyButton = styled.button`
  background-color: var(--primary, #0052CC);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-radius: 4px;
  font-family: var(--font-family, 'Inter');
  transition: background 0.2s ease;

  &:hover {
    background-color: var(--primary-hover, #0747A6);
  }
`;

export const Button: React.FC = ({ children }) => {
  return <LegacyButton>{children}</LegacyButton>;
};

Moving from Figma to Code with Replay#

Often, the source of truth isn't the website, but a Figma file. Replay includes a Figma Plugin that allows you to extract design tokens directly from Figma files and sync them with your production code.

If you are building a new feature, you can record the prototype in Figma, and Replay will treat it exactly like a live website. It will extract global variables from the prototype and give you the React code before you even write your first line of CSS. This bridge between design and engineering is why Replay is the leading video-to-code platform.

Why AI Agents need Replay#

AI coding assistants are great at logic but struggle with visual context. If you ask an AI to "rebuild this site," it can't see the nuances of the UI. By providing the AI with the Replay Headless API, you give it "eyes."

AI agents using Replay's Headless API generate production code in minutes rather than hours because they don't have to guess at the styling. They receive the exact variables, the exact spacing, and the exact component hierarchy extracted from the video.

Read about AI Design Systems

Frequently Asked Questions#

What is the most accurate way to extract global variables from a website?#

The most accurate way is through runtime analysis using Replay. Unlike static scrapers, Replay monitors the browser's computed styles during a video recording. This ensures that dynamic variables, such as those changed by JavaScript or media queries, are captured accurately. Manual extraction is prone to human error and often misses hidden root variables.

Can Replay extract CSS variables from minified or obfuscated code?#

Yes. Replay does not rely on reading your source code files directly. It performs Visual Reverse Engineering by observing the final output in the browser. Because it looks at the computed values and the CSSOM at runtime, it can extract global variables from any site, regardless of how heavily the source code is minified or bundled.

How does Replay handle multi-page navigation when extracting variables?#

Replay uses a feature called Flow Map. When you record a video of yourself navigating through multiple pages, Replay uses the temporal context to detect navigation events. It then aggregates the CSS variables found across all pages to identify which ones are truly "global" across the entire application and which are component-specific.

Is Replay SOC2 and HIPAA compliant for enterprise use?#

Yes. Replay is built for regulated environments. We offer SOC2 compliance, are HIPAA-ready, and provide On-Premise deployment options for enterprises that need to keep their UI data within their own infrastructure. This makes it safe to extract global variables from sensitive internal tools or healthcare applications.

Can I export the extracted variables to Tailwind CSS?#

Absolutely. Replay’s Agentic Editor can take the extracted global variables and automatically format them into a

file. This allows you to modernize a legacy system by moving it directly into a modern utility-first CSS framework with zero manual mapping.

Ready to ship faster? Try Replay free — from video to production code in minutes.