FoundationsTypography

Typography

Two typefaces: one for product, one for the brand.

Velon Sans (Regular 400 / Medium 500 / SemiBold 600 / Bold 700; fallback Inter, Poppins / system-ui) is the UI face. Everything a customer reads in the product is set in it: the app, dashboards, docs, body text, data, labels and UI titles. It is ours: an open-source typeface (OFL) built on Inter, with a single-story a, an l with a tail and an alternate t baked in as defaults (Inter’s cv11 / cv05 / cv13), so the product reads as Velon while keeping Inter’s screen legibility. Inter is its upstream and named fallback.

VELON Display is the proprietary brand face: a geometric monoline with a single weight (400). Use it only for brand moments, the landing hero, marketing headlines, large display numbers and the watermark. Never in body text, forms, dense data, small UI titles or captions. Because it ships a single weight, headings set in it use font-synthesis: none so a heavier request never renders a faux bold.

A monospace family is reserved for code and technical IDs only (e.g. a Pix end-to-end id). It is not a brand font. Poppins is kept only as a fallback for both faces.

The type scale is fixed: display 40px, h1 30 (SemiBold), h2 24 (SemiBold), h3 20 (Medium), body 16 (Regular), small 14 (Medium). Don’t introduce new sizes. If a screen needs something the scale doesn’t have, the screen is wrong, not the scale.

Legibility is Verdade: type that reads cleanly is the most basic form of telling the truth on screen. The brand voice (VELON Display) speaks loud only in the few large brand moments; everywhere a customer reads numbers and labels, Inter keeps it honest and clear.

Display
text-display · 2.5rem (40px) · weight 500 · line-height 3rem
Heading 1
text-h1 · 1.875rem (30px) · weight 600 · line-height 2.25rem
Heading 2
text-h2 · 1.5rem (24px) · weight 600 · line-height 2rem
Heading 3
text-h3 · 1.25rem (20px) · weight 500 · line-height 1.75rem
Body. the default reading size for content.
text-body · 1rem (16px) · weight 400 · line-height 1.5rem
Small. used for labels and UI captions.
text-small · 0.875rem (14px) · weight 500 · line-height 1.25rem
Micro. minimum readable size.
text-micro · 0.75rem (12px) · weight 500 · line-height 1rem
E1820087420250616_PIX_a1b2c3d4
font-mono · system monospace · for code and technical IDs only (not a brand font)

Don’t

  • Don’t use text-[10px], text-[9px], or other ad-hoc sizes. text-micro (12px) is the floor.
  • Don’t set body, forms, data or UI titles in VELON Display. It is the brand face, for large brand moments only; product text is Inter.
  • Don’t load other brand fonts. Velon Sans (product) and VELON Display (brand) are the two faces; monospace is for code and technical IDs only.
  • Don’t restyle the “VELON” wordmark. It is always set as authored; never apply transformations of your own.

In code

import { fontSize } from '@velon-finance/tokens'
 
const heading = fontSize.h2
// → { rem: '1.5rem', px: '24px', weight: 600, lineHeight: '2rem' }

Inter is the default. Reach for the brand face explicitly with font-display, and only for a large brand moment:

<h2 class="text-h2 font-semibold">Section title</h2>
<!-- ↑ Inter (UI) · ↓ VELON Display (brand) -->
<h1 class="font-display text-display">Verdade. Vantagem. Valor.</h1>
ColorSpacing