Foundationsv1.0

Typography

A precise, modular type system built on three carefully chosen families. Every scale step is engineered for vertical rhythm, readability, and a confident visual hierarchy across every surface.

01 · The Scale

Type Scale

Eleven steps from Overline to Display. Click any row to copy its CSS variable.

Display
--velyon-text-display
Build beautifully.
size 72px
lh 1.05
wt 800
H1
--velyon-text-h1
The quick brown fox
size 56px
lh 1.1
wt 700
H2
--velyon-text-h2
The quick brown fox
size 44px
lh 1.15
wt 700
H3
--velyon-text-h3
The quick brown fox
size 32px
lh 1.2
wt 600
H4
--velyon-text-h4
The quick brown fox
size 24px
lh 1.3
wt 600
H5
--velyon-text-h5
The quick brown fox
size 20px
lh 1.4
wt 600
H6
--velyon-text-h6
The quick brown fox
size 18px
lh 1.5
wt 600
Body Large
--velyon-text-body-lg
Typography is the craft of endowing human language with a durable visual form.
size 18px
lh 1.6
wt 400
Body
--velyon-text-body
Typography is the craft of endowing human language with a durable visual form.
size 16px
lh 1.6
wt 400
Caption
--velyon-text-caption
Auxiliary information and metadata.
size 13px
lh 1.5
wt 400
Overline
--velyon-text-overline
SECTION LABEL
size 11px
lh 1.4
wt 600
02 · The Families

Font Specimens

Three families, each with a deliberate role in the system.

Headings · Display

Plus Jakarta Sans

A geometric humanist sans designed for clarity at large sizes with confident curves.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz 0123456789
Medium500
Semibold600
Bold700
ExtraBold800
--velyon-font-display
Body · Interface

Inter

A workhorse interface typeface optimized for screens, legibility, and tight UI density.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz 0123456789
Regular400
Medium500
Semibold600
--velyon-font-body
Code · Numeric

JetBrains Mono

A monospaced typeface engineered for developers with tall x-height and clear glyph distinction.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnop
qrstuvwxyz 0123456789
Regular400
Medium500
--velyon-font-mono
03 · Interactive

Typography Playground

Compose, preview, and export. Every change updates in real time.

Live Preview
The quick brown fox jumps over the lazy dog.
48px
1.10
-0.020em
Generated CSS
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 48px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
04 · Implementation

Usage Guidelines

Use CSS variables for cross-framework portability, or Tailwind utilities for component-scoped styling.

CSSWith design tokens
1/* Using CSS variables */
2.hero-title {
3  font-family: var(--velyon-font-display);
4  font-size: 72px;
5  line-height: 1.05;
6  font-weight: 800;
7  letter-spacing: -0.02em;
8  color: var(--velyon-offwhite);
9}
10

11.body-text {
12  font-family: var(--velyon-font-body);
13  font-size: 16px;
14  line-height: 1.6;
15  font-weight: 400;
16  color: var(--velyon-muted);
17}
TSXWith Tailwind utilities
1// Using Tailwind utilities
2<h1 className="text-[72px] leading-[1.05] font-extrabold tracking-tight">
3  Build beautifully.
4</h1>
5

6<p className="text-base leading-relaxed text-[var(--velyon-muted)]">
7  Body copy aligned to the Velyon scale.
8</p>
9

10<span className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--velyon-azure)]">
11  Section Label
12</span>

Best Practices

  • Never skip more than one level of hierarchy in a layout.
  • Reserve Display for hero moments — one per page maximum.
  • Maintain a 60–75 character measure for body copy.
  • Use Overline sparingly to label sections and metadata.