Typography

Thirteen live text classes. Every value comes from the 2026 Type collection. Drag the viewport below 767px to verify the Mobile mode fires.

text-display-2xl — 200 / 96 · Medium · 0.9 · -0.02em
Donate
text-display-xl — 96 / 40 · Regular · 0.95 · -0.03em
Walkable Streets
text-display-lg — 80 / 40 · Regular · 0.9 · -0.03em
Contact Us
text-display-md — 64 / 32 · Regular · 1.0 · -0.03em
We are sponsored by world-class Miami based organizations
text-display-sm — 56 / 32 · Regular · 1.05 · -0.02em
Connectivity
text-heading-xl — 40 / 32 · Regular · 1.1 · -0.02em
TransitAlliance Miami In Action
text-heading-lg — 32 / 24 · Medium · 1.1 · -0.01em
It Takes a Community
text-heading-md — 28 / 24 · Medium · 1.2 · 0
Frequently Asked Questions
text-heading-sm — 24 / 20 · Medium · 1.2 · 0
Board Chair
text-body-lg — 20 / 20 · Regular · 1.5 · 0
Transportation is the fabric that binds any city together. How we do it affects every aspect of our community.
text-body-md — 16 / 16 · Regular · 1.5 · 0
Get the latest news on our advocacy, new campaigns, and upcoming events every other week.
text-body-sm — 14 / 14 · Regular · 1.5 · 0
Director of Digital Skills at Microsoft Philanthropies
text-caption — 12 / 12 · Medium · 1.5 · +0.005em
Scroll

Surfaces

Each surface class sets a background and its matching default text colour, so descendant text inherits correctly without a variant.

u-surface-page
surface-page #F8F8F6 on text-on-light-primary #0F0F0F — 18.03:1, AAA
u-surface-raised
surface-raised #FFFFFF on text-on-light-primary #0F0F0F — 19.17:1, AAA
u-surface-inverse
surface-page-inverse #0F0F0F on text-on-dark-primary #F8F8F6 — 18.03:1, AAA
u-surface-brand
surface-brand #DE5B28 on text-on-brand #FFFFFF — 3.73:1, AA large text only. This body line is 16px and does not pass.

Text colour utilities

Type classes set type only. Colour composes on top via a utility, so one text class works on any surface.

u-text-on-dark-strong — #FFFFFF · 19.17:1
Frequent and reliable transit can connect Miamians to their next job.
inherited from surface — text-on-dark-primary #F8F8F6 · 18.03:1
Frequent and reliable transit can connect Miamians to their next job.
u-text-on-dark-muted — #D8D8D8 · 13.45:1
Frequent and reliable transit can connect Miamians to their next job.
u-text-on-dark-subtle — #C5C5C5 · 11.11:1
Frequent and reliable transit can connect Miamians to their next job.
u-text-brand — #DE5B28 on #0F0F0F · 5.14:1, passes AA
Frequent and reliable transit can connect Miamians to their next job.

Spacing, radius and border

Spacing roles currently step at 767px rather than scaling. Once the clamp values are entered they will move continuously — this page is where you verify that.

space-section-y — 80 desktop / 40 mobile
space-section-y-lg — 120 / 56
space-gutter-x — 80 / 16 · the left and right padding of this container
space-block-gap — 40 / 24 · the gap between these headings and body
space-group-gap — 24 / 16 · the gap between these rows
space-card-padding — 24 / 16 · space-card-gap — 16 / 12
layout-container-max — 1568px · the max width of this container
radius-card — 24px
Applied to this card, and to every u-card on the site.
radius scale
sharp 2 · control 8 · card 24 · panel 40 · pill 999
border-width: hairline 1 · default 2 · thick 4 · heavy 8