tti-uxv2.1.0

TTIDesignSystem

A living style guide for Texas A&M Transportation Institute apps built on Nuxt 4. Every page you see is rendered by the same components your app imports — so this site is the source of truth, not a doc of it.

Three products consume this system today: Landscape (sensitive-data classifier), tti-ai-studio (LLM tooling), and this style guide itself. Themed for TTI maroon & gold, structured so a sister institution can repaint via tokens without forking. Apache 2.0.

Read the doctrineBrowse componentsRepo

at a glance

Visual identity

Full token reference

brand · primary

#5C0025

TTI maroon

brand · accent

#DDAC37

Aggie gold

type · display

Aa

Public Sans · italic 800

component · live

L3 · sensitiveactive

TuxBadge — tiers + states

component · live

Container queries everywhere.

motion · signature

Corner-drop

Hover → 6px translate + maroon shadow

hover me

recent updates

What's new

Full changelog
  • Suite chrome — TuxUserMenu + TuxUtilityCluster

    The portal-unification slice: TTI Portals registry (design/apps.json + useTuxApps), TuxUtilityCluster with the law-fixed search · notifications · theme · waffle · identity order, TuxUserMenu with cluster + rail-footer mounts, and the docs site dogfooding its own waffle.

  • Site-wide a11y pass + TuxRailNav

    Drove the new axe-core gate to zero across all pages; added TuxRailNav — a native <details> collapsible sidebar nav that replaces UNavigationMenu's inaccessible collapsible chevron in the example shells.

  • Doc-site chrome batch

    TuxDocsSidebar, TuxTOC, TuxSiteNav, TuxDropdown, TuxMegaMenu — the navigation + doc-shape components for technical documentation sites.

  • Authoring + content batch

    TuxCodeBlock, TuxDiagram, MDC integration. Markdown rendering with Tux* components inline; SSR-rendered Shiki + Mermaid.

  • Container queries everywhere

    Responsive layouts now key off component width via container queries, not viewport width — fixes the long-standing "works in full-width but breaks in a narrow demo wrapper" bug.

  • tti-ux extracted from Landscape

    Forked the design-system source out of landscape into a standalone runnable style guide. Three downstream consumers: Landscape, tti-ai-studio, this style guide itself.

see it in context

Composition examples

If you're trying to figure out what tux is for, these three pages assemble 9–13 components into real-shape surfaces — a Landscape dashboard, a research-program landing, a tti-ai-studio session.

product · IT-facing

Landscape dashboard

Index overview — treemap viz, faceted file search, scan table, compliance alert.

marketing · public

Research landing

Hero + factoids + media slab + focus areas + program slabs + news + testimonials + CTA.

product · chat

tti-ai-studio session

LLM session view — composer, citations, right-rail corpus + usage + recent sessions, ⌘K palette.

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.