How we made the SupportWire site boring to extend

We rebuilt the SupportWire marketing site knowing it has to last. Not a launch microsite. A site we will edit for years: homepage folds, compare pages, use cases, industries, tools.

The failure mode was already visible. Dozens of routes each hand-rolled their own section chrome. Same visual idea. Different markup. Scoped CSS that fought the global tokens. Adding a page meant copying a "section head" block and hoping letter-spacing matched.

So we stopped treating pages as one-offs and treated the marketing surface as a small kit.

Stack#

SvelteKit 2, Svelte 5, Tailwind 4, Bun, Cloudflare Pages. Tokens and section-head styles live in global CSS so a parent's scoped styles cannot quietly override an extracted child. That detail matters more than the framework names.

The grammar#

Almost every marketing section is the same three parts:

1. Shell: padding, width, optional alt surface, stable id
2. Head: eyebrow (or chip / stamp), two-tone title, subtitle or copy column
3. Stage: grid, mock, timeline, accordion, whatever the section proves

The thin wrapper is Fold: Shell + Head + children. Custom layouts (Crisp-style split, migration timeline) compose Shell + Head themselves. They do not invent a parallel API.

Title lines use a newline marker in the title string: first line bright, later lines dim. Same size and weight. Color only. That keeps stacked heroes consistent without a second heading component.

Homepage folds get stable ids (gap, mechanism, desk, proof, wire-in, integrations, ship, close) so anchors and analytics do not drift when copy changes.

Try the head live. Toggle the dim line, chip, stamp, and alignment. The code under the stage updates with the props.

What we refused#

We refused a fifth split API. The repo already had SectionHead, SectionHero, SplitFeature, EditorialSplit, SplitHeader. The rule in COMPONENTS.md is simple: prefer SectionHead / Fold for marketing section grammar. Document the rest. Do not merge them without visual fixtures. Do not invent ChipHead.

Eyebrow tokens were drifting too. Eyebrow.svelte and .section-eyebrow disagreed on tracking. Default is now the section canon (0.08em, faint). Wide and narrow are opt-in.

Compare pages needed competitor chips and verification stamps. Those became props on SectionHead (chip, chipClass, chipStyle, stamp), not a second head component and not permanent exceptions forever.

Migration, not a rewrite#

We did not freeze the site and redesign. We migrated by page family:

1. Unify eyebrow + score bands (StatBand)
2. Use cases, industries, tools, pricing
3. Compare and core marketing
4. Chip / stamp onto SectionHead
5. Delete dead homepage leftovers into home/showcase/

Before: a handful of routes used SectionHead / Fold. After: on the order of fifty. Hand-rolled <header class="section-head"> blocks went from dozens toward zero.

Copy stayed locked. Structure PRs do not rewrite claims or prices. That separation is what lets eng move fast without marketing drift.

The review bar#

Before merge we ask the questions below. Click through them. This is the same bar we keep in the repo.

There is an internal /components gallery and a root COMPONENTS.md with add-fold / add-page checklists. The kit is the product for the next person who opens the repo at 1am.

What we still will not do#

We will not split a huge diagram component until a second consumer needs it. We will not CMS the folds until non-eng edits them weekly. We will not rename folders for aesthetics. Boredom is the feature.

If you keep a marketing site longer than a quarter, start with one shell, one head, and a written rule against the fifth layout. The rest is migration discipline.