Sync Your Design System After a Rebrand

You've shipped a rebrand. New logo, new colors, new typefaces, maybe a new visual language entirely. Your main website is updated. But your Flint pages still reflect the old brand.

Flint's design system is extracted from your live site during onboarding and stored as a set of tokens and component patterns. When your brand changes, those tokens need to be refreshed so that new pages and edits stay consistent with your updated identity.

Before diving into the how, there is one important decision to make first.

When you rebrand, you have two paths in Flint:

Path A: Fresh import (recommended for significant rebrands)

If you are not attached to the pages you currently have in Flint, the cleanest option is to ask the Flint team to kick off a new brand import on a fresh site. This gives you a clean slate with your new design system fully applied from the ground up, without any residue from the old brand.

To do this, reach out to your Flint contact or email support@tryflint.com. The team will work with you to set up a new import and migrate any content you want to carry over.

Path B: In-place update (when you want to keep existing pages)

If you have pages in Flint you want to preserve, the path is prompting. You will share your new brand assets with Flint through chat and update the design system and existing pages iteratively. The rest of this guide covers how to do that well.

Choose Path A if the rebrand is substantial and you are starting fresh with page strategy. Choose Path B if you have a library of pages actively driving traffic that you cannot afford to rebuild from scratch.

When Flint imports your brand, it captures:

• •Colors - Primary, secondary, accent, background, and text colors
• •Typography - Font families, weights, sizes, and line heights
• •Spacing and layout - Grid structure, padding, and margin conventions
• •Component patterns - Button styles, card layouts, nav structure, hero formats
• •Assets - Logo files, icon sets, and brand imagery

All of this is used to constrain what Flint generates. New pages inherit these tokens automatically. After a rebrand, the underlying tokens need to reflect your new system.

Screenshots are the most reliable and credit-efficient way to communicate your new brand to Flint. Capture your updated site or design mockups and paste them directly into chat.

What to capture:

• •A full-page or above-the-fold screenshot of your new homepage
• •A screenshot showing your primary CTA button, a heading, and body text together
• •Your new logo (as an image attachment)
• •Any other pages that show the new brand at its clearest: a features page, a pricing page, a component-heavy section

Example prompts:

• •"Here are screenshots of our rebranded site [paste images]. Update the design system to match: new primary color, new fonts, new button style."
• •"This is our new homepage [screenshot]. Use this as the reference for all brand tokens going forward."
• •"New logo attached. Replace the old one in the nav and footer across all pages."

Tips for useful screenshots:

• •Include solid color blocks rather than gradients where possible so Flint can read colors accurately
• •Capture the full section, not just a cropped sliver
• •If your brand has a light and dark mode, capture both

Expect to refine after the first pass

Even with good screenshots, the initial brand copy is a starting point, not a finished result. Flint will get the broad strokes right: primary color, font family, general layout feel. But subtler details like exact color shades, font weight hierarchy, spacing rhythm, or component-level nuances often need a follow-up round.

After the first sync, review your pages and prompt targeted corrections:

• •"The button border radius looks too sharp compared to our brand. Round it a bit more."
• •"The heading weight should be heavier, closer to what you see in the screenshot I sent."
• •"The background color is slightly off, it should be warmer. Try #F7F3EE."

Think of the screenshot sync as the 80% pass. The remaining 20% comes from iterating on specific elements once you can see the result in context.

If your rebranded site is already live, Flint can open a browser session and observe your pages directly. This is useful when the new design is complex or spread across multiple sections that are hard to capture in a single screenshot.

Example prompts:

• •"Visit [your-domain.com] and pull the updated design system from there. Focus on the homepage and the pricing page."
• •"Visit [your-domain.com/brand] and update our design tokens to match what you see there."

Flint will navigate the site, observe the visual system, and apply the findings to your workspace.

Credit cost: The live browser tool uses more credits than a screenshot. Use it when your new brand is complex or when screenshots are not giving you enough fidelity. For most rebrands, screenshots are faster and sufficient.

If your design system is documented in code or a spec sheet, you can share that directly in chat. Flint understands CSS, HTML, and plain text brand specs.

Note: Flint does not currently support attaching files like .css, .html, or .md in the chat. The way to share this content is to copy and paste it directly into the message.

Example prompts:

• •"Here are our new brand tokens in CSS variables: [paste CSS]. Update the design system to match."
• •"New brand colors: primary is #1E3A5F, accent is #F4A261. New typeface is Inter for body, Sora for headings. Apply these."
• •"Here is our updated component HTML for the primary button: [paste HTML]. Use this as the new button pattern."

What to include for best results:

• •Primary, secondary, and accent colors as hex values
• •Font names and weights
• •Button styles (border radius, padding, label casing)
• •Any CSS custom properties from your updated stylesheet

Partial updates are fine: You do not need to provide a complete spec. Tell Flint which parts changed and it will update only those.

Refreshing the design system updates the baseline for new pages, but existing pages may still carry old values. Here is how to bring them current through prompting.

Update a specific page:

Open the page in Flint and prompt:

"This page still uses the old brand colors. Update it to match the new design system."

Update a specific element:

"The hero section on this page uses the old font. Update it to use [new font name]."

Replace the logo sitewide:

"Here's the new logo file [attach image]. Replace the old logo in the nav and footer on all pages."

What to expect: Pages built before the rebrand may need targeted prompts to catch every instance. Start with your highest-traffic pages and work outward. Small, focused requests are easier to verify than sweeping global updates.

Once the design system is updated, verify the result before publishing.

Spot-check key pages:

Open your most-visited pages and compare them against the new brand. Look for:

• •Correct primary and accent colors on buttons, links, and highlights
• •Updated typography with the right font families and weights
• •New logo rendering correctly in nav and footer
• •Images and illustrations consistent with the new visual tone

Check edge cases:

• •Dark mode variants if your brand supports them
• •Mobile layout with updated type sizes
• •Email capture forms or CTAs that may have had branded colors hardcoded

If something looks off:

Paste a screenshot of the problem into chat with a specific description:

"The accent color on this card is still the old orange. Update it to the new coral (#E85D4A)."

Focused, targeted corrections are faster than re-running the full sync.

Decide your path before you start

If the rebrand is significant and you are not attached to existing pages, ask the Flint team to kick off a fresh import. Trying to update a heavily-built site through prompting alone can take much longer than starting clean.

Use screenshots before the browser tool

Screenshots are free to use and fast to process. Save the live browser tool for situations where the new brand is particularly complex or where screenshots are not capturing enough detail.

Use hex values for critical colors

Color names like "our new teal" are ambiguous. Hex values like #2D9CDB are not. When specifying new brand colors, always use hex codes.

Update the logo as a file, not a description

Flint can infer a lot from descriptions, but logos are precise. Attach the actual image file rather than describing the new mark in words.

Keep a record of what changed

List out what is new in the rebrand before starting the sync: colors, fonts, logo, component changes. This gives you a checklist to verify against once the update is done.