preset: noir

Nine ways to say the same thing.

Cinematic dark. High-contrast Bodoni, enormous negative space, one slow glow. Every page in this guide carries identical copy - so anything that reads differently is the design doing the work, not the words.

See the sectionsAll presets

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.

prose

Paragraphs at a readable measure. Narrow column.

▦

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. 1

    Scaffold

    new.sh --name --preset builds the folder, installs, runs a verification build and commits.

  2. 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. 3

    Look at it

    bun run dev for hot reload while you argue about the wording.

  4. 4

    Ship

    ./deploy.sh puts it on CloudFlare at . and waits until the live HTML is genuinely yours.

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.
— the entire reason this guide exists

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 .frst.dev by default. --zone takes any domain on that account.

Build one in noir

new.sh --name my-thing --preset noir

Back to all presets