Design System Extraction

When you connect your website to Flint, we automatically extract your brand's design system. This includes colors, typography, spacing, and visual patterns that make your brand recognizable.

This extraction process ensures that every page you create in Flint looks like it belongs on your website, without manual style configuration.

Flint analyzes your website and extracts:

• •Primary, secondary, and accent colors
• •Typography: font families, sizes, weights, and line heights
• •Spacing patterns: margins, padding, and gaps
• •Border radius and shadow styles
• •Button and link styles
• •Header and footer patterns

This creates a comprehensive design token library that the AI uses when building new pages.

When you provide your website URL during setup:

1. 1.Flint crawls your homepage and key pages
2. 2.Our AI analyzes the visual design patterns
3. 3.Design tokens are extracted and organized
4. 4.A Tailwind configuration is generated with your brand colors and styles
5. 5.Component templates are created matching your visual language

This entire process happens automatically in seconds.

Your brand evolves, and Flint can keep up. If you update your main website's design:

1. 1.Go to your site settings in Flint
2. 2.Click "Re-sync design system"
3. 3.Flint will re-analyze your website and update the extracted tokens
4. 4.New pages will use the updated styles

Existing pages won't automatically update - this gives you control over when to roll out design changes.

Design system extraction is what makes Flint different from generic page builders. Instead of starting from a blank template or a generic theme, every page you create already looks like your brand.

This means: - Faster page creation (no manual styling) - Consistent brand experience across all marketing pages - No design drift over time - Your team can create pages without design skills