TTI palette — extraction notes

Reference document for design/tokens.json. Explains where each hex came from and what to trust when they disagree.

Sources

Reconciled primary palette

Dark theme

The tti-dark theme isn't derived from a TTI source artifact — TTI has no published dark palette. It's a tux-original mapping built to keep the editorial system legible after sunset while preserving brand recognition. Values are mirrored in design/tokens.json (themes.tti-dark) and applied at runtime via [data-theme="tti-dark"] in app/assets/css/tokens.css.

Why primary shifts from maroon to lifted teal

Earlier dark drafts kept maroon as the brand primary by lightening it to rose-pink variants (#e795a8, #db859e). They read too pink against the small chrome elements where the accent actually lives — composer borders, focus rings, active-tab text, input outlines. Consolidating the dark-mode accent on lifted TTI teal (#6BB4C0, base tti.teal #4A8892 lifted ~15%) gave the studio chrome a single coherent hue and cleared AAA on every dark surface:

Gold accent stays unchanged — its job in dark is emphasis, not legibility, and the warm ochre keeps the TTI signature warmth on dark surfaces.

How maroon brand presence is preserved on dark

Three deliberate channels keep maroon visible even though brand.primary resolves to teal:

1. brand.fill stays tti.maroon (#5C0025). Marketing panels (<TuxCTA>, hero bands) still render white-on-wine. Same hex in every theme except HC.
2. chart.1 is pinned to wine-rose #c47585 rather than brand.primary. The primary chart series stays in the maroon family so a TTI dashboard reads as a TTI dashboard.
3. Nuxt UI's --color-maroon-400 is overridden to #6BB4C0 so solid primary buttons inherit the teal accent. (Implementation detail in tokens.css; not exposed in tokens.json because it's a vendor-namespace override.)

Lifted semantic + chart + map palettes

Every semantic color is lifted to clear AAA (7:1) on surface.page. Numbers verified by /contrast-audit:

The 8-step categorical chart palette and the maroon/slate map ramps follow the same lift pattern — exact values in tokens.json under themes.tti-dark.chart and .map.

Asymmetry note

themes.tti and themes.tti-hc only declare brand + surface + text because their semantic / chart / map values inherit from the base color.semantic block. themes.tti-dark additionally declares semantic, focus, chart, and map because every one of those needs lifted values to clear AAA on dark surfaces. That asymmetry is real; don't flatten it by inheriting through to dark.

Anti-Halation Soft Dark Mode (Clinical Astigmatism Comfort)

For users with astigmatism or photophobia, traditional pitch-black dark modes (#000000 or #0B0908 background with #FFFFFF or #FAFAFA text) induce significant optical aberrations:

• The Optical Problem (Halation): Astigmatic eyes suffer from non-spherical corneal curvature. High-contrast white-on-black point sources trigger pupillary dilation, scattering light across the irregular meridian and producing visual halos, glow bleed, and severe ocular fatigue.
• The Clinical Solution (Anti-Halation Soft Dark): Eases the extreme luminance delta by adopting a deep slate-charcoal foundation and soft off-white typography, while strictly maintaining WCAG 2.2 Level AAA (≥ 7.0:1) contrast:

Activation:

• HTML Attribute: [data-theme-variant="soft"] on [data-theme="tti-dark"]
• Clinical Preference: [data-vision-comfort="anti-halation"]
• Dedicated Theme ID: [data-theme="tti-soft-dark"]
• CSS Utility Class: .tux-theme--soft-dark

Operational status ramp

Separate from the semantic palette, and for a specific reason: semantic is a sentiment palette (good / neutral / bad), and it cannot express the five states an operations surface has to separate at a glance.

Two concrete failures that forced the split, both found building the Nagios overlay:

• semantic.success #3D5328 is a deep olive tuned to clear AAA as text on white. Used as a cell tint it loses its hue and reads grey-green.
• There is no orange, so UNKNOWN had to borrow chart.5 #8C5A3C — a clay brown that reads as a weak red and collides with CRITICAL, after which PENDING's neutral grey sat too close to that near-grey brown.

Hues are inherited from what Nagios Core itself ships, because green → yellow → orange → red is operator muscle memory. maintenance is the exception — Nagios has no colour for it because it is not a severity at all, so it takes TTI's own blue (brand.secondary's hue) and sits off the ramp:

Three roles per state — base (text, edges, identity), fill (a chip), ink (the word inside it) — because on a light surface a colour dark enough to be legible as text is necessarily dark, and dark yellow is olive while dark orange is brown. Hue lives in the fill.

tti-hc renders outlined chips instead: fill is the page surface, ink is the base, and every base clears AAA.

Chip lightness descends with severity across the warm hues (warning → unknown → critical), so severity reads as weight as well as hue — the channel that still works for a reader who cannot separate them. It stops short of ok on purpose: yellow's natural lightness sits above green's, and forcing it below turns it olive rather than yellow.

Derivation rules and their guards are in ADR-0013; npm run audit:status enforces them and needs neither a browser nor a build.

Note for BI: Power BI's good / neutral / bad still resolve to the semantic palette, deliberately — re-pointing them would change every report already built on tti-theme.json. See the ADR's "deliberately not done".

High-contrast (508) palette

From TTI-presentation-template-highcontrast-508.pptx:

Uses Arial (vs Calibri for regular templates) — PPTX-specific, doesn't affect web choice.

Conflict log (important)

1. PPTX option-1 makes navy #15457E the dk1/accent1 but the PDFs anchor heavily on maroon #5C0025. PPTX templates include multiple approved color flavors; PDFs reflect the actual produced brand. Web UI anchors on maroon + gold.
2. PPTX maroon (#5C0825) vs PDF-sampled maroon (#5C0025) are 3 points apart in the red channel — within any reasonable Delta-E tolerance. PDF value chosen for the token because it's what readers see.
3. Gold has three variants (#DEAB37, #DCAA37, #DDAC37) across artifacts — all within 2 points per channel. #DDAC37 is the middle value and what PDFs sample; use it.

Typography — reconciled

Direction: the newer (factsheet) system is where TTI is headed. Franklin Gothic ATF is a licensed font — we match the feel with Public Sans (US Web Design System, open-source, visually close). If TTI licenses Franklin Gothic ATF for web, we swap the token value; no other changes needed.

Visual identity cues to preserve in tux

• Big-number stats — oversized maroon or gold numerals with tiny tracked-out labels. Single most recognizable TTI design move. See BigStat in the components doc.
• ALL-CAPS section headers — letter-spaced, bold sans-serif. Editorial rhythm throughout the collateral.
• Maroon square bullets in lists.
• Editorial grid, not card-heavy dashboard. Leave white space.
• Maroon + gold as primary data-viz pair, with teal/navy/sage as category extenders.

Relationship to TAMUS

TTI presents as its own institutional voice that happens to live in the A&M system. Boilerplate ("an agency of the State of Texas and member of The Texas A&M University System") appears in body copy, not as a co-branded logo lockup. Aggie maroon is the cue — not a TAMUS logo.

tux follows: themes per institution; TTI is not "a TAMU skin." The tti theme and the tamu theme are siblings, not parent-child.