Reduction in secondary queue collisions along connected freight corridors
TxDOT Project 0-7142 Field Evaluation
Texas A&M Transportation Institute · State of Texas Mobility Research
TTI
DESIGN
SYSTEM
Advancing roadway safety, freight reliability, and public mobility through human-centered engineering and accessible interfaces.
TUX is the unified institutional design system, WCAG 2.2 Level AAA component library, and multi-platform engineering toolkit for the Texas A&M Transportation Institute — powering research publications, traffic telemetry dashboards, and public web portals across 13 runtimes.
$npm i @tti/tti-ux
Certified WCAG 2.2 Level AAA 14.8:1
0 Axe Violations · 189 Certified Components · 500 Prerendered Routes
system foundations
Visual Identity & System Tokens
brand · primary
#500000
TTI Maroon · 14.8:1 AAA
brand · accent
#CFA935
Warm Gold · Active Focus
spectrum · 5-band ribbon
Brand Spectrum Ribbon
component · badge
L3 · sensitiveactive
TuxBadge — sharp profile
component · alert
WCAG 2.2 Level AAA Compliant
Components provide >= 7.0:1 text contrast, >= 44px touch targets, and 3px focus rings.
coverage · census
163 / 163
Automated Unit & Axe Tests
hover memotion · corner-drop
4px / -4px
Signature TUX hover offset
applied outcomes & adoption
Why TUX Matters & How Teams Adopt It
Transportation research demands interfaces that work equally well in peer-reviewed TRB publications, high-glare roadside tablets, and statewide traffic operations centers.
01 · public & operator safety
Zero-Ambiguity Telemetry & High-Glare Legibility
Engineered for traffic management centers, roadside inspection tablets, and public travel advisories where >= 7.0:1 contrast and 44px touch targets prevent operator error.
100% WCAG 2.2 Level AAA
02 · research & policy impact
Turnkey Sponsor Reports & Academic Publishing
Standardizes TRB papers, TxDOT/FHWA technical reports, interactive data appendices, and citation exports so findings move seamlessly from lab datasets to public policy.
TRB · TxDOT · FHWA · USDOT Ready
03 · institutional velocity
One Token Source Across 13 Runtimes
Eliminates bespoke stylesheet rebuilds across TTI divisions with synchronized packages for Nuxt, React, WordPress Kadence, .NET Blazor, Python data apps, and native mobile.
13 Synchronized Targets
three consumption vectors
Choose Your Integration Path
Vector A@tti/tti-ux-wordpress
WordPress & Kadence Sites
Communications & Center Websites
Drop-in Kadence child theme, Gutenberg block patterns, and WCAG AAA stylesheet bridge for public-facing TTI websites and program portals.
Vector B@tti/tti-ux
Nuxt Studio Research Microsites
Interactive Reports & Project Portals
Zero-config Nuxt layer with 189 auto-imported `<Tux*>` components, academic bylines, citation exporters, and print-ready report frames.
Vector CMulti-Runtime SDK
Full-Stack Web & Data Applications
Dashboards, Simulators & Field Tools
Synchronized tokens and UI kits for Vue 3, React 19, .NET Razor/Blazor, Python (Streamlit/Dash), and native iOS/Android field apps.
institutional component library
The Complete TTI-UX Component Arsenal
189 production-ready components organized across 8 engineering families. Every component adheres to tokenized styling, responsive geometry, keyboard accessibility, and 100% WCAG 2.2 Level AAA compliance.
32 units
Primitives & Form Controls
Buttons, text fields, selects, date pickers, switches, and sliders with strict AAA contrast.
TuxButtonTuxSelectTuxDatePickerTuxSwitch
26 units
Data Presentation & Grids
High-density data tables, sortable grids, metric cards, trees, and hierarchical factoids.
TuxDataTableTuxRichDataGridTuxMetricCardTuxTree
22 units
Navigation & Application Shell
Multi-level site headers, dual-mode reactive sidebars, rail navs, breadcrumbs, and tab bars.
TuxReactiveSidebarTuxSiteNavTuxRailNavTuxBreadcrumb
24 units
Feedback, Status & Alerts
Level AAA alerts, modal dialogs, non-modal slide drawers, toast notifications, and badges.
TuxAlertTuxBadgeTuxModalTuxToast
21 units
Structural & Spatial Layout
Cards, interactive card slabs, containers, dividers, and simulated OS app frames.
TuxCardTuxCardSlabTuxAppFrameTuxSplitPane
18 units
Geospatial & Roadway Analysis
3D roadway cross-section cuts, AASHTO CAD elevation models, map flow legends, and strata.
TuxRoadwayCrossSectionTuxMapLegendTuxFlowVectors
24 units
Content, Media & Publishing
Celestial hero canvases, longform research publishing, author bylines, and code blocks.
TuxHeroCanvasTuxEditorialArticleTuxCodeBlock
22 units
Workflow, Overlays & AI Studio
Dynamic filter drawers, multi-step wizards, AI prompt chips, and research session streams.
TuxFilterPanelTuxStepperTuxPromptChips
interactive laboratory
Interactive Component Showcase
Test and inspect our advanced engineering, geospatial, academic publishing, and interactive UI components in real-time.
Active facility: TxDOT Urban Managed Freeway (I-35 / I-10 Katy). Classification: Urban Interstate · Dual-Carriageway with Express Managed Lanes. View mode: 3d-perspective. Geometry: 6 total cross-section elements (4 travel lanes, 62 ft paved roadbed, 107.5 ft total right-of-way width), cross-slope 2%, 4:1 Recoverable Foreslope. Traffic telemetry: Lane 1 (TEXpress Managed) Level of Service A (68 mph, 1420 vph); Lane 2 (GP Fast) Level of Service C (58 mph, 1890 vph); Lane 3 (GP Middle) Level of Service D (51 mph, 2150 vph); Lane 4 (GP Merge/Freight) Level of Service E (42 mph, 1760 vph).
AASHTO / TxDOT Geometric StandardUrban Interstate · Dual-Carriageway with Express Managed Lanes
TxDOT Urban Managed Freeway (I-35 / I-10 Katy)
Geospatial & CAD
<TuxRoadwayCrossSection /> · AASHTO & TxDOT Geometric Modeling
Native CSS 3D corridor cut with volumetric geotechnical strata, hydrodynamic drainage swale, and real-time HCM Level of Service (LOS) telemetry.
examples & layouts
Application Examples
View all 13 examplesReference implementations demonstrating how components assemble into complete TTI applications:
geospatial telemetry · mobility
Connected Corridor Analytics
Real-time arterial speed/volume telemetry, 3D roadway cross-sections, incident timeline, and HCM Level of Service diagnostics.
developer tool · git
TTI Code (Forgejo) Developer Portal
Self-hosted Git repository interface with file browser, pull requests, clone modal, and README display.
public marcom · tti.tamu.edu
Communications Portal
Public site layout matching tti.tamu.edu: header ribbon, brand spectrum, capability cluster, and section navigation.
employee intranet · my.tti
MyTTI Intranet Dashboard
Intranet layout matching my.tti.tamu.edu: navigation header, application drawer, service grid, calendar, and notices.
academic publishing · reports
Research Program Landing
Public research program portal with sponsor attribution, author bylines, interactive data charts, and TRB/TxDOT report exports.
research assistant · ai
TTI AI Studio Session
Research chat interface with prompt chips, reference citations, model selector, and telemetry details.
get started
Foundations
foundations
Tokens
Brand colors, surfaces, text roles, shadows, radii — every CSS variable the system exposes, visible at a glance.
foundations
Typography
Public Sans + JetBrains Mono. The heading--bold, heading--display, and eyebrow utilities in context.
foundations
Motion & spacing
Three durations, the 4px spacing ramp, and the tux corner-drop signature.
foundations
Icons
1,755 Lucide glyphs via @nuxt/icon. Click-to-copy in a searchable catalog.
primitives
Forms
Inputs, selects, radios, switches, sliders, and chip inputs — Nuxt UI form primitives with TTI maroon focus rings and consistent label rhythm.
beyond components
Patterns
Empty states, loading skeletons, confirmation flows, admonition stacks — conventions for the decisions components don't answer.
Cross-Platform Architecture
Installation GuideInstitutional Ecosystem & Synchronized Targets
Native design tokens, primitives, and component schemas synchronized across web, enterprise systems, and native mobile platforms with zero visual or behavioral drift.
vue
Vue 3 / Nuxt 4
@tti/tti-ux
Canonical SFCs, auto-imports & SSR layer
react
React 19 JSX
@tti/tti-ux-react
Native React components & typed hooks
elements
Web Components
@tti/tti-ux-elements
Framework-agnostic custom elements
html
HTML & Tokens
tux-tokens.css
Light, Dark & AAA custom properties
css
CSS Utility & Bridge
tux-bridge.css
Drop-in WCAG 2.2 AAA styles & ops
wordpress
WordPress & Kadence
@tti/tti-ux-wordpress
Kadence blocks & Gutenberg patterns
php
PHP Helpers
tti-ux-php
Server-side templates & markup helpers
dotnet
.NET Blazor / Razor
@tti/tti-ux-razor
C# Razor components & tag helpers
csharp
C# / .NET Assemblies
TTI.UX.Core
Strongly typed C# models & token constants
python
Python / Data Apps
tti-ux-python
Streamlit, Dash & Jupyter theme bridges
js
Modern JavaScript
@tti/tti-ux-js
Universal ESM/CJS bundles & runtime utilities
swift
Swift / iOS Native
TTIUXSwift
SwiftUI views, tokens & Dynamic Type
kotlin
Kotlin / Android Native
tti-ux-kotlin
Jetpack Compose composables & Material 3
recent updates
What's new
Full changelog- TUX 3.0 Release
Aligned component styles with the TTI Communications identity: 5-band spectrum ribbon, warm eggshell surfaces, Warm Gold rules, and sharp buttons.
- Component Test Coverage
Automated unit tests and Axe-core accessibility checks for all 189 components. 0 violations.
- WordPress & Kadence Support
Added Kadence child theme and TTI core plugin with Gutenberg patterns and WCAG AAA stylesheet.
- WCAG 2.2 Level AAA Stylesheet
Added tux-bridge.css and audit scripts for 7.0:1 text contrast, 44px touch targets, and 3px focus indicators.
- Token Studio
Interactive editor for inspecting and adjusting CSS tokens with JSON export.
governance & repository feedback
TTI-UX System Governance & Forgejo Issue Tracker
Maintained by TTI Communications and Network & Information Systems (`code.tti.tamu.edu/tti/tti-ux`). Authenticated TTI staff and researchers can push bug reports directly to Forgejo Issues or propose new components and tokens in the Forgejo Ideas section.
TTI Code Auth Required
Forgejo Issues · [Bug]
Report a Bug
Found a WCAG contrast regression, broken layout, or component defect? Push a structured bug report with reproduction steps directly to tti/tti-ux/issues.
Forgejo Ideas · [Idea]
Submit an Idea
Need a new transportation visualization, academic citation pattern, or token target? Submit a proposal to the tti/tti-ux Idea section.
Compliance & Architecture
Accessibility & Release Ledger
Inspect our automated axe-core component audit matrix, WCAG 2.2 Level AAA compliance statement, or browse the Forgejo repository.