Skip to content

Velocity X Workflow

Re-Branding a Whole Website in 2 Hours — Velocity X's brand.json Swap Pattern

Edit JSON, drop logos, ship a new brand. No code rewrites.

🎨 💨

The agency rebrand is a staple of the web industry. You pay $40,000. You wait eight weeks. You get met with 47 design comp variations. By the time the site ships, your brand identity has drifted twice. You've re-trained half your marketing team on the new copy. And you're not even sure you like it.

Velocity X kills that dynamic. We ship a brand-swap pattern that lets you rebrand your entire website — visuals, copy, navigation, colours, logos, every value — in 120 minutes. No code changes. No Astro edits. Just JSON + logo uploads.

The Rebrand Industry Wastes 40k and 8 Weeks

Typical agency rebrands follow this timeline: weeks 1–2, strategy workshops (which no one attends fully). Weeks 2–4, design comps (the art director's interpretation of vibes, not your strategy). Weeks 4–6, development (realising mid-build that a "design" doesn't translate to HTML). Weeks 6–8, QA and client tweaks (which always arrive in the final days).

The cost structure mirrors the timeline: strategy retainer, design hours, dev hours, project manager overhead. By the time the bill lands, you've paid for 200+ hours of labour to swap some words and colours.

The stupider part? Most of those hours are **repetitive**. You're changing the business name in the footer, the logo in the header, the company address in the contact form, the nav links, the pricing page heading. Every value is scattered across 50 template files. One typo in one copy block, and you missed it.

Velocity X centralises everything into one file. Change it once. The whole site changes.

How brand.json Makes Rebranding Instant

Every brand-specific value in a Velocity X site lives in a single JSON file at the root: `brand.json`. No exceptions.

Every page, every component, every footer link reads from this file. When you update `brand.json`, the entire site re-renders with the new values. It's a single source of truth. Like Zod schemas for data validation, but for brand identity.

Here's what brand.json holds (check the full schema reference for every field):

Business block: Company name, tagline, address, contact emails, social links, logos. Everything the footer and header need.

Product block: Service names, pricing tiers, tier descriptions, features array, creator credentials. Everything the pricing page and hero slider need.

Theme block: Primary hue (any Tailwind colour — violet, cyan, rose), dark mode default, accent colour.

Navigation block: Primary nav links, CTA button label.

SEO block: Title suffix, meta description, Open Graph settings.

CTA and pricing blocks: Form headlines, submission labels, currency, legal links.

That's the shape. Fill it in once, and every component reads from it. A blog post references `brand.json` to know what to call your company. The pricing page reads `product.tiers`. The footer pulls `business.address`. The header swaps logos based on `theme.isDark`. No hardcoding. No scattered strings. Everything flows from JSON.

The 5-Step Rebrand Checklist

Step 1: Edit brand.json (30 minutes). Open the file. Change business.name, business.address, business.contact. Update all social URLs. Paste the new company tagline. Update product pricing and tier descriptions. Edit the CTA form headline. Done.

Step 2: Drop new logos (5 minutes). You need three SVG files: primary logo (colour), white logo (for dark backgrounds), black logo (for light backgrounds). Drop them in `public/`. Update the paths in `brand.json` under `business.logos`.

Step 3: Pick a theme hue (2 minutes). Change `theme.primaryHue` to any Tailwind colour: cyan, purple, rose, amber, green, whatever fits the new brand. The whole site recolours instantly.

Step 4: Run the build (10 minutes). `npm run build`. Wait for it to finish. No errors? Ship it.

Step 5: Verify in browser (10 minutes). Hit the live site (or localhost if testing locally). Scan the header, footer, pricing page, hero slider. Check that every brand value rendered correctly. Logos load? Company name in the right place? Navigation links working? All good? Merge to main.

Total time: **60 minutes**. Add buffer for double-checking and unexpected logo path issues: **90 minutes**. You're still well under two hours.

The Real-World Example: aidxn.com → Rebuild Relief

When Rebuild Relief (insurance claims handling, QLD) wanted to use Velocity as their internal staff tool, I didn't rebuild the site. I forked it, changed brand.json, and deployed in 90 minutes.

Started with the Aidxn Design version (personal branding, violet theme, design-engineering copy). Needed the Rebuild Relief version (professional branding, teal theme, insurance-claims tone).

The edits:

Business block: Aidxn Design → Rebuild Relief. Changed address from Gold Coast to the correct office location. Updated contact email. Replaced social links (a professional service doesn't lean on Instagram). Added new GA4 ID and Web3Forms key for Rebuild Relief's account.

Product block: Velocity X (personal brand product) → claims-handling workflows (business offering). Rewrote tier names (no longer about website packages; now about case volume and dashboard features). Updated feature descriptions. Repriced tiers.

Theme block: Violet → teal (professional, calm, insurance-appropriate). Dark mode default off (business prefers light UI). Adjusted accent colour to a teal shade.

Navigation: Removed "Blog" link (business site doesn't have a blog). Rephrased CTA button from "Enquire" to "Get Started".

Logos: Replaced all three (primary, white, black) with Rebuild Relief brand SVGs. Updated favicon.

Result? The site went from Aidxn Design to Rebuild Relief visual and textual identity in one commit. Every component updated automatically. No template edits. No re-rendering. No merge conflicts. Just JSON.

What Each Component Reads From brand.json

To understand the power of the pattern, here's what reads from brand.json across different page sections:

Header: `business.logos.primary` (light mode), `business.logos.white` (dark mode). `navigation.primary` array for nav links. `navigation.cta` for the enquire button.

Footer: `business.copyrightLine`, `business.address`, `business.contact.email`. `footer.legal` array for privacy/terms links.

Hero slider: `product.name`, `product.tagline`, `product.subtitle` (if present). `product.price` and `product.priceLabel`.

Pricing page: `product.tiers` array — each tier pulls name, tagline, price, audience, highlights, Stripe URL.

Feature grid: `product.features` array — icon, name, description, tier label (controls colour).

CTA forms: `cta.default.headline`, `cta.default.subtext`, `cta.default.submitLabel`.

Blog posts: Reference `brand.json` via Astro's data loader (`loadBrand()`) to pull company name, social links, contact URL. Consistent footer copy across all posts without manual duplication.

Meta tags: `seo.defaultTitleSuffix` appears on every page title. `seo.defaultDescription` is the fallback meta description. `business.ogImage` is the social share image.

Not a single value hardcoded into a template. Every piece of content flows from JSON.

Six FAQs About the Pattern

Q: What if I need different copy per page?
A: You can. Category pages and item pages live in separate JSONs (`category-pages/*.json` and `item-pages/*/*.json`). Those can override defaults from `brand.json`. But the global brand values (business name, address, theme) stay in `brand.json`.

Q: Can I A/B test different brand values?
A: Yes. Keep two versions of `brand.json` (e.g., `brand-v1.json`, `brand-v2.json`). Have your Astro config load from whichever one is active. You could even wire it to an environment variable: load from `brand-${process.env.BRAND_VERSION}.json`. Swap it in CI/CD to test.

Q: What about localisations? Different copy per country?
A: One approach: multiple brand.json files per region (`brand-au.json`, `brand-us.json`, `brand-uk.json`), loaded via URL locale prefix. Another: keep one brand.json and use i18n keys in templates. Both work with Astro.

Q: How do I validate brand.json before shipping?
A: Use JSON Schema + ajv (see the schema reference post for a sample). Add a lint script (`npm run lint:brand`) that runs `ajv validate` before every build. Catch missing fields instantly.

Q: Can I edit brand.json via an admin UI instead of hand-editing JSON?
A: Yes. Build a Next.js or Remix endpoint that reads/writes `brand.json`. POST a form, it writes the file, triggers a rebuild. Same as a CMS, but simpler. No database. No schema drift. JSON is the database.

Q: How do I keep brand.json in sync with the rendered site?
A: Add a test in your CI that reads `brand.json` and verifies critical values appear on the rendered pages (e.g., business.name in footer, product.price on pricing page). If the rendered site drifts from JSON, the test fails. Prevents stale builds.

The Bottom Line

Rebranding doesn't need eight weeks and $40,000. It doesn't need 50 design comps or three rounds of client feedback. Velocity X proves that a well-structured JSON file and a solid template can swap a brand identity in 120 minutes.

The pattern works because it treats brand values like data, not like scattered template strings. One source of truth. One file to edit. Everything else flows downstream.

Next time you fork Velocity for a new business, fill in brand.json, drop new logos, pick a theme hue, and hit deploy. You'll ship a full rebrand before lunch. And you'll never go back to the eight-week, $40k agency grind.

Let us make some quick suggestions?
Please provide your full name.
Please provide your phone number.
Please provide a valid phone number.
Please provide your email address.
Please provide a valid email address.
Please provide your brand name or website.
Please provide your brand name or website.