Foundations

Typography

Figtree for the interface and Source Code Pro for codes, set on one scale. Sizes grow one step on phones; the weights stay the same.

Typefaces

Figtree--font-display

Figtree--font-sans

AaSource Code Pro--font-code

Heading

Figtree Bold (700), standing in for Spectrum's extra-bold headings at Spectrum's sizes and line heights.

Good evening, Roger

heading-xl36px / 42px · 700

The one page greeting or hero title.

Lumen Optics

heading-l28px / 32px · 700

Page titles.

Needs attention

heading-m22px / 26px · 700

Section headings on desktop.

Payments

heading-s20px / 24px · 700

Card headings; section headings on phones.

Next 7 days

heading-xs18px / 22px · 700

Small section headings, dialog titles.

Overdue

heading-xxs14px / 18px · 700

In-line alert headings.

Title and button

Figtree SemiBold (600) for names of things and button labels, standing in for Spectrum's bold titles.

$18,400

title-xl20px / 24px · 600

Large figures in a stat card label row.

X6 launch video

title-l18px / 22px · 600

Card titles.

Invoice to Halo Drones

title-m16px / 20px · 600

List row titles.

Northpeak Audio

title-s14px / 18px · 600

Dense rows and table cells that name something.

Send reminder

button14px / 18px · 600

Button labels at M (12px at S, 16px at L, 18px at XL).

Body

Figtree Regular (400) at a spacious 1.5 line height: friendly, very legible at small sizes.

Two things are overdue. Everything else is on track.

body-l18px / 27px · 400

Lead sentence under a page title.

Usage rights run 12 months from the first post.

body-m16px / 24px · 400

Long-form text.

Lumen Optics pays on delivery, net 30.

body-s14px / 21px · 400

Default text in cards and dialogs.

Updated 2 hours ago

body-xs12px / 18px · 400

Fine print.

Detail and UI

Figtree. Detail is medium (500) in the detail gray for metadata; UI is the 14px control text in medium (500).

Awaiting payment

detail-l16px / 20px · 500

Stat card labels.

Due Oct 24

detail-m14px / 18px · 500

Row metadata.

Brief

detail-s12px / 16px · 600

Column headers, tiny labels.

Search brands

ui14px / 18px · 500

Control text: fields, nav items, segmented control.

Signed

ui-sm12px / 16px · 500

Badges and small controls.

Code

INV-2026-014

code-m14px / 21px · 400

Invoice and contract numbers.