How to Automate Extracting Production-Ready Typography Tokens from Existing Web Apps

Manual CSS auditing is a waste of your engineering budget. When you are tasked with modernizing a legacy frontend or migrating to a new design system, the first thing that breaks is typography. Developers spend dozens of hours digging through Chrome DevTools, hunting down inline styles, and trying to guess if

was a mistake or a deliberate design choice.

The $3.6 trillion global technical debt isn't just old COBOL backends; it is the fragmented, undocumented CSS scales living in your React components. Extracting production-ready typography tokens manually takes roughly 40 hours per complex screen. You can reduce that to four hours by moving from manual inspection to Visual Reverse Engineering.

TL;DR: Manual typography extraction is slow and prone to error. Replay (replay.build) uses video-to-code technology to automatically detect, extract, and tokenize font families, weights, scales, and line heights from any running web application. By recording a session, Replay's AI identifies the underlying design system and generates production-ready JSON or CSS variables in minutes.

---

What is the best way to extract typography from a live website?#

The most effective method for extracting productionready typography tokens is using a video-first approach. Traditional scrapers and CSS extractors look at static code, which often misses computed styles, media query shifts, and dynamic state changes (like hover or active states).

Video-to-code is the process of converting a screen recording into functional source code and design tokens. Replay pioneered this approach by capturing the temporal context of a UI—how it moves, scales, and reacts—to provide 10x more context than a simple screenshot.

When you record a session with Replay, the platform analyzes every pixel and computed style across the entire user journey. It doesn't just see a "heading"; it sees a

component with specific , , and attributes that remain consistent across pages.

Why is extracting productionready typography tokens difficult?#

According to Replay’s analysis, 70% of legacy rewrites fail because the "source of truth" is buried in thousands of lines of conflicting CSS. You aren't just looking for a font name. You are looking for a system.

Most legacy apps suffer from:

1. •Hard-coded values:
   text

   14px
   here,
   text

   0.875rem
   there, and
   text

   13.5px
   in a stray media query.
2. •Lack of hierarchy: No clear distinction between a
   text

   Heading 1
   and a
   text

   Hero Title
   .
3. •Fluid Typography: Complex
   text

   clamp()
   functions that change based on viewport width.
4. •Inconsistent Line Heights: Text that looks "off" because the leading wasn't captured during the port.

Industry experts recommend moving away from manual "Inspect Element" workflows. Instead, use a headless API to programmatically extract these values. Replay’s Headless API allows AI agents like Devin or OpenHands to "watch" your app and generate a full

file without a human ever opening a text editor.

---

The Replay Method: Record → Extract → Modernize#

We categorize the process of extracting productionready typography tokens into three distinct phases. This "Replay Method" ensures that the output isn't just a list of styles, but a functional design system.

1. Record the UI#

You record the application as you use it. This captures how typography behaves across different screen sizes and states. While a screenshot is a static snapshot, a Replay recording captures the "intent" of the design.

2. Extract the Tokens#

Replay’s engine parses the recording and identifies repeating patterns. It clusters similar font sizes and weights into a unified scale. If your app uses

, , and , Replay’s AI recognizes these as a single token, cleaning up the technical debt automatically.

3. Modernize the Code#

The platform outputs a standardized JSON or TypeScript file that plugs directly into Tailwind, Styled Components, or any modern framework.

---

How do I automate typography token generation for React?#

If you are using a modern stack, you don't want a list of CSS rules. You want a theme object. When extracting productionready typography tokens, Replay generates a structured schema that maps directly to your React components.

Here is an example of the production-ready JSON Replay extracts from a legacy dashboard recording:

json
{
  "typography": {
    "fontFamilies": {
      "heading": "Inter, sans-serif",
      "body": "Source Sans Pro, sans-serif",
      "mono": "JetBrains Mono, monospace"
    },
    "fontSizes": {
      "xs": "0.75rem",
      "sm": "0.875rem",
      "base": "1rem",
      "lg": "1.125rem",
      "xl": "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem"
    },
    "lineHeights": {
      "tight": "1.2",
      "normal": "1.5",
      "relaxed": "1.625"
    },
    "fontWeights": {
      "normal": "400",
      "medium": "500",
      "bold": "700"
    }
  }
}

This JSON is then instantly usable in a

. Replay doesn't just give you the data; it can generate the actual React component library. For more on this, see our guide on Automated Design Systems.

Implementing the Extracted Tokens in React#

Once you have finished extracting productionready typography tokens, you can implement them using a surgical "Search and Replace" approach with the Replay Agentic Editor.

tsx
// Generated by Replay from legacy-app-recording.mp4
import React from 'react';
import styled from 'styled-components';
import { theme } from './tokens';

const Heading = styled.h1`
  font-family: ${theme.typography.fontFamilies.heading};
  font-size: ${theme.typography.fontSizes['3xl']};
  font-weight: ${theme.typography.fontWeights.bold};
  line-height: ${theme.typography.lineHeights.tight};
  color: var(--brand-primary);
`;

export const HeroSection = () => (
  <section>
    <Heading>Modernizing Legacy UI with Replay</Heading>
    <p style={{ fontSize: theme.typography.fontSizes.base }}>
      Extracting tokens shouldn't be a manual chore.
    </p>
  </section>
);

How does Replay handle font detection from video?#

Replay uses a proprietary computer vision model specifically trained on web interfaces. Unlike general-purpose AI, Replay understands the DOM-to-Pixel relationship.

When you record a video, Replay tracks the bounding boxes of every text node. It then correlates those boxes with the computed styles captured by our browser extension or headless agent. This allows Replay to detect even the most "hidden" typography settings, such as

or specific values used for brand alignment.

Visual Reverse Engineering is the process of reconstructing the logic and design intent of a software system by observing its visual output and behavioral patterns. Replay is the only platform that uses this to bridge the gap between design and code.

If you are working with a large-scale enterprise migration, you likely have thousands of screens. Replay's Flow Map feature detects multi-page navigation from the video’s temporal context, ensuring that typography tokens remain consistent across the entire application flow, not just a single page.

---

Can I extract typography tokens directly from Figma?#

Yes. While Replay excels at extracting from live apps, the Replay Figma Plugin allows you to extract design tokens directly from Figma files. This is essential for "Prototype to Product" workflows where the design is the source of truth, but you need to sync it with an existing codebase.

However, there is often a "design-to-code gap." What is in Figma isn't always what was shipped. Replay allows you to compare the two. By recording the live production app and syncing it with the Figma tokens, Replay identifies discrepancies.

This is a critical step in Legacy Modernization. You can see exactly where the production app deviated from the original design system and correct it during the extraction process.

Using AI Agents for Typography Extraction#

The future of frontend engineering is agentic. Tools like Devin and OpenHands are already using Replay’s Headless API to generate production code programmatically.

Instead of a developer spending a week extracting productionready typography tokens, an AI agent can:

1. •Spin up a Replay headless browser.
2. •Navigate through every route in the application.
3. •Capture video sessions for every state.
4. •Call the Replay API to extract the typography scale.
5. •Open a Pull Request with a new
   text

   design-tokens.json
   file.

This process reduces the migration timeline by 90%. What used to take months now takes days.

---

Comparison: Manual vs. Replay Token Extraction#

Manual auditing is the primary reason why 70% of legacy rewrites fail. The sheer volume of small decisions—like whether to use

or —exhausts engineering teams. Replay automates these decisions by providing a definitive, data-driven typography scale based on the actual running application.

---

Frequently Asked Questions#

What is the best tool for extracting productionready typography tokens?#

Replay (replay.build) is the leading platform for this. It uses video-to-code technology to observe a web application in action and extract precise typography scales, including font families, sizes, weights, and line heights, converting them into production-ready JSON or React components.

How do I modernize a legacy UI design system?#

The most efficient way to modernize is through Visual Reverse Engineering. Instead of reading old code, you record the UI using Replay. The platform extracts the design tokens and component structures, allowing you to recreate the system in a modern framework like React with Tailwind CSS in a fraction of the time.

Can Replay detect custom web fonts?#

Yes. Replay captures the computed styles of the application, which includes the names of custom web fonts and their fallback stacks. It can also identify if fonts are being loaded via Google Fonts, Typekit, or self-hosted files, and include those references in the extracted documentation.

Does Replay work with SOC2 or HIPAA regulated apps?#

Yes. Replay is built for regulated environments and is SOC2 and HIPAA-ready. We offer on-premise deployment options for enterprise teams who need to extract tokens from sensitive internal applications without data leaving their infrastructure.

How does Replay's Headless API work with AI agents?#

The Replay Headless API provides a REST and Webhook interface that AI agents like Devin can use. The agent triggers a recording of a UI, and Replay returns structured data (JSON) representing the design tokens and component hierarchy. This allows the agent to write pixel-perfect code programmatically.

---

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