five lanes

Family roster

Every face on the page below is reached via a CSS variable rather than a hard-coded font-family. Swapping the underlying face is a single token change in app/assets/css/tokens.css.

--font-body

Open Sans

Body, eyebrows, H4+, lists, captions, every form input label.

The quick brown fox jumps over the lazy dog. 0123456789

--font-display

Oswald

Default-style H1–H3. Condensed, editorial, restrained.

Texas A&M Transportation Institute · 2026

--font-bold

Work Sans

Bold-style H1–H3, all buttons, the heading--bold gold-bar utility.

Q1 Research Grants · 2026

--font-elegant

Georgia

Elegant-style H1–H3. Annual reports, policy, administrative surfaces.

An Annual Review of Funded Research

--font-mono

JetBrains Mono

Paths, IDs, hashes, code, kbd hints. Never editorial copy.

/research/grants-2024/audit-7f5bd95a-2c24-4cde

heading--display

Editorial maximalist

Italic, uppercase, extrabold, gold accent bar. The most visually-loud heading utility — used sparingly for landing copy, not chrome.

Texas A&M Transportation Institute

heading--bold

Section workhorse

Section titles + editorial callouts. Shorter gold rule below, upright Work Sans weight. Every "h2" you see on a Tux page carries this.

Q1 research grants

heading--elegant

Annual-report face

Georgia, mixed-case, no rule — the restrained option for formal surfaces. Pair with .heading--elegant--italic for the italic body copy treatment.

An annual review of funded research

three variants

Style variants

Opt in by adding .style--bold or .style--elegant to any ancestor (the body, a section, a card). Each variant rebinds --font-display so every H1–H3 in scope swaps family without per-element edits. Full demos at /style-variants.

default · Oswald

Bridge condition survey

bold · Work Sans

Bridge condition survey

elegant · Georgia

Bridge condition survey

meta labels

Eyebrow & subhead

Uppercase Work Sans, tracked-out, ~10px. Shipped as the .eyebrow and .subhead utilities in globals.css. Use eyebrow above a heading, subhead below; either works alone as a meta label inline with body copy.

eyebrow · before

Scan 7f5bd95a

subhead · after

body copy + mono

Paragraphs & inline

The quick brown fox jumps over the lazy dog. Open Sans is the default body face — comfortable for long-form reading, with a humanist x-height that pairs cleanly with the more condensed Oswald display. Inline links like this one render in TTI navy with a hairline underline.

Use --font-mono for IDs, paths, hashes, and shortcut hints — for example 7f5bd95a-2c24-4cde — so they read as machine tokens, not editorial copy. Kbd glyphs use the same mono lane via TuxKbd.

long-form

TuxProse wrapper

Every page that renders markdown (/changelog, /design/[doc], /markdown, future ADR pages) wraps the renderer output in <TuxProse>. Single source of truth for H1/H2/H3/p/ul/blockquote/code/table styling — no more per-page :deep() blocks to keep in sync.

Document title

A paragraph in Open Sans, 0.9375rem, 1.75 leading. Italic emphasis reads as it should, and inline code picks up the maroon tint against the sunken surface.

Section heading with maroon rule

H2s carry the same 2px maroon underline as .heading--bold but through the prose layer — authors don't need to add utility classes to their markdown.

List items use the body face
With comfortable 1.75 leading
And generous nesting room

Pull quotes get a maroon left rule and italic body, matching the TuxBlockquote rhythm.

scale

Type scale

text-5xl · Display

text-4xl · Page title

text-3xl · Section

text-2xl · Subsection

text-xl · Card heading

text-lg · Lede

text-base · Body

text-sm · Meta

text-xs · Caption