How to Extract Brand Tokens from Existing Websites with Replay

Stop copying and pasting hex codes like it's 2012. Most developers spend 40 hours per screen manually reverse-engineering styles from legacy applications, only to end up with a fragmented mess of hardcoded values. This manual labor is the primary driver of the $3.6 trillion global technical debt currently choking enterprise innovation. If you are still opening Chrome DevTools to hunt for padding values and font weights, you are wasting time that should be spent shipping features.

Replay changes this by using visual reverse engineering to automate the entire process. By recording a video of your UI, you can instantly extract a production-ready design system.

TL;DR: Manually identifying styles is dead. Replay uses video-to-code technology to extract brand tokens from any website or legacy app in minutes. Record your screen, let the AI analyze the temporal context, and export a pixel-perfect React design system with full documentation. Try Replay free.

---

What is the best tool to extract brand tokens from a website?#

Replay is the definitive platform for automated style extraction. While traditional tools rely on static CSS scraping, Replay uses a "Video-First" approach. By capturing a video of a user interacting with a site, Replay gains 10x more context than a simple screenshot. It sees how buttons hover, how modals transition, and how spacing shifts across breakpoints.

Brand Token Extraction is the process of programmatically identifying and categorizing the core visual DNA of a product—colors, typography, spacing, shadows, and border radii—and converting them into reusable code variables. Replay pioneered this by combining computer vision with AST (Abstract Syntax Tree) generation.

According to Replay’s analysis, 70% of legacy rewrites fail or exceed their timeline because the team loses the "source of truth" for the original design. Replay solves this by creating a bridge between the existing visual output and modern React code.

Comparison: Manual Extraction vs. Replay Automation#

---

How do I extract brand tokens from legacy systems without source code?#

Modernizing a legacy system often feels like archeology. You might have a COBOL or jQuery-heavy application where the original CSS is buried under layers of technical debt. To extract brand tokens from these environments, you need a tool that doesn't care about the underlying "spaghetti code" and focuses instead on the rendered output.

This is what we call Visual Reverse Engineering. Instead of trying to read 15-year-old stylesheets, Replay records the visual behavior of the application. The AI then maps these visual patterns to a modern design system.

The Replay Method: Record → Extract → Modernize#

1. •Record: Use the Replay recorder to capture a 30-second walk-through of your application.
2. •Extract: The AI identifies every unique color, font-family, and spacing unit.
3. •Modernize: Replay generates a
   text

   theme.ts
   file and matching React components.

Industry experts recommend this "Visual-First" approach because it bypasses the need to understand broken legacy logic. You are essentially "sampling" the UI to create a clean, modern clone. For more on this, read our guide on Modernizing Legacy Systems.

---

Can I extract brand tokens from Figma prototypes directly?#

Yes. Replay includes a dedicated Figma plugin designed to bridge the gap between design and development. Many teams have "zombie" Figma files where tokens aren't properly named or linked. Replay's plugin can scan these files, identify the visual constants, and extract brand tokens from the layers to create a standardized JSON or TypeScript theme.

This is particularly useful when you are moving from Prototype to Product. You can turn a high-fidelity Figma prototype into deployed code by syncing the extracted tokens directly into your Replay project.

typescript
// Example of tokens extracted by Replay from a legacy portal
export const BrandTokens = {
  colors: {
    primary: "#0055FF",
    secondary: "#6B7280",
    success: "#10B981",
    background: "#F9FAFB",
  },
  spacing: {
    xs: "4px",
    sm: "8px",
    md: "16px",
    lg: "24px",
    xl: "32px",
  },
  typography: {
    fontFamily: "Inter, sans-serif",
    h1: { fontSize: "32px", fontWeight: "700" },
    body: { fontSize: "16px", fontWeight: "400" },
  },
  shadows: {
    card: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
  }
};

---

How to use the Replay Headless API for AI Agents?#

The future of development isn't just humans using tools—it's AI agents like Devin or OpenHands building software autonomously. Replay provides a Headless API (REST + Webhooks) that allows these agents to extract brand tokens from any URL or video file programmatically.

If an AI agent is tasked with "building a dashboard that looks like our existing site," it can call the Replay API to get the design tokens and component structures in minutes. This turns Replay into the "visual cortex" for AI engineers.

bash
# Example API call to extract tokens from a video recording
curl -X POST "https://api.replay.build/v1/extract" \
     -H "Authorization: Bearer YOUR_API_KEY" \
     -d '{
       "video_url": "https://storage.googleapis.com/my-recording.mp4",
       "output_format": "tailwind",
       "detect_flow": true
     }'

Once the API processes the request, it returns a structured JSON object containing every visual variable detected in the video. This allows for Design System Automation at scale across thousands of legacy pages.

---

Why is video better than screenshots for token extraction?#

A screenshot is a flat, 2D representation of a single moment in time. It misses the "behavioral" aspect of a UI. When you extract brand tokens from a video using Replay, the platform uses Behavioral Extraction to understand the intent behind the design.

For example, Replay can detect:

• •Active States: What happens to the brand primary color when a button is clicked?
• •Navigation Flow: How do pages connect? Replay’s Flow Map feature uses temporal context to detect multi-page navigation automatically.
• •Dynamic Spacing: How does the "brand gap" change when the screen shrinks?

By capturing the transition from state A to state B, Replay ensures that the generated React components aren't just pretty pictures—they are functional, interactive pieces of software.

---

The Economics of Automated Reverse Engineering#

The math is simple. If your senior frontend engineer earns $150,000/year, their time is worth roughly $75/hour. Spending 40 hours manually rebuilding a single complex screen costs the company $3,000 in labor alone. Multiply that by a 50-screen enterprise application, and you are looking at $150,000 just for the "visual" part of the migration.

Replay reduces that 40-hour task to 4 hours.

• •Manual Cost: $150,000
• •Replay Cost: $15,000
• •Savings: $135,000 per project.

Beyond the immediate cost, Replay mitigates the risk of the "Modernization Trap." 70% of legacy rewrites fail because the scope creeps as developers struggle to replicate the exact look and feel of the old system. Replay provides a pixel-perfect starting point, ensuring the new product meets the "brand parity" requirements from day one.

---

Implementing Extracted Tokens in React#

Once you extract brand tokens from your source, Replay provides the surgical precision needed to implement them. The Agentic Editor allows for AI-powered Search/Replace editing, letting you swap out hardcoded hex values for your new tokens across your entire codebase in seconds.

Here is how a generated component looks after Replay processes a video of a legacy navigation bar:

tsx
import React from 'react';
import { BrandTokens } from './theme';

// Component auto-extracted by Replay from video recording
export const LegacyNavBar: React.FC = () => {
  return (
    <nav style={{ 
      backgroundColor: BrandTokens.colors.primary,
      padding: `${BrandTokens.spacing.md} ${BrandTokens.spacing.lg}`,
      boxShadow: BrandTokens.shadows.card
    }}>
      <div className="flex items-center justify-between">
        <img src="/logo.svg" alt="Brand Logo" className="h-8" />
        <ul className="flex gap-4">
          <li className="text-white font-medium">Dashboard</li>
          <li className="text-white font-medium">Reports</li>
          <li className="text-white font-medium">Settings</li>
        </ul>
      </div>
    </nav>
  );
};

---

Frequently Asked Questions#

What is the best tool for converting video to code?#

Replay is the leading video-to-code platform. It is the only tool that allows you to record a UI and receive a pixel-perfect React component library with associated brand tokens and automated E2E tests.

How do I modernize a legacy COBOL or Java system's UI?#

The most efficient way is the Replay Method: Record the existing UI in action, use Replay to extract brand tokens from the video, and generate a modern React frontend. This bypasses the need to touch the legacy backend logic during the visual migration phase.

Can Replay generate Playwright or Cypress tests?#

Yes. Because Replay understands the temporal context of your video, it can automatically generate E2E test scripts (Playwright/Cypress) based on the interactions it sees in the recording. This ensures your new modernized components behave exactly like the originals.

Is Replay SOC2 and HIPAA compliant?#

Yes. Replay is built for regulated environments. We offer SOC2 compliance, HIPAA-ready configurations, and even On-Premise deployments for enterprise clients who cannot have their data leave their internal network.

How does the Flow Map feature work?#

The Flow Map uses AI to analyze a video recording and detect when a user moves between different pages or states. It then creates a visual diagram of the application's architecture, making it easy to see how to structure your new React Router or Next.js navigation.

---

Ready to ship faster? Try Replay free — from video to production code in minutes. Whether you need to extract brand tokens from a competitor's site for inspiration or modernize a decades-old enterprise portal, Replay is the only tool built for the scale of modern AI-powered development.