Same page, seventeen ways
One markup. Pick the look.
Nothing in the HTML below changes. The buttons flip one attribute and the whole page re-skins: fonts, color, grid, the works. Hit a few and watch.
What's here
Brand, web, range.
Brand
Wordmark, palette, type. The part a client points at and calls “the look”, and the first thing every button on the dial rewrites.
Web
One static page, themed entirely through CSS variables. The exact same build sits under every design on the dial.
Range
Seventeen design systems wired to the dial right now, from a law firm to a cyberpunk terminal to one intentionally generic template. They share a single file; none is a mockup. Each one is the page, fully dressed.
By the numbers
One markup, seventeen looks
- 17
- design profiles
- 1
- HTML file
- 0
- mockups
- 13
- typefaces
Same markup
One HTML, seventeen looks
The block on the left is real, unstyled HTML, shown here as literal text. The panel on the right renders that exact same markup using this profile’s type, color, and spacing tokens. The structure never changes between profiles, only the CSS variables attached to it.
Markup
<h3>Built for clarity</h3>
<p>
Plain content, no inline
styles, no special classes,
no per-profile markup.
</p>Rendered
Built for clarity
Plain content, no inline styles, no special classes, no per-profile markup.
Under the skin
It’s all just tokens.
The quick brown fox
Four colors and three typefaces do most of the work. Swap those values and the same paragraph you’re reading goes from cream-and-serif to black-on-white to neon. The text never moved.
label · caption
on range
This page never changes its mind. It just puts on a different one, seventeen times, on purpose.
Scope, compared
Three ways to scope a rebuild
Illustrative. Not a real price sheet.
| Included | Wordmark | Brand and site | The works |
|---|---|---|---|
| Identity | Logo mark and a type pairing | Full identity: logo, palette, type | Full identity plus a documented token system |
| Site | Not included | One responsive site, one look | One site, seventeen swappable looks, like this page |
| Copy | Not included | Light pass on existing text | Full section-by-section copy pass |
| Handoff | Source files | Source files plus a style sheet | Source files, style sheet, and this token reference |
elsewhere
The same hand, other problems
- byob Be Your Own Broker. Car buying without the F and I middleman.
- tanktalks Freshwater aquarium keeping, explained plainly.
- business internet search B2B connectivity, sourced without the runaround.
The honest part: every design here is the exact same markup. The hard part was never drawing seventeen of them. It’s knowing which one a client actually needs. Usually it’s calmer than the one they asked for.