preset: terminal

Ten ways to say the same thing.

Phosphor CRT. Mono throughout, scanlines, bracket rules, a blinking caret. 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 another preset means adding one block of CSS and one registry entry - never touching a component. And a component fix improves all ten at once.

Seven section kinds

Mix and repeat them. Card grid after card grid is how a page starts looking generated.

  1. 01

    prose

    Paragraphs at a readable measure. Narrow column.

  2. 02

    features

    A grid of short claims. Two, three or four up.

  3. 03

    steps

    Numbered sequence on a vertical rule.

  4. 04

    stats

    Large figures with small labels under them.

  5. 05

    quote

    One line given a whole screen to breathe.

  6. 06

    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 the deploy actually does

The same Mermaid source on every page. How it is DRAWN is the preset's call - vector here, box-drawing characters on the terminal ones, hand-sketched on the whiteboard.

┌──────────────────┐                              
│                  │                              
│ Edit src/page.ts │                              
│                  │                              
└─────────┬────────┘                              
          ▲                                       
          │                                       
          │                                       
     type error                                   
          ▼                                       
◇─────────┴────────◇                              
│                  │                              
│   astro check    │                              
│                  │                              
◇─────────┬────────◇                              
          │                                       
        clean                                     
          │                                       
          │                                       
          ▼                                       
┌──────────────────┐                              
│                  │                              
│   astro build    │                              
│                  │                              
└─────────┬────────┘                              
          │                                       
          │                                       
          │                                       
          │                                       
          ▼                                       
┌──────────────────┐                              
│                  │                              
│    deploy.sh     │                              
│                  │                              
└──────────────────┘                              
          │                                       
          │                                       
          ├──────────────────────────┐            
          │                          │            
          │                          │            
          ▼                          ▼            
╭──────────────────╮     ◇───────────────────────◇
│                  │     │                       │
│ CloudFlare edge  │  ┌──┤   live HTML is ours?  │
│                  │  │  │                       │
│                  │  │  │                       │
╰──────────────────╯  │  ◇───────────┬───────────◇
                      │              │            
                      │             yes           
         no───────────┘              │            
          │                          │            
          ▼                          ▼            
┌──────────────────┐     ┌───────────────────────┐
│                  │     │                       │
│   fail loudly    │     │ https://slug.frst.dev │
│                  │     │                       │
└──────────────────┘     └───────────────────────┘
Laid out and rendered at build time - a diagram costs no runtime JavaScript, and a syntax error in the source is a build error rather than an empty box on a live page.

What it costs you

1
File to edit when the content changes.
0
Servers. Static assets on the edge.
~15kb
One HTML file, gzipped, stylesheet inlined.
10
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 terminal

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

Back to all presets