Styles

Typography

Inter set light — weights, the type scale, fluid display steps, tracking, and leading tokens.

Specimens

Inter · variable

Set light, tracked tight.

Inter · 300 · --display-lg · -0.03em

Article H1s invert to bold.

700 · editorial article H1 only

Section labels are quiet structure

0.875rem · uppercase · 0.18em · fg-muted

Long-form body runs large and generous, because reading is the point.

--text-article 1.375rem · --leading-article 1.72

03mo 12d 06h

--font-mono · tabular-nums · timers and data only

Weights

tokens/typography.css

Token	Value	Usage
--weight-light	300	Hero + section display
--weight-regular	400	Body
--weight-medium	500	Eyebrow labels
--weight-semibold	600	Card titles, CTAs
--weight-bold	700	Article H1

Type scale

rem

Token	Value	Usage
--text-2xs	0.6875rem · 11px	Issue labels
--text-xs	0.75rem · 12px	Eyebrows, chips
--text-sm	0.875rem · 14px	UI body, meta
--text-base	1rem · 16px	Default body
--text-lg	1.125rem · 18px	Card titles
--text-2xl	1.5rem · 24px	Article H2
--text-6xl	3.75rem · 60px	Hero / contact display
--text-article	1.375rem · 22px	Long-form body

Fluid display steps

clamp()

Token	Value	Usage
--display-sm	clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem)	Small page titles
--display-md	clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem)	Section displays
--display-lg	clamp(2.5rem, 1.2rem + 5vw, 4.25rem)	Page heroes
--display-xl	clamp(3rem, 1rem + 7vw, 5.5rem)	The landing hero

Leading & tracking

Token	Value	Usage
--leading-tight	1.08	Display H1
--leading-normal	1.5	UI body
--leading-article	1.72	Long-form body
--tracking-tight	-0.03em	Large display
--tracking-wide	0.04em	Chips
--tracking-wider	0.12em	Nav, eyebrows
--tracking-widest	0.18em	Hero kicker, section labels

css — the display register

/* The display register: Inter, light, tight. */
.page-title {
  font-family: var(--font-display);           /* Inter everywhere */
  font-size: var(--display-lg);               /* fluid clamp step */
  font-weight: var(--weight-light);           /* 300 — never bolder */
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* The structural eyebrow above every band. */
.section-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-fg-muted);
}