Callout tiles · tint surface, same-family text
▲ Good
Engagement up 18% against a flat market.
#E4F7E1 · #067D0E
◆ Watch
Profile views up, but it's pitch traffic.
#F6F7CE · #6A6C00
▼ Bad
Invisible to the operations buyer.
#F7E3E3 · #A32D2D
Delta pills
▲ +18% ◆ Noise ▼ −6% Flat
Warning fill · why the inset edge exists

With --ck-warning-edge — holds its shape on white

Without — the edge dissolves into the card

Chart series · also the report accent set
Category chips, icon tiles, section rules, underlines. Use in order.
#3B5BDB
#14B8A6
#F97316
#A78BFA
#9AA0A6
Sentiment · gauges and stacked sentiment bars
84%
Positive · --chart-positive
11%
Neutral · --chart-neutral
5%
Negative · --chart-negative
The semantic colors are fills, not text. --ck-success, --ck-warning and --ck-danger all fail contrast as type on white. Whenever one of them carries a word or a glyph, use its -text partner instead, on its -tint surface. Yellow fills need the edge. Any --ck-warning bar, chip, or tile on a white card gets box-shadow: inset 0 0 0 1px var(--ck-warning-edge), or it washes out. Limit red. Prefer the warning pair for "needs attention"; save the danger pair for genuine negatives. Chart series double as accents — pink never does. Pink is identity only, never a data element.