← MaV / Typography
Font family All samples update live · saved to localStorage
MaV / Foundations

Typography

MaV supports three interchangeable UI font families — Plus Jakarta Sans, Inter, and Poppins. One is active at a time via --font-active. All --font-display and --font-body tokens reference it automatically.

Font Families

Choose the active family above. Each card shows the typeface in its own rendering — independent of the active selection — so you can compare personality before switching.

Plus Jakarta Sans
--font-jakarta · var(--font-active) default
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Geometric humanist. Warm stroke contrast with consistent letterform structure. Strong across both display and body sizes. Recommended for UI-first products.
Inter
--font-inter
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Designed for screens. Optimized at small sizes with tight metrics and tall x-height. Best for data-dense UIs, dashboards, and developer tooling.
Poppins
--font-poppins
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
Geometric grotesque. Wide, open letterforms with circular construction. High impact at display sizes. Good for consumer apps, marketing, and mobile-first surfaces.

Font Weights

All three families ship the same five weights. Samples render in the currently active family.

400 Regular --core/font-weight/Regular
The quick brown fox jumps over the lazy dog
500 Medium --core/font-weight/Medium
The quick brown fox jumps over the lazy dog
600 Semi Bold --core/font-weight/Semi Bold
The quick brown fox jumps over the lazy dog
700 Bold --core/font-weight/Bold
The quick brown fox jumps over the lazy dog
800 Extra Bold —
The quick brown fox jumps over the lazy dog

Heading Scale

Bold weight (700) at all heading sizes. Letter-spacing tightens at display sizes.

heading/hero
64px · 700 · -0.02em
Heading
heading/xl3
48px · 700 · -0.02em
Large Title
heading/xl2
44px · 700 · -0.015em
Display Text
heading/xl
32px · 700
Section Heading
heading/headerMobileLg
24px · 700
Mobile Header Large
heading/headerMobileMd
16px · 700
Mobile Header Medium
heading/headerMobileSm
14px · 700
Mobile Header Small

Body Scale

Three weight stacks per size: Regular (400), Medium (500), Bold (700).

body/xl2 · medium/xl2
20px
Regular — Body section title
Medium — Emphasized text
Bold — Strong emphasis
body/xl · medium/xl
18px · OTP character
Regular 18px — Section description
Medium 18px — OTP slot character
body/lg · medium/lg
16px · primary body
Regular 16px — Primary body text
Medium 16px — Button, label text
body/md · medium/md
14px · default
Regular 14px — Default body copy, descriptions
Medium 14px — Verify button, resend label
body/sm · medium/sm
12px · caption
Regular 12px — Caption, helper text
Medium 12px — Text-only button label, Resend Code
body/xs
10px · micro label
10px — Micro labels, tags, badges
SECTION LABEL · 10px 600 UPPERCASE

Monospace

JetBrains Mono is used for all code snippets, token names, numeric data, and OTP slots. It is not swappable — it is a fixed system choice independent of the UI font.

JetBrains Mono / IBM Plex Mono
--font-mono · fixed — not swappable
--mav-primary: #352eff
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%& const fn = () => {}

CSS Custom Properties

All typography references should go through --font-display or --font-body — never hardcode a family name in component CSS.

Token Value Layer Purpose Preview
--font-jakarta 'Plus Jakarta Sans', sans-serif Layer 0 Primitive — Jakarta stack Aa Bb Cc
--font-inter 'Inter', sans-serif Layer 0 Primitive — Inter stack Aa Bb Cc
--font-poppins 'Poppins', sans-serif Layer 0 Primitive — Poppins stack Aa Bb Cc
--font-active 'Plus Jakarta Sans', sans-serif Layer 1 Active selection — override to switch all UI Aa Bb Cc
--font-display var(--font-active) Layer 2 Semantic — headings, display text Display
--font-body var(--font-active) Layer 2 Semantic — body copy, labels Body copy
--font-mono 'JetBrains Mono', monospace Layer 0 Fixed — code, tokens, OTP digits const x = 1
--core/font-weight/Regular 400 Layer 0 Body text Regular
--core/font-weight/Medium 500 Layer 0 Labels, buttons Medium
--core/font-weight/Semi Bold 600 Layer 0 Section labels, nav items Semi Bold
--core/font-weight/Bold 700 Layer 0 Headings, emphasis Bold
React Native usage: In RN, load the active font via useFonts() inside the component — never at module level. Scale values with fontPixel() for density-independent rendering. The --font-active token corresponds to the fontFamily key in your RN theme object.