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

brand-filltext-on-brand · marketing panel

brand-accentdark text · gold accent

brand-primarybrand-text on page

surface-pageprimary text

surface-raisedprimary text

surface-sunkensecondary text

chart & CVD series tokens

--chart-1Series 1 · Brand

--chart-2Series 2 · Brand

--chart-3Series 3 · Brand

--chart-4Series 4 · Brand

--chart-cvd-1CVD 1 · Okabe-Ito

--chart-cvd-2CVD 2 · Okabe-Ito

--chart-cvd-3CVD 3 · Okabe-Ito

--chart-cvd-4CVD 4 · Okabe-Ito

TuxAlert · all variants

Info alert

Default informational message with a body line.

Success alert

Operation completed without errors.

Warning alert

Heads up — review before proceeding.

Danger alert

Destructive action; double-check.

Tip alert

Soft guidance, low-stakes.

Compliance alert

ITAR-tagged corpus segment. Token-gated.

TuxBadge · tiers + states + tags

publicinternalsensitiverestricted

completedrunningfailedqueued

topic:safetyenv:prodfiles42

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

editorial accents

"Engineering-only treatments rarely hold past 24 months — this one is doing something different."

Dr. Lina Hassan · PI · Roadway Safety

code surfaces

Inline code token rendering, plus a fenced block:

const greet = (name: string) => {
  console.log(`hello ${name}`);
};

form controls

Text input

Select

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

brand-filltext-on-brand · marketing panel

brand-accentdark text · gold accent

brand-primarybrand-text on page

surface-pageprimary text

surface-raisedprimary text

surface-sunkensecondary text

chart & CVD series tokens

--chart-1Series 1 · Brand

--chart-2Series 2 · Brand

--chart-3Series 3 · Brand

--chart-4Series 4 · Brand

--chart-cvd-1CVD 1 · Okabe-Ito

--chart-cvd-2CVD 2 · Okabe-Ito

--chart-cvd-3CVD 3 · Okabe-Ito

--chart-cvd-4CVD 4 · Okabe-Ito

TuxAlert · all variants

Info alert

Default informational message with a body line.

Success alert

Operation completed without errors.

Warning alert

Heads up — review before proceeding.

Danger alert

Destructive action; double-check.

Tip alert

Soft guidance, low-stakes.

Compliance alert

ITAR-tagged corpus segment. Token-gated.

TuxBadge · tiers + states + tags

publicinternalsensitiverestricted

completedrunningfailedqueued

topic:safetyenv:prodfiles42

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

editorial accents

"Engineering-only treatments rarely hold past 24 months — this one is doing something different."

Dr. Lina Hassan · PI · Roadway Safety

code surfaces

Inline code token rendering, plus a fenced block:

const greet = (name: string) => {
  console.log(`hello ${name}`);
};

form controls

Text input

Select

TuxFooter · maroon + legal strip

Soft Dark

data-theme="tti-dark" data-theme-variant="soft"

Anti-halation comfort — slate-charcoal (#161A22) + softened ink for astigmatism.

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

brand-filltext-on-brand · marketing panel

brand-accentdark text · gold accent

brand-primarybrand-text on page

surface-pageprimary text

surface-raisedprimary text

surface-sunkensecondary text

chart & CVD series tokens

--chart-1Series 1 · Brand

--chart-2Series 2 · Brand

--chart-3Series 3 · Brand

--chart-4Series 4 · Brand

--chart-cvd-1CVD 1 · Okabe-Ito

--chart-cvd-2CVD 2 · Okabe-Ito

--chart-cvd-3CVD 3 · Okabe-Ito

--chart-cvd-4CVD 4 · Okabe-Ito

TuxAlert · all variants

Info alert

Default informational message with a body line.

Success alert

Operation completed without errors.

Warning alert

Heads up — review before proceeding.

Danger alert

Destructive action; double-check.

Tip alert

Soft guidance, low-stakes.

Compliance alert

ITAR-tagged corpus segment. Token-gated.

TuxBadge · tiers + states + tags

publicinternalsensitiverestricted

completedrunningfailedqueued

topic:safetyenv:prodfiles42

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

editorial accents

"Engineering-only treatments rarely hold past 24 months — this one is doing something different."

Dr. Lina Hassan · PI · Roadway Safety

code surfaces

Inline code token rendering, plus a fenced block:

const greet = (name: string) => {
  console.log(`hello ${name}`);
};

form controls

Text input

Select

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

brand-filltext-on-brand · marketing panel

brand-accentdark text · gold accent

brand-primarybrand-text on page

surface-pageprimary text

surface-raisedprimary text

surface-sunkensecondary text

chart & CVD series tokens

--chart-1Series 1 · Brand

--chart-2Series 2 · Brand

--chart-3Series 3 · Brand

--chart-4Series 4 · Brand

--chart-cvd-1CVD 1 · Okabe-Ito

--chart-cvd-2CVD 2 · Okabe-Ito

--chart-cvd-3CVD 3 · Okabe-Ito

--chart-cvd-4CVD 4 · Okabe-Ito

TuxAlert · all variants

Info alert

Default informational message with a body line.

Success alert

Operation completed without errors.

Warning alert

Heads up — review before proceeding.

Danger alert

Destructive action; double-check.

Tip alert

Soft guidance, low-stakes.

Compliance alert

ITAR-tagged corpus segment. Token-gated.

TuxBadge · tiers + states + tags

publicinternalsensitiverestricted

completedrunningfailedqueued

topic:safetyenv:prodfiles42

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

editorial accents

"Engineering-only treatments rarely hold past 24 months — this one is doing something different."

Dr. Lina Hassan · PI · Roadway Safety

code surfaces

Inline code token rendering, plus a fenced block:

const greet = (name: string) => {
  console.log(`hello ${name}`);
};

form controls

Text input

Select

TuxFooter · maroon + legal strip

vision accessibility

CVD Categorical Palette Matrix (Light vs. Dark / Soft-Dark)

All five categorical telemetry ramps defined in useTuxVisionPrefs (--chart-1..8 and --chart-cvd-1..8), paired with high-contrast surface cutouts and geometric markers for triple-channel redundancy.

TTI Brand Standard

data-cvd-mode="brand"

Light surface (#FAF8F5)

#500000

#3F5A6F

#C7973C

#6B8E5A

#8C5A3C

#5C7080

#A33A3A

#3C5A87

Dark & Soft-Dark surface (#161A22)

#c47585

#6B8DA3

#E0BC60

#93B57E

#B58463

#8AA0B2

#D67272

#6E8FBE

Okabe-Ito Universal CVD

data-cvd-mode="okabe-ito"

Light surface (#FAF8F5)

#0072B2

#E69F00

#009E73

#F0E442

#56B4E9

#D55E00

#CC79A7

#222222

Dark & Soft-Dark surface (#161A22)

#56B4E9

#F0B030

#2AC098

#F5EB68

#7CD0F7

#E87A28

#DE91BD

#E6E6E6

Deutan / Protan Safe

data-cvd-mode="deutan-protan"

Light surface (#FAF8F5)

#0072B2

#E69F00

#56B4E9

#D55E00

#F0E442

#009E73

#CC79A7

#111111

Dark & Soft-Dark surface (#161A22)

#56B4E9

#F0B030

#7CD0F7

#E87A28

#F5EB68

#2AC098

#DE91BD

#F0F6FC

Tritanopia Safe

data-cvd-mode="tritan"

Light surface (#FAF8F5)

#CC79A7

#009E73

#D55E00

#500000

#0072B2

#3F5A6F

#8C5A3C

#111111

Dark & Soft-Dark surface (#161A22)

#DE91BD

#2AC098

#E87A28

#C47585

#56B4E9

#6B8DA3

#B58463

#F0F6FC

Monochrome / Achromatopsia

data-cvd-mode="monochrome"

Light surface (#FAF8F5)

#111111

#444444

#777777

#999999

#bbbbbb

#dddddd

#555555

#000000

Dark & Soft-Dark surface (#161A22)

#F0F6FC

#D0D7DE

#AFB8C1

#8C959F

#6E7781

#57606A

#424A53

#FFFFFF

Contrast audit

H1 · Editorial

H2 · Section title

H3 · Subsection

Static card content

Linked card with corner-drop

Plain tone header

Neutral tone

Maroon tone

H1 · Editorial

H2 · Section title

H3 · Subsection

Static card content

Linked card with corner-drop

Plain tone header

Neutral tone

Maroon tone

H1 · Editorial

H2 · Section title

H3 · Subsection

Static card content

Linked card with corner-drop

Plain tone header

Neutral tone

Maroon tone

H1 · Editorial

H2 · Section title

H3 · Subsection

Static card content

Linked card with corner-drop

Plain tone header

Neutral tone

Maroon tone

CVD Categorical Palette Matrix (Light vs. Dark / Soft-Dark)