Cronwerk UI

Typography

The Cronwerk type system in practice — Heading, Text and Mono for authored UI, and Prose for long-form content that arrives as raw HTML or rendered markdown.

stable

Two ways to type-set a page

Cronwerk splits typography into authored UI and long-form content, and gives you a different tool for each:

  • You author the markup — a hero, a card title, a caption. Reach for the scale primitives Heading, Text and Mono. Each binds directly to the --text-* / --leading-* / --tracking-* / --weight-* tokens, so there is never a font-size literal at the call site.
  • The markup arrives as a blob — a manifesto, a docs page, or course material whose HTML comes out of a markdown pipeline. Wrap it once in Prose and every descendant is styled from the same tokens, no per-element wrapping.

Heading, Text and Mono

Heading renders the display ladder (levels 1–4, with a visual-level override so semantics and appearance decouple). Text covers the reading sizes (body / lead / small, with a muted option). Mono sets cron expressions, code refs and IDs in JetBrains Mono.

Automations that read themselves

The lead is the one standfirst under the page title.

Body copy is the default reading size. It wraps to a comfortable measure so long-form content stays readable at length.

Small — captions, meta and legal.

Runs on */15 9-17 * * 1-5 and writes to node_8f3c.

Long-form content with Prose

Prose is the wrapper for content the library did not author element by element. Give it the HTML a markdown pipeline produced and it styles every h1h6, p, ul/ol, a, code, pre, blockquote, hr and strong/em from the type scale, bounding the text to a comfortable reading measure. The document below is rendered by a single Prose wrapper:

Work that runs itself

Cronwerk turns a schedule you can read into automations you can trust.

Define a job once. It runs on a plain * * * * * expression, reports when it is done, and gets out of your way — no dashboards to babysit, no cron math held in your head.

How it works

  • A schedule — the cron line that fires the job.
  • A run — one execution, with a result.
  • A report — what happened, linked from the run.

Ship on weekdays

0 6 * * 1-5         ship
*/15 9-17 * * 1-5   check
Schedules are documentation. If you cannot read the cron line aloud, it is too clever.

See the surfaces guide for where this copy sits on the page.

The call site is just the wrapper — the content stays raw markdown output:

<Prose dangerouslySetInnerHTML={{ __html: renderedMarkdown }} />

Do

Use Prose for whole blocks of markdown-pipeline output — guides, the manifesto, changelog bodies, course lessons.

Don't

Don’t reach for Prose to set a single heading or paragraph you author yourself — use Heading / Text so the semantics stay explicit.