Foundations
Typography
Two faces do all the work: ABC Diatype for headings and interactive labels, ABC Diatype Semi Mono for body copy. Romie is brand-tier and stays out of product UI.
The pairing
A mono usually shows up as code, or as a metadata voice bolted onto an interface. Here it is the reading face. Semi Mono's even rhythm gives a paragraph an editorial density that Diatype, at the same size, reads too soft for — so the grotesk becomes the chrome and the mono becomes the prose.
Aa
ABC Diatype
Headings and interactive labels
Titles, buttons, chips, tabs, form labels. The chrome of the interface.
Aa
ABC Diatype Semi Mono
Body and supporting copy
Paragraphs, captions, helper text. The reading face — not a metadata voice.
Aa
Romie
Brand tier only
Marketing, splash, editorial hero, OG images. Never product UI.
Scale
Tracking tightens as type grows. Semi Mono sets wider than Diatype at the same size, so dense surfaces step down — body-dense is the mobile default.
title-1
Diatype · 64/72 · -2
Power your next moment
title-2
Diatype · 48/56 · -1.5
Power your next moment
title-3
Diatype · 40/48 · -1.25
Power your next moment
title-4
Diatype · 32/40 · -1
Power your next moment
title-5
Diatype · 24/32 · -0.75
Power your next moment
title-6
Diatype · 20/24 · -0.5
Power your next moment
label
Diatype · 14/16 · 0
Power your next moment
copy
Diatype Semi Mono · 18/24 · -0.25
Power your next moment
body
Diatype Semi Mono · 16/20 · -0.2
Power your next moment
body-dense
Diatype Semi Mono · 14/18 · -0.1
Power your next moment
caption
Diatype Semi Mono · 12/14 · 0
Power your next moment
small
Diatype Semi Mono · 11/12 · 0
Power your next moment
Body specimen
A single line can't show why a body face works. These are the three prose steps at their real metrics.
copy · Diatype Semi Mono · 18/24
A Rumor event starts as a list of people. The host picks a room, a night, and a reason, then decides who hears about it. Everything after that — the requests, the plus-ones, the quiet no-shows — is just that list changing its mind.
body · Diatype Semi Mono · 16/20
A Rumor event starts as a list of people. The host picks a room, a night, and a reason, then decides who hears about it. Everything after that — the requests, the plus-ones, the quiet no-shows — is just that list changing its mind.
body-dense · Diatype Semi Mono · 14/18
A Rumor event starts as a list of people. The host picks a room, a night, and a reason, then decides who hears about it. Everything after that — the requests, the plus-ones, the quiet no-shows — is just that list changing its mind.
body, set in Diatype · for comparison only — this is not a supported style
A Rumor event starts as a list of people. The host picks a room, a night, and a reason, then decides who hears about it. Everything after that — the requests, the plus-ones, the quiet no-shows — is just that list changing its mind.
Brand tier
Romie is the brand's serif and is not part of the product scale. Allowed on marketing pages, splash and launch moments, editorial hero art, and OG images. Romie still appearing inside the apps is legacy — the Diatype heading tier replaces it.
brand-display
Romie · 88/80 · -2
Power your next moment