Forking a design system into another site

I didn’t start this personal site from a blank page. I lifted the entire design kernel from the Langfu corporate site and swapped only the brand color and the content — this is a record of what that fork actually involved: what went smoothly, and what didn’t.

A fork isn’t copy-paste

Cloning a repo and find-and-replacing strings around it is copying, not forking. A real fork treats the kernel as an already-proven system and relocates it: the architecture decisions stay put, only the shell changes. That’s also why the kernel had to be single-source before any of this was possible — all color in CSS tokens, all copy in an i18n table, no component hard-coding a string. Otherwise “just swap the shell” is an empty claim, and you end up combing the whole repo for a hard-code that never got flagged.

Three files, plus one exception

Most of the rebrand really did land on three files: color tokens, the i18n copy table, and the site config. The original used an orange “heat” signal system; Kikoman swapped it for neon violet:

--color-signal: #a855f7; /* defined once */

Change that one line and every link, active state, CTA and hero effect across the site follows, because they all read the same token — there’s no second hard-coded copy to chase down by hand.

But the fork did turn up one straggler: the script that generates the Open Graph share image (scripts/make-og.mjs) is a standalone Node script that builds a raw SVG string and rasterizes it with sharp — it never imports the token file, so its colors are hand-copied hex values baked into a template literal. That one couldn’t be fixed by flipping a token; the hex had to be edited by hand to match the new palette. Which is exactly what makes forking useful in the first place: it doesn’t lie to you. You only find out which parts of “single-source” are real, and which just looked that way, by actually relocating the thing once.

The takeaway

The biggest lesson: discipline isn’t overhead, it’s leverage — but you only find out how much leverage by forking once. Invest early in single-source and visual self-checks, and later a whole site stands up in hours. The small pocket of hard-coding that didn’t get caught only surfaces when you actually do the move — noted, and fixed the next time around.

The project this kernel was forked from has a full case study on this site: the Langfu corporate site — the live link to the kernel’s origin hangs there too.