Sync Your Design System After a Rebrand

You've shipped a rebrand. Your main website has a new logo, colors, typography, and component styles, but your existing Flint pages still use the old design.

To preserve those pages, first give Flint a strong reference for the new brand. You can import a complete rebranded page or attach structured source files in chat, then prompt Flint to migrate your existing pages using that reference. Review the results and refine any remaining differences before publishing.

If you want a completely new Flint site instead, contact the Flint team for a fresh import.

When you rebrand, you have two paths in Flint:

Keep your existing pages

Bring the new design into your current Flint site by importing a representative rebranded page or attaching structured source files in chat. Then prompt Flint to migrate each existing page using that material as the reference. You keep the content and page strategy you already have, while reviewing and refining the new design page by page.

Start a completely new site

Contact your Flint representative or email support@tryflint.com to request a fresh import. This creates a new Flint site based on the rebranded experience. A fresh import does not include migrating pages from your old Flint site into the new one.

Choose the first path when you need to preserve existing pages. Choose the second when you want a clean start and do not need the old pages moved over.

A useful reference shows Flint how the new brand works in practice. It can include:

• •A complete rebranded page - Import a page that represents the new design well, including its typography, spacing, components, and responsive layout
• •HTML and CSS files - Attach component markup and styles directly in Flint chat
• •Markdown or text files - Attach brand tokens, usage rules, typography guidance, or component specifications
• •Multiple related files - Combine source files when the design system is spread across several documents
• •Brand assets - Include the new logo, icons, imagery, or other files that must be used exactly

An imported page and structured source files can both provide high-fidelity references. You can also combine them, using the imported page for the rendered design and attached files for exact tokens and rules.

For a high-fidelity reference, import a complete page from your rebranded site. You can use Flint's Import Page feature or start the import directly in chat by prompting "Import the page at [URL]." Choose a page that clearly demonstrates the new typography, colors, spacing, buttons, cards, navigation, and section patterns. The video below shows the Import Page process.

You can instead attach structured source material in Flint chat. HTML containing component styles can work well, as can CSS, Markdown brand-token files, component specifications, and other supporting documents. Attach multiple files together when they describe different parts of the system.

Example prompts:

• •"Import the page at [URL]."
• •"Use the imported rebranded homepage as the design reference for this site. Migrate this page to the new design while preserving its content and links."
• •"I attached our component HTML, CSS, and Markdown brand tokens. Use them together as the source of truth for the new design, then update this page to match."
• •"Use the imported page for layout and component styling, and use the attached brand guidelines for exact colors and typography rules."

An imported page and structured files offer a similar level of fidelity when they contain enough detail. Combining them gives Flint both a rendered example and exact implementation guidance.

Screenshots are useful when you cannot import a page or provide structured files. Share full sections or full-page captures that show the new design in context, along with the new logo and any exact color or font details you have.

Screenshots provide less fidelity than an imported page or structured source files. They show the appearance, but not the underlying responsive behavior, reusable component rules, or exact token values. Expect to give Flint more specific follow-up prompts and refine more loose ends yourself.

Example prompt:

"Use these screenshots as the reference for the new brand. Update this page to match the typography, colors, spacing, buttons, and section treatments. Preserve the existing content and links."

For better results, capture complete sections, include both desktop and mobile examples when available, and provide exact brand assets rather than asking Flint to recreate them from a screenshot.

Once the reference is available in Flint, open an existing page and tell Flint which imported page or attached files to follow. Work through pages individually so you can review each result.

Example prompts:

• •"Migrate this page to the new design using the imported rebranded homepage as the reference. Keep the current copy, images, links, and page structure."
• •"Update the hero, feature sections, and CTA to use the component styles from the imported page. Preserve this page's content."
• •"Apply the attached HTML and brand-token files to this page. Use the HTML for component styling and the Markdown file for exact colors and typography."

If the rebrand includes several component variants, name the reference for each section. For example, ask Flint to use the dark hero from one imported page and the light CTA from another.

Migration is a guided process, not an automatic sitewide conversion. After Flint applies the reference, review the page and prompt targeted corrections for any loose ends.

Examples:

• •"The button radius and label weight still do not match the imported page. Update them to use the same treatment."
• •"The mobile spacing in this hero is too tight. Match the mobile layout from the imported reference."
• •"This card still uses the old accent color. Use the accent token from the attached Markdown file."
• •"Replace the old logo in this page's navigation and footer with the attached logo file."

Start with your highest-traffic pages and work outward. Focused requests are easier to verify than a broad request to update every page at once.

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.

Choose a representative reference

Import a page that shows the breadth of the new system, or attach files that describe the components and tokens clearly. Add more references when one page or file does not cover an important variant.

Combine rendered and structured references

Use an imported page to show the final design and attach HTML, CSS, or Markdown files for exact rules. Tell Flint which source should control each decision.

Treat screenshots as a lower-fidelity fallback

Screenshots work when no structured reference is available, but plan for more review and refinement.

Use exact assets and values

Attach the actual logo file and provide exact color values, font names, and weights when they matter.

Migrate and verify one page at a time

Start with high-traffic pages, compare each result with the reference, and correct loose ends before moving on.