Layout Designer
Customizer
Preview
Preview Content
This is a preview of how your customizations will look. The content updates in real-time as you make changes.
Live Preview
Welcome to the Preview
This is a live preview of your design customizations. All changes will be reflected here in real-time.
Sample Content
Preview how your typography, spacing, and colors work together in a real context.
Interactive Elements
Test hover states, animations, and other interactive features.
Body Typography
Heading Typography
Typography Preview
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Large paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Small text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Bold text example
Italic text example
Underlined text example
Strikethrough text example
Theme Colors
Text Colors
Background Colors
Color Preview
Sample Components
Preview how your color scheme looks in actual components and typography.
Dark Mode Preview
See how your colors appear on dark backgrounds.
Margin
Padding
Spacing Presets
Spacing Preview
Sample Content
This box demonstrates the spacing settings you've applied. Adjust the controls to see how margin and padding affect the layout.
Button Styles
Input Styles
Card Styles
Component Preview
Buttons
Inputs
Cards
Card Title
Card content with some sample text to show how it looks.
Dark Card
Alternative card style with dark background.
Export Settings
Export Format
Optimization
Preview
:root {
--primary-color: #000000;
--text-color: #1f2937;
--background-color: #ffffff;
--font-family: 'Inter', sans-serif;
--spacing-unit: 1rem;
}
.button-primary {
background-color: var(--primary-color);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
}
/* Additional styles... */