Design SystemTypography

Typography

ONCE uses exactly two typefaces: Manrope for all prose and display text, and JuliaMono for code and technical labels. This constraint keeps the visual language clean and predictable.

Font Families

AaManrope

Primary typeface for body text, headings, navigation, and all display copy. Loaded from Google Fonts with weights 300–800.

font-family: ‘Manrope’, sans-serif;
AaJuliaMono

Monospace typeface for code blocks, inline code, tags, timestamps, and technical labels. Loaded locally via @font-face (Regular 400 + Bold 700).

font-family: “JuliaMono”, monospace;

CSS Variables

:root {
  --font-sans: 'Manrope', sans-serif;
  --font-display: 'Manrope', sans-serif;
  --font-mono: 'JuliaMono', ui-monospace, SFMono-Regular, monospace;
}

Tailwind Classes (dev-app)

ClassFontUsage
font-sansManropeBody text
font-displayManropeHeadlines
font-monoJuliaMonoCode, tags, labels

Weight Scale

Manrope is loaded with the full weight range. Use them consistently:

The quick brown fox
300Light — Subtle text
The quick brown fox
400Regular — Body text
The quick brown fox
500Medium — Emphasized body
The quick brown fox
600Semi-bold — Subheadings
The quick brown fox
700Bold — Headings
The quick brown fox
800Extra-bold — Hero headlines

Responsive Sizes

Headlines use responsive breakpoints to scale smoothly from mobile to desktop.

Hero Headlines

className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl"

Hero Headline

Section Headlines

className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl"

Section Headline

Subsection Headlines

className="text-2xl sm:text-3xl md:text-4xl"

Subsection Headline

Code Styling

Code Blocks

Code blocks use JuliaMono at 0.875rem with a line-height of 1.7. They inherit the surface background with a subtle border.

// Example code block
const release = await submitRelease({
  title: 'Midnight Sun',
  artist: 'Aurora',
});

Inline Code

Inline code like submitRelease() uses JuliaMono at 0.8em with a subtle background tint (rgba(58,69,92,0.25)), rounded corners, and light padding. Inline code is never bold — the font-weight is always 400.

Backtick characters (::before / ::after) are suppressed with content: "" to avoid visual clutter.

Monospace in UI

JuliaMono is also used outside of code contexts for:

  • Footer links (once.app, docs.once.app)
  • Tag labels and timestamps
  • The /dev label in the navbar
  • Feature card tags (e.g. “posts”, “docs”)
<span className="font-mono text-xs text-once-white/30">
  some label
</span>
AI FeaturesComponents