Font Stack·proportional vs. monospace
DM Sans — content a human readsfont-sans
JetBrains Mono — data, code, pathsfont-mono
Headings·h1–h4, tracking-tight

Heading One

Heading Two

Heading Three

Heading Four

Type Scale·every text size in use, sans
text-2xlThe quick brown fox
text-xlThe quick brown fox
text-lgThe quick brown fox
text-baseThe quick brown fox
text-smThe quick brown fox
text-xsThe quick brown fox
text-[10px]The quick brown fox
text-[9px]The quick brown fox
Weights·normal → bold
font-normalThe quick brown fox
font-mediumThe quick brown fox
font-semiboldThe quick brown fox
font-boldThe quick brown fox
Text Colors·semantic tokens
text-foreground — primary contenttext-muted-foreground — secondary contenttext-primary — active / on-statetext-destructive — error / danger
TypesetNew·semantic HTML and rendered Markdown

Reading rhythm without per-element classes

Typeset gives headings, paragraphs, emphasis, links, andinline code one theme-aware rhythm while the surrounding layout continues to own the measure.

The same semantic output can sit in a manuscript, a knowledge page, or a compact message.

  • Use the reading preset for manuscripts and essays.
  • Use compact rhythm where Markdown appears inside application chrome.
Numeric / Mono Readouts·tabular-nums for stable digit width
requests12,847
latency42ms
uptime99.98%
Line Length·max-w-prose for readable paragraphs

Long-form body copy should be constrained to a readable measure — roughly 60–75 characters per line — rather than stretching full-width. This paragraph is wrapped in max-w-prose so it wraps at a comfortable width regardless of the container it sits in.

Code BlockNew·dependency-free JSON colorizer
{
"name": "Sigil Design",
"version": 2,
"stable": true,
"deprecated": null,
"tags": [
"ui",
"tokens"
]
}
Reader SurfaceNew·long-form reading frame · comfortable size + leading, measure capped to ~66ch · pair with Typeset for element styling

The reader surface sets the base size, line-height, and horizontal measure for continuous prose, so a manuscript reads like something meant to be read rather than a data panel. It imposes rhythm and a legible line length — not element styling.

Because the frame is deliberately unopinionated about headings, lists, and links, it composes with a prose utility (here, Typeset) that owns the element treatment. Pure CSS, no hooks — safe to render on the server.