Typography

Typefaces

Role	Stack
Sans	"Be Vietnam Pro", "Inter", system-ui, sans-serif
Mono	"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace

--bp-font-sans: 'Be Vietnam Pro', 'Inter', system-ui, sans-serif;
--bp-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

Type scale

All sizes are fluid — they clamp between a minimum at 360px viewport and a maximum at 1200px.

Hero

clamp(2.5rem, 7cqi, 5.25rem)

—bp-text-hero

Display

clamp(2.25rem, 5.5cqi, 4.5rem)

—bp-text-display

Heading 1

clamp(1.875rem, 4cqi, 3.25rem)

—bp-text-h1

Heading 2

clamp(1.5rem, 3.2cqi, 2.5rem)

—bp-text-h2

Heading 3

clamp(1.25rem, 2.2cqi, 1.75rem)

—bp-text-h3

Heading 4

clamp(1.0625rem, 1.6cqi, 1.375rem)

—bp-text-h4

Body large — for lead paragraphs and intros.

clamp(1.125rem, 1.4cqi, 1.25rem)

—bp-text-body-lg

Body — default paragraph text. Comfortable at any viewport.

clamp(1rem, 1.1cqi, 1.125rem)

—bp-text-body

const token = “mono body”;

0.8125rem — fixed

—bp-text-mono

Eyebrow label

0.75rem + tracking 0.18em

—bp-text-eyebrow

Tokens

/* Display */
--bp-text-hero: clamp(2.5rem, 7cqi, 5.25rem) --bp-text-display: clamp(2.25rem, 5.5cqi, 4.5rem)
  --bp-text-h1: clamp(1.875rem, 4cqi, 3.25rem) --bp-text-h2: clamp(1.5rem, 3.2cqi, 2.5rem)
  --bp-text-h3: clamp(1.25rem, 2.2cqi, 1.75rem) --bp-text-h4: clamp(1.0625rem, 1.6cqi, 1.375rem)
  /* Body */ --bp-text-body-lg: clamp(1.125rem, 1.4cqi, 1.25rem)
  --bp-text-body: clamp(1rem, 1.1cqi, 1.125rem) --bp-text-caption: 0.875rem
  --bp-text-eyebrow: 0.75rem /* Mono */ --bp-text-mono: 0.8125rem --bp-text-mono-sm: 0.75rem;

Weights

--bp-font-weight-regular: 400 --bp-font-weight-medium: 500 --bp-font-weight-semibold: 600
  --bp-font-weight-bold: 700;

Line height

--bp-leading-tight: 1.25 /* headings */ --bp-leading-normal: 1.5 /* body */ --bp-leading-loose: 1.75
  /* reading-heavy content */;