prose
Paragraphs at a readable measure. Narrow column.
preset: corporate
Nine ways to say the same thing.
Professional monotone. Near-grey, one restrained accent, tight grid, no decoration. Every page in this guide carries identical copy - so anything that reads differently is the design doing the work, not the words.
What a preset controls
Not a colour swap. A whole design language.
A preset owns the palette, the type pairing, the type scale, the border weight, the corner radius, any texture, and the motion. Components ship neutral structure and a handful of op-* hook classes; every decision with taste in it lives in presets.css.
That split is what makes this maintainable. Adding a tenth preset means adding one block of CSS and one registry entry - never touching a component. And a component fix improves all nine at once.
Seven section kinds
Mix and repeat them. Nine card grids in a row is how a page starts looking generated.
features
A grid of short claims. Two, three or four up.
steps
Numbered sequence on a vertical rule.
stats
Large figures with small labels under them.
quote
One line given a whole screen to breathe.
faq
Native details/summary. No JavaScript.
From nothing to live
- 1
Scaffold
new.sh --namebuilds the folder, installs, runs a verification build and commits.--preset - 2
Write
Edit
src/page.ts. One file. It is a typed structure, so a wrong section kind is a build error, not a broken page. - 3
Look at it
bun run devfor hot reload while you argue about the wording. - 4
Ship
./deploy.shputs it on CloudFlare at.
What it costs you
- 1
- File to edit when the content changes.
- 0
- Servers. Static assets on the edge.
- ~36kb
- One HTML file, stylesheet inlined.
- 9
- Design languages, one flag apart.
The default look is the tell. Pick a language and commit to it.
Reasonable questions
Can I override the accent?+
Yes - theme.accent in page.ts, any hex. Readable text on top of it is computed for you. The presets are tuned, though, so try them as-shipped first.
Can I mix a light preset into dark?+
No, and deliberately. A preset owns whether it is light or dark because the palettes are built as wholes. Inverting one produced worse results than choosing a different preset.
How do I add a preset?+
An entry in src/lib/presets.ts and a block in src/styles/presets.css. Then redeploy this guide so it shows up here.
Where does it deploy?+
CloudFlare Workers static assets on the Duplo account, at --zone takes any domain on that account.