Typography. Three families, deliberate contrast.

Newsreader serif for headlines and proper nouns. JetBrains Mono for everything else. Inter only for long-form prose.

view .md

Families

3 families

serif · displayNewsreader

AaBb

headlines · proper nouns

monoJetBrains Mono

Aa{ }

UI · metadata · code

sans · bodyInter

Aa Bb

long-form prose only

Scale

10 tokens

text-display-xl80 / 76 · serif

Anna Maria

text-display-lg64 / 64 · serif

Build with entrepta.

text-display-md40 / 44 · serif

One card. Four variants.

text-heading-lg24 / 31 · serif

Project name

text-heading-md18 / 25 · serif

Latest post

text-body-lg16 / 26 · sans

A dark-first design system with editor metaphors. Copy-paste components into your repo, own the source.

text-body-md14 / 21 · sans

A small headless CLI that copies typed components into your repo.

text-mono-md14 / 21 · mono

$ npx @entrepta/cli@latest init

text-mono-sm12 / 17 · mono

strength day · low cardio

text-mono-xs10 / 13 · mono

TypeScript · UTF-8 · Ln 1, Col 1

Using the scale

3 rules

A step is a size, not a font. Each one sets size and leading, and the display steps their tracking. Pair it with font-serif, font-sans or font-mono where you use it.
Only these ten. No arbitrary pixel sizes and no Tailwind default steps. A test in the registry fails on both. Inline fontSize is kept for glyphs such as ◆, at 18px or less.
Registered in cn. Without it, tailwind-merge reads text-mono-sm as a color and drops it next to text-[var(--fg-muted)]. lib/utils.ts, which init writes, already has it.

usage.tsx

tsx

<h2 className="font-serif text-display-md">Work</h2>
<span className="font-mono text-mono-sm uppercase">latest post</span>

/* or as a variable, in plain CSS */
.label { font-size: var(--text-mono-sm); line-height: var(--text-mono-sm--line-height); }