Role Mapping

Ontopix defines 5 font roles. Each role has one job. Pick the role from what the text does, not how it looks.

The Roles

Decision Tree

Is it the Ontopix wordmark logo?
├─ YES  → logo (do not substitute)
└─ NO   →
    Is it a button, CTA, link, or other actionable surface?
    ├─ YES  → actionable
    └─ NO   →
        Is it code, terminal output, or a technical identifier?
        ├─ YES  → code
        └─ NO   →
            Is it long-form prose (docs, articles, RFPs)?
            ├─ YES  → docs
            └─ NO   → ui (default for everything else)

Role-by-Role

logo — Helvetica

Use for:

• Logo wordmark only

The Ontopix logo uses Helvetica for the wordmark. Do not substitute — specific glyphs are part of the brand identity.

Weights available: 400, 700

CSS stack: Helvetica, Arial, sans-serif

ui — Geist Sans

Use for:

• Site-wide default body font
• Web application interfaces
• Navigation and controls
• Form elements and labels

Geist Sans is Vercel's open-source typeface designed for legibility at small sizes on screens. Clean geometric forms with humanist touches. Aliased to --font-sans (Tailwind v4 built-in) so it applies site-wide without explicit font-ui classes.

Weights available: 400, 500, 600, 700

CSS stack: 'Geist Sans', ui-sans-serif, system-ui, sans-serif

docs — Literata

Use for:

• Documentation and long-form content
• Technical specifications
• Blog posts and articles
• Prose sections rendered by ContentRenderer

Literata is a variable serif typeface commissioned by Google for extended reading. Optimized for screen legibility with generous x-height and open counters. Apply via font-prose class on content wrappers (e.g. ContentRenderer containers).

Weights available: 400, 500, 600, 700

CSS stack: 'Literata', ui-serif, Georgia, serif

code — Geist Mono

Use for:

• Code blocks and snippets
• Terminal output
• Technical identifiers (file paths, commands)
• Inline code references

Geist Mono is Vercel's monospace companion to Geist Sans. Designed for code with clear character differentiation (0/O, 1/l/I). Aliased to --font-mono (Tailwind v4 built-in) so it applies automatically to ,

, and font-mono contexts.
Weights available: 400, 500
CSS stack: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace
actionable — Monda
Use for:
Buttons and CTAs
Actionable links
Interactive elements
Menu items and navigation actions
Monda is a geometric sans-serif with rounded terminals that provides visual distinction from Geist Sans, signaling interactivity. Its slightly wider letterforms improve scannability in short labels.
Weights available: 400, 500, 600, 700
CSS stack: 'Monda', ui-sans-serif, system-ui, sans-serif
Common Pitfalls
Don't use docs for UI. docs has a reading rhythm for long form; it reads heavy in short labels.
Don't use ui for CTAs. actionable exists for a reason — buttons read differently than navigation.
Don't substitute logo. The logo font is part of the wordmark. Even a near-identical substitute breaks recognition.
Use code only for code. Monospace in body copy signals "technical identifier" — using it for emphasis or quotation misleads readers.
Related
Fonts — Full font specs, weights, and licensing
Scale — Size and line-height per role
Theme → Customization — Per-app role overrides