welcome

Getting started

A six-step tour through what tux is, how to consume it, and where to go next. New visitors should read this top-to-bottom; returning visitors will skim the sections that changed.
Browse the catalogRead the manifesto

At a glance

tti-ux v2.1.0

130+

Tux* components + 5 composables. All auto-imported.

6

Real-shape composition examples across three product surfaces.

3

Themes shipped (light · dark · WCAG AAA high-contrast).

Six-step tour

  1. Install + run

    Clone the repo, npm install, npm run dev. Every page under /components is a live demo rendered by the same component your app imports.

  2. Read the manifesto

    Doctrine (/design/tux) frames what tux is for, what it deliberately is not, and the editorial-research voice that shows up in tokens, motion, and copy.

  3. Skim the catalog

    Components (/components) lists every Tux* in the system. Tightly-coupled clusters (research-publishing, TTI identity, geospatial, forms wrapper) share a single demo route.

  4. See it composed

    Examples (/examples) shows six real-shape pages — Landscape dashboard, research-program landing, tti-ai-studio session, research paper, TTI center landing, sidebar shell. Each composes 9-15 Tux* components.

  5. Pin a release

    Add `extends: ["github:ttitamu/tti-ux#v2.1.0"]` to your consuming app's nuxt.config.ts. You get auto-imports, tokens, themed Nuxt UI, and the markdown pipeline.

  6. Ship + report regressions

    File issues against the GitHub repo. CHANGELOG.md is the canonical history; the home page's recent-updates feed is the glance-able version.

1 · Install + run

Local dev surfaces every component at http://localhost:3030. The dev server hot-reloads on token edits, component edits, and showcase-page edits alike.

terminal
git clone https://github.com/ttitamu/tti-ux.git
cd tti-ux
npm install
npm run dev
# → http://localhost:3030

2 · Three product shapes

tux serves three concurrent product surfaces at TTI. Each example here demonstrates one shape end-to-end so consumers can see the system stretched in the direction they care about.

  • Data-dense IT chrome

    Landscape (sensitive-data classifier). Sidebar shell + KPI rows + treemap + faceted search + activity rail. Operational density at editorial-research quality.

  • Marketing / research surfaces

    Public-facing program landings, center identity pages, published papers. Hero rhythm, factoids, testimonials, blockquotes, identity primitives, full author-byline + citation-export.

  • Chat / agent product views

    tti-ai-studio. ChatMessage with tool calls + artifacts + branch nav + citations + context meter + composer + suggestion chips. All the AI-surface idioms TUX absorbed from Vercel + Fluent + OpenAI/Anthropic.

3 · Component families

Six tightly-coupled clusters where reading the components together is the point. The remaining ~130 components are listed individually in the sidebar.

research-publishing

Editorial-research paper

Abstract · AuthorByline · PaperMeta · FigureCaption · TableCaption · Footnote · CitationExport · Acknowledgments. The published-paper shape.

8 components

tti-identity

TTI identity / brand

Researcher · Lab · Program · FundingSource · CenterBadge. The institutional-identity surfaces that map directly to TTI organizational structure.

5 components

geospatial

Maps + corridors

MapEmbed · MapLegend · MapMarker · CorridorStrip. Closes the Priority B geospatial roadmap section.

4 components

forms-wrapper

Form composition layer

FormField · MarkdownEditor · FileDropzone · ValidationSummary · ConfirmDialog. The TUX wrapper above Nuxt UI form primitives.

5 components

charts

Native chart family

Line · Bar · Area · Scatter · Donut · Gauge · Geographic · Sunburst · Sparkline. Native SVG rendering with maroon-led palette and reduced-motion-safe entrance animations.

9 components

platform-aware

Tauri app-shell primitives

AppFrame · MenuBar · SplashScreen · TabBar · FAB · FocusView · AppSwitcher · SplitPane. Plus useTuxPlatform() + useTuxSwipe() + useTuxRipple().

8 components

4 · Examples

Six real-shape pages that assemble 5-15 Tux* components into a realistic surface. Illustrative data, real composition rhythm.

product · IT-facing

Landscape dashboard

15 Tux* components

marketing · public

Research-program landing

10 Tux* components

product · chat

tti-ai-studio session

9 Tux* components

layout · app shell

Sidebar shell

5 Tux* components

publishing · academic

Research paper

12 Tux* components

marketing · TTI identity

TTI center landing

8 Tux* components

5 · Doctrine docs

Nine narrative design documents under design/, plus the canonical tokens.json source. Read in the order below to get the full mental model.

Read first

  • Doctrine The manifesto. What tux is for, deliberately is not.
  • Components Doctrine + the full pattern-coverage map.
  • Compositions "X + Y composes more value than they do alone." Seven composition patterns.

Then

  • Palette Visual identity — maroon-led palette across three themes.
  • Chart foundations Axis/grid/legend tokens, value-label placement, brush selectors, alt-text patterns.
  • Platform awareness Tauri / multi-platform doctrine. "One tree, platform-adaptive at the chrome layer."

Reference

  • Tauri bindings Which Tux* components call which Tauri APIs + capability allowlist template.
  • Visual language Token-only refresh notes — two-ring focus, transportation-tempo easings, four-tier elevation.
  • Roadmap What's shipped, what's deferred, what's carry-forward.

6 · Theming

Three themes ship: tti (default light), tti-dark (warm-charcoal dark), and tti-hc (WCAG AAA high-contrast). Toggle via the chrome controls or set data-theme on <html>. A sister institution themes by adding a [data-theme="<name>"] block to app/assets/css/tokens.css overriding only the --brand-* slots — no fork required.

Platform-aware

tux now ships as a Tauri desktop layer for Windows 11 / macOS Tahoe / Ubuntu, with Tauri Mobile (iOS / Android) on the near horizon. The brand layer stays invariant; the chrome layer adapts. Platform detection is via useTuxPlatform() — a module-singleton that sets [data-platform] on <html> post-hydration. Library-agnostic Tauri detection (no static @tauri-apps/api import) keeps the web build slim.

Read platform-awarenessRead tauri-bindings

Accessibility

  • Target: WCAG 2.2 Level AA conformance.
  • Color contrast: verified at WCAG 2.2 Level AAA across all three themes. CI fails if any pair regresses.
  • Motion: every animation respects prefers-reduced-motion: reduce and collapses to instant. Non-negotiable.
  • Touch + gesture: every swipe action has a visible alternative (keyboard or button). Swipe-only is a screen-reader trap.
Read the conformance statementView the contrast audit

Consuming from another app

Pin to a tagged release straight from GitHub. Bumping the consumer's pin is how you opt in to a new tux version. Tags are immutable; upgrade deliberately by bumping the #vX.Y.Z ref.

nuxt.config.ts
// nuxt.config.ts of the consuming app
export default defineNuxtConfig({
  extends: ["github:ttitamu/tti-ux#v2.1.0"],
});

See CHANGELOG.md for what each version contains.

next stops

Pick a thread

Catalog · Compositions · Roadmap. The three places contributors most often start once the tour wraps.

Browse all componentsRead the compositions doctrineSee the roadmap