CompositionExamples & Layouts
Complete page layouts and operational surfaces built with TUX components for Texas A&M Transportation Institute applications.
Composition Gallery
13 Suites
End-to-end production pages
TUX Component Count
112 Instances
Composed across all suites
Interactive Viewports
100% Tested
Desktop, tablet, & mobile
Ops board
Monitoring pane: status chips, row tints, gold heading keyline, hairline table. Composes TuxStatus, TuxSparkline, and kit/css/tux-ops.css — the overlay class API, not a Core fork.
COMPOSED COMPONENTS (4):
Corridor analytics
Connected corridor operations pane for Texas multimodal transportation networks. Composes TuxPageHeader, TuxStatus, TuxSparkline, TuxAlert, TuxBadge, TuxCitationExport, TuxButton, and real-time detector telemetry tables.
COMPOSED COMPONENTS (8):
TTI communications portal
Flagship public redesign showcase replicating tti.tamu.edu. Composes TuxPortalHeader (Comm mode) + TuxCommHero (diagonal chamfer + maroon slab + gold square) + TuxSectionHeader (two-tone rule) + TuxCapabilityCluster (orbital medallions) + TuxTOC (Comm gold keyline) + TuxButton (Kadence sharp profile).
COMPOSED COMPONENTS (8):
Research program landing
Public-facing research-program hero. Composes TuxPageHeader (hero), TuxFactoid, TuxBlockquote, TuxMediaSlab, TuxIconFeature, TuxCardSlab, TuxNewsCollection, TuxTestimonial, TuxCTA, and TuxLinkList.
COMPOSED COMPONENTS (10):
TTI center landing
Research Center landing page exercising the TTI identity cluster end-to-end. TuxLab as hero, TuxResearcher × 3 featured, TuxProgram × 3 active programs, TuxFundingSource strip, TuxCenterBadge throughout (including cross-center links to related TTI research programs).
COMPOSED COMPONENTS (8):
Connected transportation portal
Institutional portal layout matching tti.tamu.edu conventions. Composes TuxPortalShell + TuxPortalHeader (two-tier maroon utility bar and brand ribbon) + TuxBreadcrumbs + sharp buttons + feedback pill + institutional TuxFooter.
COMPOSED COMPONENTS (7):
MyTTI intranet portal
Flagship employee portal reproducing my.tti.tamu.edu. Composes TuxPortalHeader (intranet mode with social icons + MY APPS launcher) + TuxSpectrumRibbon (5-band institutional ribbon) + TuxSpectrumFacts (5-column metric banner) + TuxTileGrid (fundamentals launcher) + TuxEventCalendarRow (green date chips) + TuxFooter.
COMPOSED COMPONENTS (9):
TTI Code developer portal
Self-hosted Git repository portal reproducing code.tti.tamu.edu. Branded in Comm language with sharp buttons, 5-band brand spectrum tags, Warm Gold keylines, and eggshell README wells.
COMPOSED COMPONENTS (7):
Research paper
Full editorial-research paper page exercising the research-publishing cluster end-to-end. Composes TuxPageHeader + TuxAuthorByline + TuxPaperMeta + TuxAbstract + TuxFigureCaption + TuxTableCaption + TuxFootnote + TuxCitationExport + TuxAcknowledgments.
COMPOSED COMPONENTS (12):
tti-ai-studio session
LLM/agent session view. Composes TuxBreadcrumbs, TuxPageHeader, TuxAlert (compliance), TuxSectionHeader, TuxCallout, TuxDescriptionList, TuxFactoid, TuxAccordion, and TuxCommandPalette.
COMPOSED COMPONENTS (9):
Sidebar shell
Demonstrates `app/layouts/sidebar.vue` — the opt-in app-shell layout built on UDashboardGroup + UDashboardSidebar + UDashboardPanel. Four named slots (header, rail-header, rail, rail-footer) + default content. Try resizing.
COMPOSED COMPONENTS (5):
Legacy bridge & WCAG 2.2 AAA
Zero-JavaScript drop-in stylesheet (tux-bridge.css) upgrading legacy PHP, ASP.NET, and WordPress sites to 2026 aesthetics with full WCAG 2.2 Level AAA compliance. Features Before/After toggle and real-time contrast auditor.
COMPOSED COMPONENTS (6):
System error pages (404, 401, 403, 503, 500)
Full-page editorial error boundaries with 5-band spectrum ribbons, sharp Kadence buttons, diagnostic trace wells, and recovery routing for TTI applications.
COMPOSED COMPONENTS (4):
Application Archetypes Doctrine
TUX supports three primary application formats: data-dense monitoring dashboards (Corridor Analytics, Ops Board), public and research publications (portals, reports, and identity landings), and conversational interfaces (TTI AI Studio). Each archetype implements strict token contracts and WCAG 2.2 Level AAA standards.
1. Operational Telemetry
Status is var(--status-ok), never var(--brand-primary). Maroon is reserved for institutional chrome. Gold is an accent keyline. Hairline tables use var(--surface-border).
2. Public Editorial & Marcom
Two-tier institutional header, diagonal chamfer hero slabs, Kadence sharp button geometry, and 5-band institutional brand spectrum ribbons matching tti.tamu.edu.
Read compositions.md →3. Enterprise Workspaces & AI
Command palettes, day-grouped chat sessions, grounding source rails, CUI / ITAR compliance banners, and multi-format citation export engines.
Read unification-plan.md →