tooling
Contrast audit
Every contrast-risk surface rendered in all three themes side-by-side. Run npm run audit:contrast to crawl this page with puppeteer, compute WCAG 2.2 contrast ratios for every text/background pair, and fail on regressions. CI gates on AAA (7:1 normal · 4.5:1 large) — see the accessibility page for the full conformance statement.
Light
data-theme="tti"
Default theme — TTI maroon on near-white surface.
typography
H1 · Editorial
H2 · Section title
H3 · Subsection
Body text — Open Sans set at 15px on var(--text-primary). The quick brown fox jumps over the lazy dog. 0123456789.
Secondary text — var(--text-secondary). Muted by 8% for hierarchy without sacrificing readability.
Muted text — var(--text-muted). Lowest stop in the text-color ramp; metadata, captions, eyebrows.
Inline link in TTI navy styled span.
color tokens
TuxAlert · all variants
TuxBadge · tiers + states + tags
TuxButton · all intents
TuxCard · static + linked
card · static
Static card content
Body copy on a card surface. Tests muted and secondary text contrast against the elevated raised surface.
card · linked
Linked card with corner-drop
Hover triggers the maroon corner-drop signature. Active link state flips to brand-primary text on a 3% maroon-tint bg.
TuxPageHeader · all tones
plain
Plain tone header
neutral
Neutral tone
maroon
Maroon tone
editorial accents
"Engineering-only treatments rarely hold past 24 months — this one is doing something different."
code surfaces
Inline code token rendering, plus a fenced block:
const greet = (name: string) => {
console.log(`hello ${name}`);
};form controls
TuxFooter · maroon + legal strip
Dark
data-theme="tti-dark"
Dark mode — same brand vocabulary, inverted surfaces.
typography
H1 · Editorial
H2 · Section title
H3 · Subsection
Body text — Open Sans set at 15px on var(--text-primary). The quick brown fox jumps over the lazy dog. 0123456789.
Secondary text — var(--text-secondary). Muted by 8% for hierarchy without sacrificing readability.
Muted text — var(--text-muted). Lowest stop in the text-color ramp; metadata, captions, eyebrows.
Inline link in TTI navy styled span.
color tokens
TuxAlert · all variants
TuxBadge · tiers + states + tags
TuxButton · all intents
TuxCard · static + linked
card · static
Static card content
Body copy on a card surface. Tests muted and secondary text contrast against the elevated raised surface.
card · linked
Linked card with corner-drop
Hover triggers the maroon corner-drop signature. Active link state flips to brand-primary text on a 3% maroon-tint bg.
TuxPageHeader · all tones
plain
Plain tone header
neutral
Neutral tone
maroon
Maroon tone
editorial accents
"Engineering-only treatments rarely hold past 24 months — this one is doing something different."
code surfaces
Inline code token rendering, plus a fenced block:
const greet = (name: string) => {
console.log(`hello ${name}`);
};form controls
TuxFooter · maroon + legal strip
High-contrast
data-theme="tti-hc"
WCAG AAA opt-in — pure black/white + bolder borders.
typography
H1 · Editorial
H2 · Section title
H3 · Subsection
Body text — Open Sans set at 15px on var(--text-primary). The quick brown fox jumps over the lazy dog. 0123456789.
Secondary text — var(--text-secondary). Muted by 8% for hierarchy without sacrificing readability.
Muted text — var(--text-muted). Lowest stop in the text-color ramp; metadata, captions, eyebrows.
Inline link in TTI navy styled span.
color tokens
TuxAlert · all variants
TuxBadge · tiers + states + tags
TuxButton · all intents
TuxCard · static + linked
card · static
Static card content
Body copy on a card surface. Tests muted and secondary text contrast against the elevated raised surface.
card · linked
Linked card with corner-drop
Hover triggers the maroon corner-drop signature. Active link state flips to brand-primary text on a 3% maroon-tint bg.
TuxPageHeader · all tones
plain
Plain tone header
neutral
Neutral tone
maroon
Maroon tone
editorial accents
"Engineering-only treatments rarely hold past 24 months — this one is doing something different."
code surfaces
Inline code token rendering, plus a fenced block:
const greet = (name: string) => {
console.log(`hello ${name}`);
};form controls
TuxFooter · maroon + legal strip