01 — logo

Logo

The mark is the >_ prompt: a green chevron (“run it”) and an amber cursor. It holds from a 16px favicon to a billboard.

Primary mark

logos/mark.svg

>curlo

Wordmark

logos/lockup.svg

Favicon

SVG + PNG · holds at 16px

02 — color

Palette

Dark by default. One signal green does the heavy lifting; cyan and amber support. Everything ships as --curlo-* tokens.

brand

status

surfaces · adapt to the active theme

03 — type

Typography

JetBrains Mono for anything code-shaped (display, commands, labels). Inter for body. Both self-hosted as variable fonts.

sans vs mono roles

04 — components

Buttons

Monospace, CLI-flavored. Solids for actions, ghost/outline for quiet ones, and a copy-the-command --cli variant.

05 — components

Badges & tags

Solid badges for build/CI status. Outlined tags for metadata — versions, licenses, counts.

06 — components

Panels

Flat, hairline-bordered — they read like repo / README panels, not dashboard tiles. No drop-shadow bounce.

07 — components

Terminal & code

The signature component. The hero of every page is the command itself. Code blocks add a line-number gutter.

# install curlo (the eponymous one-liner)
$ curl -sSL https://curlo.dev/install.sh | sh

# or, the Pythonic way
$ pip install curlo
$ curlo init --template "api"
✓ project ready in ./my-api  # happy hacking

# curlo.toml[project]name = "my-api"template = "api"runtime = "python3.13"

08 — components

Forms & alerts

Inputs sit on surface with a green focus ring. Alerts use a left status stripe.

09 — components

Steps

Keycap-style markers for quickstarts and status lists.

10 — components

Loaders

The signature busy state. Instead of a spinning ring, the six os of >curloooooo sit up front dimmed, then fill in left-to-right — a progress bar shaped like the wordmark. The os are real glyphs, so they match curl exactly and pick up its colour (dark on light, white in the terminal). Pure CSS, no JS, and the width is reserved from the start so nothing around it jumps.

label + loader (no offset CSS)

try it

$ curlo add curlo-core
>curloooooo  # ← resolving dependencies (this comment marks the end)

<!-- fills up on a loop; role=status announces it to screen readers --><span class="curlo-curl" role="status" aria-label="Loading">  <span class="curlo-curl__chev">&gt;</span>curl<span class="curlo-curl__o">oooooo</span></span><!-- print & fill any number of o's: set --curlo-curl-o + that many o's --><span class="curlo-curl" style="--curlo-curl-o:3"><span class="curlo-curl__chev">&gt;</span>curl<span class="curlo-curl__o">ooo</span></span>

full-page overlay

Put the whole page in a busy state: a modal terminal with the loader, over a blurred backdrop. Open it with curlo.loading() or a data-loading button. With no data-title the title bar picks a random dev task (compiling, resolving dependencies, …). This one closes itself after 3.5 s (or press Esc / click the backdrop).

Omit data-title and the bar shows one of these at random:

<!-- declarative: opens on click, auto-closes after data-duration ms --><!-- no data-title → the title bar shows a random dev task --><button class="curlo-btn curlo-btn--primary"        data-loading data-duration="3500">test overlay</button>// programmatic: hold it open across an async task, then close by handvar h = curlo.loading();await doWork(); h.close();

form submit → overlay until navigation

Add data-loading to a <form> and the overlay covers the wait until the browser leaves the page (no auto-close). Native validation is respected — an empty field blocks submit and the overlay never opens. Submitting below reloads this page (a real navigation) to demonstrate; hit Back and you won’t be stuck behind the loader.

<!-- overlay opens on valid submit, stays until navigation (POST or GET) --><form action="/checkout" method="post"      data-loading="processing…" data-title="~/curlo · checkout">  <!-- fields… -->  <button class="curlo-btn curlo-btn--primary" type="submit">pay</button></form><!-- slow same-origin link: primary click shows the overlay, then navigates --><a class="curlo-btn" href="/reports/export" data-loading="exporting…">export</a>

11 — components

Command runner

Turn a button into an action. Click it and a popover opens, types the command into a terminal, then redirects when it finishes — the one-liner motion of the hero, wired to a real destination. This niche behaviour ships in the optional curlo-cli.js add-on (load it after curlo.js): any element with data-command becomes a trigger.

<!-- any element with data-command becomes a trigger --><button class="curlo-btn curlo-btn--primary"        data-command="curlo launch --customer abc"        data-result="✓ launched customer abc"        data-redirect="https://app.example.com/abc">launch</button># once per page — core, then the command-runner add-on:<script src="…/curlo/curlo.js"></script><script src="…/curlo/curlo-cli.js"></script>

12 — integrate

Integrate

Pick the layer your stack needs. Fonts are self-hosted, so there are zero third-party calls.

<link rel="stylesheet"  href="…/curlo/curlo.bootstrap.min.css">

<link rel="stylesheet"  href="…/curlo/curlo.min.css">

<link rel="stylesheet" href="…/curlo/tokens.css"><link rel="stylesheet" href="…/curlo/fonts.css">

13 — easter eggs

Easter eggs

A little brand delight, tucked away for the curious. Two secrets ship in the optional curlo-eggs.js add-on (self-contained — load it after curlo.js, or standalone). Both respect prefers-reduced-motion.

<!-- self-contained; load after curlo.js (or on its own) --><script src="…/curlo/curlo-eggs.js"></script>// print your own status line, or turn the focus caret offcurlo.eggs.celebrate(">_ shipped it");curlo.eggs.focusPrompt(false);