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
You can import an external Design System from any Storybook URL. Replay extracts tokens (colors, typography, spacing, border radius) and applies them consistently across all generated code.
// When DS is imported:
DS colors override video-detected colors
DS typography replaces default Inter font
DS spacing tokens used for all layout
→ Consistent branding across header, content, sidebar, and footer
Style Injection
Want a completely different look? Use Style Injection presets to transform your design: