Design System
View and understand the visual language extracted from your video.
Overview
When you generate UI from video, Replay's AI extracts a complete design system including colors, typography, spacing, and component patterns. The Design System panel shows these extracted values so you can understand and maintain consistency.
What's Extracted
Colors
- Primary brand colors
- Background colors
- Text colors
- Accent/highlight colors
- Border colors
Typography
- Font families
- Heading sizes
- Body text sizes
- Font weights
- Line heights
Spacing
- Padding values
- Margin values
- Gap/gutter sizes
- Section spacing
Components
- Button styles
- Card layouts
- Input fields
- Navigation patterns
How to Access
Click the "Design System" tab in the top toolbar after generating your UI. The panel shows all extracted design tokens.
Using Design Tokens
The extracted design system is automatically applied when you use Edit with AI. New pages and components will match your existing visual language.
// AI uses your design system
"Add a contact form"
→ Form will use your button styles, input styles, and colors
Import Design System
Import your existing Design System from Figma, Storybook, or manually. Replay extracts tokens (colors, typography, spacing, border radius) and applies them consistently across all generated code.
Figma Plugin
Install the Replay.build — Design System Sync plugin from the Figma Community. Open any Figma file with your design system, enter your API key, and click Extract. The plugin scans all pages for:
- Paint styles and color variables (including alias resolution)
- Text styles with font family, size, weight, and line height
- Effect styles (drop shadows, layer blur)
- Spacing and border radius variables
- Component sets with variants and properties
Preview Tokens
Click the Eye icon next to any imported Design System in the style dropdown to preview its tokens before selecting. The preview modal shows color swatches, typography samples, spacing scale, border radius, shadows, and component list.
How DS Overrides Work
// When DS is selected:
DS colors override video-detected colors
DS typography replaces default Inter font
DS spacing tokens used for all layout
→ Layout and content come from video, styling from your DS
→ Works with both Reconstruct and Reimagine modes
Style Injection
Want a completely different look? Use Style Injection presets to transform your design: