tti-ux · living style guide · v0.1.0
The
TTI Design
System
The shared visual and interaction layer for internal Nuxt 4 applications at the Texas A&M Transportation Institute.
Institutional, not
instagrammable.
tti-uxfoundations
Three commitments.
Institutional, not instagrammable.
Research-agency feel. Specificity over marketing language. We name the classifier version, the ITAR bucket, the exact grant number — not vague metaphors.
Information over decoration.
Dense data tables with one-token spacing. Oversized editorial numerals for summary stats. No hero illustrations, no dashboards that look like magazines.
One engineer, five apps, ten years.
Decisions biased toward low-maintenance. Self-hosted fonts. No bespoke animation libraries. Themes layered on CSS variables, not rewritten per-institution.
tti-uxcontext · fy2024
The largest university-affiliated transportation research agency in the United States.
tti-ux is the common visual layer for the internal tools serving that research — file classifiers, BI dashboards, knowledge-grounded LLM chat, and the living style guide you are reading.
tti-uxcatalog · nine wrappers on Nuxt UI
Components.
- 01TuxAlertDocusaurus-style admonitions — 8 variants
- 02TuxBadgeClassification tiers, scan states, tags, counts
- 03TuxButtonFour semantic intents incl. destructive hover
- 04TuxCardStatic or linked — corner-drop hover choreography
- 05TuxModalUModal with eyebrow + gold-bar title
- 06TuxPageHeaderEyebrow + heading + subtitle opener
- 07TuxTableUTable with tux chrome + auto status cells
Tokens
Brand colors, surfaces, text roles, shadows, radii — every CSS variable the system exposes, visible at a glance.
tti-uxbrand · six hexes, one rule
The palette.
tti-uxUse it. Extend it.
Keep it institutional.
tti-ux · v0.1.0
tti-ux