MonoLisa Text
--font-sans · web + wwwHow vexingly quick daft zebras jump!
Primary sans — UI, nav, headings, body copy. Mapped to --font-sans / font-sans.
Interactive
Playground
Try the faces live. MonoLisa Text and Code are variable fonts (continuous weight axis); the serifs load discrete weights, so the browser snaps to the nearest one.
Fonts
Families
The four faces the Zo apps load, and what each is for. MonoLisa Text and Code are the workhorses (font-sans / font-mono); the serifs are marketing accents.
MonoLisa Code
--font-mono · web + wwwHow vexingly quick daft zebras jump!
Mono — code, terminal, 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).
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
Micro · 11px · text-2xs⌘K · 3 unread · main · 2m ago
Micro (small) · 10px · text-3xs⌘K · 3 unread · main · 2m ago
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
Rendered content uses the shared Typeset layer, with app-specific presets for reading rhythm.
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 MonoLisa Code.
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.