Operational Color
@operator-ds/tokens-operational provides opt-in, theme-invariant affiliation
colors for C2 maps and track tables.
| Affiliation | light | medium | dark |
|---|---|---|---|
| friendly | #80E0FF | #00A8DC | #006B8C |
| hostile | #FF8080 | #FF3031 | #C80000 |
| neutral | #AAFFAA | #00E200 | #00A000 |
| unknown | #FFFF80 | #FFFF00 | #E1DC00 |
| civilian | #FFA1FF | #800080 | #500050 |
Usage
import "@operator-ds/tokens-operational/operational.css";The stylesheet leaves Bone unchanged and defines fifteen properties: five
affiliations × three brightness levels. --oprt-op-<affiliation> is the medium
fill; -light and -dark select the other levels.
Using the values in code
For canvas / map symbology rendered in JavaScript, import the typed values instead of the CSS:
import { AFFILIATIONS } from "@operator-ds/tokens-operational";
AFFILIATIONS.hostile.medium; // "#FF3031"Never color alone
Pair affiliation fills with standard frame shapes; color alone is insufficient under MIL-STD-2525 and WCAG 1.4.1:
- Friendly — rectangle
- Hostile — diamond
- Neutral — square
- Unknown — quatrefoil
- Civilian — standard ID frame + purple fill
These saturated marker fills are not qualified for the core tokens' WCAG text-contrast targets. Use them with shape, not as body text.