foundations

Style variants

tux ships three section styles. Most product surfaces sit in default and stay there. Bold is for marketing splashes and athletic surfaces. Elegant is for research, policy, and administrative pages. Opt in with .style--bold or .style--elegant on any ancestor — or with a per-component BEM modifier.

style 1 / 3

Default — Oswald + maroon hairline

Quietest of the three. Used everywhere a section needs structure but not personality — dashboards, admin chrome, table-heavy pages, internal tooling. Headings inherit --font-display (Oswald), and .section-header renders a soft-faded maroon hairline below the title.

research operations

Recent activity

scan

Q4 grant deliverables

4,217 files indexed across 12 directories. Two classifiers flagged for review.

classifier

CLS-204 · ITAR detection

Last retrained 2026-04-12. 93.4% precision on validation set.

style 2 / 3

Bold — Work Sans + stacked maroon bars

Eye-catching. Right for marketing splashes, athletic-flavored landing pages, event blocks. Headings are heavy Work Sans (800-weight, mixed-case, italic hero flourish on .heading--display), and the section signature is a stacked-bar rule that reads like punctuation.

2026 transportation symposium

Register today

keynote

Connected vehicle research

Day 1 · 9:00 AM · Rellis Conference Center.

workshop

Hands-on Landscape intake

Day 2 · 1:00 PM · Bring your own corpus. Limited to 30 seats.

style 3 / 3

Elegant — Georgia + diagonal hash

Refined and stately. Used for research publications, annual reports, faculty profiles, policy and administrative surfaces. Headings switch to Georgia (a system serif, no font fetch needed), the section signature becomes a soft-faded diagonal hash, and cards drop the 2px maroon outline for a dotted maroon border.

annual report 2025

Director's letter

publication

Microsimulation in rural corridor planning

Authored by R. Chen, M. Acosta. Transportation Research Record, Vol. 2671, Issue 4 — pp. 88–101.

faculty

Dr. Lina Velazquez

Senior Research Scientist · Connected & Automated Vehicles Program · 2018–present.

opt-in

Page-level vs per-component

The class hierarchy is intentional. Apply .style--bold or .style--elegant on a page wrapper and every heading, section header, and card under it picks up the variant. To embed a single bold hero or elegant pull-quote inside an otherwise default page, reach for the BEM modifiers directly: .section-header--bold, .card-static--elegant, .heading--elegant. The modifier route doesn't leak because no parent .style--* wrapper changes --font-display.