Hanken Grotesk
--font-hanken-grotesk · web + wwwHow vexingly quick daft zebras jump!
Primary sans — UI, nav, body copy. Mapped to --font-sans / font-sans.
Interactive
Playground
Try the faces live. Berkeley Mono is a variable font (continuous weight axis); the other families load discrete weights, so the browser snaps to the nearest one.
Fonts
Families
The six faces the Zo apps load via next/font, and what each is for. Hanken Grotesk and Berkeley Mono are the workhorses (font-sans / font-mono); the serifs and DM Sans are marketing accents.
Berkeley Mono
--font-berkeley-mono · web + wwwHow vexingly quick daft zebras jump!
Mono — code, labels, tabular data. Mapped to --font-mono / font-mono.
Advercase
--font-display-serif · wwwHow vexingly quick daft zebras jump!
Display serif — hero headings on marketing pages.
EB Garamond
google · wwwHow vexingly quick daft zebras jump!
Section headings on marketing pages (loaded in www/lib/typography).
Matina Rounded
--font-editorial-serif · web + wwwHow vexingly quick daft zebras jump!
Editorial serif — long-form prose leads and markdown accents.
DM Sans
--font-dm-sans · wwwHow vexingly quick daft zebras jump!
Alternate hero lead face on marketing pages.
Kit
Type scale
The shared Tailwind scale both apps draw from. Marketing pages layer fluid clamp() sizes on top of these steps; product UI mostly lives at the small end.
Display · 72px · text-7xlA home for your work
H1 · 48px · text-5xlYour computer in the cloud
H2 · 36px · text-4xlFiles, agents, and sites
H3 · 30px · text-3xlEverything in its place
H4 · 24px · text-2xlSmall pieces, loosely joined
Large · 20px · text-xlText it instructions. Schedule agents. Host sites.
Lead · 18px · text-lgA personal cloud server with AI that works alongside you.
Body · 16px · text-baseZo is a personal server with an AI that can use it — a place to keep files, run code, publish sites, and hand off work.
Small · 14px · text-smZo is a personal server with an AI that can use it — a place to keep files, run code, publish sites, and hand off work.
Caption · 12px · text-xsLast updated 3 minutes ago · 2.4 MB · Markdown
www
Marketing headings
The heading components from www/lib/typography — fluid clamp() sizing over the marketing faces. These are www-only; product UI uses the plain scale.
HeroHeading + HeroLead
A home for your work
Text it instructions. Schedule agents. Host sites.
SectionHeading + SectionLead + SectionDetail
Files, agents, and sites
Everything lives in one workspace: yours.
Zo keeps files, runs code, publishes sites, and hands off work.
Eyebrow
What's new
Kit
Utilities
App-level utility classes with typographic meaning, defined in the apps' global CSS.
UI label.type-ui-label — font-medium text-sm — standard control and list-row label.
UI label (small).type-ui-label-sm — font-medium text-xs — compact chrome: badges, table headers, metadata.
Content
Prose
Long-form content uses @tailwindcss/typography's prose classes; editorial pages restyle it via editorial-overrides.css.
Small pieces, loosely joined
Zo is a personal server with an AI that can use it — a place to keep files, run code, publish sites, and hand off work. Everything lives in one workspace: yours.
Inline styles hold up too: strong, emphasis, links, and inline code in Berkeley Mono.
The form is the solution; the context defines the problem.
- Keep files where the agent can reach them.
- Schedule the boring parts.
- Publish when it's ready.