Tokens · TUX

Interactive 3.0

Design Token Studio & Playground

Adjust radii, typography, and brand colors with live preview and theme.json export.

Open Token Studio →

brand anchor

TTI palette

tti-maroon (Maroon)

#500000

tti-maroon-deep

#3C0000

tti-gold (Warm Gold)

#CFA935

tti-navy

#005480

tti-teal

#006F79

tti-forest

#285C4D

tti-charcoal

#232323

communications identity

5-Band Division Spectrum

The 5-band color ribbon maps to TTI's research divisions:

TTI Maroon

Crash Testing & Roadside Safety

#500000

Deep Blue

Network Modeling & Connected Infra

#005480

Institutional Teal

Policy, Air Quality & Economic Analysis

#006F79

Forest Green

Transit Mobility & Multimodal

#285C4D

Warm Gold

Human Factors & Automated Vehicles

#CFA935

semantic roles

Surfaces & text

swatch	token	role
	--brand-primary	Primary action + identity (TTI Maroon #500000)
	--brand-accent	Warm Gold underline rules + active keylines (#CFA935)
	--brand-secondary	Inline text links (Deep Blue #005480)
	--surface-page	Page canvas background
	--surface-eggshell	Comm editorial background wash (#F9F9F7)
	--surface-cool-gray	Comm subtle container wash (#E8E8E8)
	--surface-raised	Cards, header, raised panels
	--surface-sunken	Footer, subtle well
	--surface-border	Dividers + input borders
	--text-primary	Body copy (high-contrast charcoal #040404)
	--text-secondary	Labels, meta
	--text-muted	Captions, timestamps
	--text-inverse	Text on dark fills
	--text-brand	Hover + active nav

status

State colors

--color-success

--color-warning

--color-danger

--color-error

--color-info

primary palette

Maroon ramp

Nuxt UI resolves color="primary" against these — anchored at #5C0025 = 500.

100

200

300

400

500

600

700

800

900

950

elevation

Shadows

shadow-sm

--shadow-sm

shadow-md

--shadow-md

shadow-lg

--shadow-lg

shadow-focus

--shadow-focus

shape

Radii

radius-sm

--radius-sm

radius-md

--radius-md

radius-lg

--radius-lg

radius-xl

--radius-xl