When we port a vibe-coded app, the first file we write is theme.json. Colors, spacing, typography, layout widths — all of it lives there before a single template is touched.
Why front-load tokens
WordPress's block editor reads theme.json to constrain what editors can pick. If your tokens are right, an editor cannot accidentally introduce an off-brand color or a broken spacing scale. The design system enforces itself.
{
"settings": {
"color": {
"palette": [
{ "slug": "ink", "color": "#101418", "name": "Ink" },
{ "slug": "blueprint", "color": "#2456F0", "name": "Blueprint" }
]
}
}
}The handoff dividend
Six months after delivery, a junior marketer adds a new landing page. They pick from your palette, your spacing, your type ramp. The site still looks like the site. That is the dividend.