Color

Semantic → Platform Mapping

All implementations must map to the canonical semantic name. When a new color is needed, name it semantically here first.

* navActiveBg / navActiveText are iOS-only tokens derived from brand-container / brand-on-container. Use them for active navigation state only.

† Semantic containers are the tinted-pill pair; the bare success/warning/error tone above is text-on-page only. A status pill is -container fill + -on-container for BOTH its label and its dot — one value does both jobs, so there is no third "indicator" color to keep in sync. Every on/container pair is ≥ 5.77:1 and every on-container against its own page surface is ≥ 6.44:1, so the pair satisfies the 4.5:1 text floor and the 3:1 non-text floor simultaneously, in both themes.

Do NOT use the bare warning tone as a dot, bar, or icon on a light surface — #F08F23 measures 2.43:1 against #FFFFFF, under the 3:1 non-text floor. It is legible as large/bold text and nothing else; the light-mode indicator color is warning-on-container. (success 4.72 and error 4.75 do pass, but use the on-container value anyway so all three behave alike.)

Health status maps onto this palette — it does not get its own colors. resolveHealthState returns ok | warn | danger; those render as success / warning / error containers. One palette, two vocabularies pointing at it — a third color trio is the fragmentation the "no rainbow accent system" rule exists to prevent.

Never for financial price movement. Korean market convention is red = up, blue = down; a finance surface that borrowed the green/red status palette would invert its own meaning.

* accent-sky exists for the weather icon condition map only (snow). mate-violet is the ONE Mate-identity violet on every platform (roster tiles, mate chat, recommend cards) — never restyle a Mate surface with brand-primary.

Rules

• Never hardcode a hex value in any view, component, or stylesheet. Reference the token.
• Never use opacity hacks like brandPrimary.opacity(0.12) for container backgrounds — use brand-container directly.
• Dark mode is not optional. Every token must have both light and dark values.
• The wordmark's yellow, green and red are accents, never surfaces. They colour one word or one mark to say which domain it belongs to (www /about's day lines: briefing blue, hub and pages green, series red, the time word yellow). Measured on the brand surface: 9.9:1, 5.6:1, 4.8:1. Never a background, never two of them in one sentence for decoration.
• A dark hero or panel uses surface-brand, never bg-prime. --prime is the TEXT token and flips to near-white in dark mode, so a hero painted with it turns white-on-white the moment the viewer's theme is dark. The brand surface is the one surface that does not follow the theme.
• The brand surface's dot grid: .brand-dots is the still frame (no JS, reduced motion); the moving water is a canvas (BrandDotsCanvas, @yroun/ui; the about hero and the sign-in panel) whose numbers are named at the top of the file (wave period 3.4s, wavelength 290px, swell 7s/750px, flatten 1.6). Decorative, aria-hidden, paused off screen, one still frame under prefers-reduced-motion. The hero headline reveals terminal-style (.typewriter-box > .typewriter, --chars inline) with the text in the DOM for crawlers.