Skip to content
SOSEI
7 min readBrandDesign SystemWeb Design

Preserving Your Brand During a Full Website Rebuild

A modern rebuild should make your site look like itself, only sharper. How SOSEI extracts colours, logo, typography, and voice from the source site and threads them through every layer of the new build.

The deepest fear most business owners have about a full website rebuild is that they’ll log in on launch day and see a beautiful site that is no longer theirbeautiful site. Generic SaaS template purple. A new logo nobody approved. Copy rewritten in someone else’s voice. It happens often enough in the agency world that the suspicion is rational.

SOSEI is built around the opposite default: the rebuild looks like the original site, only sharper. The colours are your colours. The logo is your logo. The typography is the closest match within a fast-loading, GDPR-clean self-hosted pool. The voice is the voice the site already speaks. Below is exactly how each of those four facets is extracted, validated, and threaded through every page of the new build.

SOURCE SITElogo.svgPlayfair · serifSource Sans · bodyColour visionLogo + rehostType matchingVoice cardNEW BUILDlogo.svgPlayfair DisplayInter — closest match
Four brand facets extracted from the source site, validated, and threaded through every layer of the rebuild.

Colour: the vision pass that catches what CSS misses

Scraping a site for “the brand colours” sounds like parsing CSS. In practice CSS is unreliable: the brand purple may live only on the logo SVG, the buttons may use a darker tint of it, and the largest visual area of the homepage may be a hero background image whose colour appears nowhere in the stylesheet.

SOSEI’s scraper does three passes:

  1. Parse computed colour values from the stylesheet, weight by where they’re used (body text and primary button get more weight than a footer link).
  2. Send the logo image to a Claude Haiku vision model with a tight prompt: “Return 2–3 dominant brand colours from this logo, as hex.” This is the step that catches brand purple when the only place it actually lives is the SVG.
  3. Reconcile both lists. If the CSS-derived and vision-derived palettes agree, that’s the brand. If they diverge, the vision palette typically wins for the primary colour, with CSS providing secondary surface tones.

The output is fed straight into the design-system step, where the primary becomes the button colour, the secondary becomes the accent, and a contrast-tested foreground/muted/surface tone is derived deterministically.

Logo: re-hosted, never hotlinked

Every image on a SOSEI rebuild — including the logo and favicon — is fetched once during the scrape and uploaded to SOSEI’s own Supabase Storage bucket before the AI ever sees a prompt. The generated site references your logo at https://…/site-images/… on SOSEI infrastructure, not at the original source URL.

This has three concrete advantages: the rebuild keeps working if the original site goes offline; load times don’t depend on whoever was hosting the source domain; and the logo can be served in modern formats (WebP / AVIF) with explicit dimensions, removing a common source of layout shift.

Typography: closest match within a 21-font pool

SOSEI ships with a curated pool of 13 heading fonts and 8 body fonts— all self-hosted as subset WOFF2, all licensed for unlimited commercial use, all carefully chosen to span the practical range of brand voices from authoritative serif to friendly geometric sans.

We deliberately don’t support arbitrary Google Fonts. There are two reasons. First, loading from fonts.googleapis.comis a documented GDPR liability — see Self-Hosted Fonts and GDPR. Second, even self-hosting an arbitrary font requires preloading and subsetting work that destroys the “ship in 3 minutes” speed of the rebuild.

When the source site uses a font outside the pool, the planner picks the closest match using a mood-tagged catalog: a site currently on Cormorant Garamond gets Playfair Display; a site on Open Sans gets Inter; a site on Lobster Two gets Caveat. The result feels like the same brand because the register of the typography is preserved, even when the specific face isn’t.

Cormorant GaramondPlayfair DisplayEditorial serifOpen SansInterNeutral sansLobster TwoCaveatHandwrittenBebas NeueOswaldCondensed displaySOURCE FONTSOSEI POOL MATCHREGISTER
Substitution map: source fonts grouped by register, matched to the closest equivalent in the self-hosted pool.

Voice: the “voice card” that anti-drifts the AI

The most subtle facet of brand — and the easiest to lose — is voice. A site that says “we’ve been crafting concrete garden ornaments by hand in our Tartu workshop since 1987” speaks a different language from one that says “Concrete Solutions for Modern Spaces.” If the rebuild rewrites the first version into the second, the customer feels alienated even if they can’t name what changed.

SOSEI’s pipeline addresses this with a dedicated voice card step. After scraping, before any page is written, the model produces a single JSON document that captures:

  • Tone register (formal / conversational / playful / authoritative).
  • Sentence rhythm (long / short / mixed).
  • Person (first-person plural “we” vs third-person).
  • Recurring phrases the source site uses (kept where possible).
  • Phrases the source site avoids (kept avoided).
  • Vocabulary register (everyday / technical / industry jargon).

That document is then passed as a frozen contract into every parallel per-page copywriting call. Without this step, ten pages written in parallel by an LLM drift apart subtly — one formal, one cheerful, one corporate. With it, every page sounds like the same business wrote it.

What if the source site has no clear brand?

Many older sites genuinely don’t have a strong brand — five years of incremental edits have left an unclear logo, no consistent colour, and stock-template typography. In that case the rebuild uses a starter palettedrawn from SOSEI’s catalog of industry-typical colour systems (concrete manufacturing gets warm greys, dental clinics get soft teals, legal services get navy and gold). The result is a coherent brand the owner can recognise as appropriate to their industry, even when the original site offered no clear signal.

Bottom line

Modern AI is the first technology that makes “keep your brand, modernise everything else” mechanically possible. Pre-AI agencies either preserved the brand and ignored every modern best practice, or modernised everything by throwing the brand out. SOSEI’s pipeline preserves brand at four distinct layers — colour, logo, typography, voice — precisely so the rebuild feels like the same business, only the version that ships in 2026 instead of 2018.

Curious what the pipeline would do with your specific site? Start a project and you’ll see the extracted brand — colours, fonts, logo — surfaced in your dashboard before the first page is generated.

Stop losing customers to a 2018 website.

Every day on outdated tech is leads walking past your front door. Get the free 40-point audit — see exactly what's broken across SEO, AI-discoverability, WCAG, GDPR, mobile, performance, and design. No signup. Results in seconds.

See your site's score