Maps the Health module onto the global design system. Tokens in
00-shared/02 , mapping conventions in 00-shared/04 , components in
00-shared/03 . All screens (proposed).
Semantic Token Hex (from 00-shared/02 palette) Usage
Dependency up color-successgreen StatusDot, card border, banner positiveDependency down color-errorred StatusDot, card border, banner negativeStale / caution color-warningamber stale badge, dlq > 0 chip (07 §3) Neutral color-surface-*greys card base, skeleton Text color-text-*on-surface labels, detail lines
Never color-only: every status token is paired with text (up/down/stale)
(00-shared/09 , 07 §2).
Element Token Example
Screen title text-title"App Health" Banner verdict text-body strong"1 of 5 degraded — Redis is down" Card title text-label"Redis" Card status text-label + color"up" / "down" Detail line text-caption"ping: PONG" Monospace payload (S2) text-codedata.error.redis render
Card grid: 8 dp gutter (space-2), 16 dp page padding (space-4).
2-column grid ≥ 700 dp (00-shared/11 ); single column below.
Banner: full-width AppBanner, 12 dp internal padding.
Screen element Component Source
Overall verdict AppBanner (custom OverallBanner, 07 §5)S1 Status cards AppCard + StatusCard (07 §1)S1 Status indicator StatusDot (07 §2)S1/S2 Queue backlog PendingJobsTile (07 §3)S1 Last-check time LastCheckedLabel (07 §4)S1 Retry AppButton (outlined, m-app- style)S1 Skeletons AppSkeletonS1 loading Offline AppOfflineBannerS1 Detail AppBottomSheet + SelectableText monospaceS2
Icon Where Note
Icons.favorite-style heartbeat glyph (checkmark/circle per library)banner positive semantic, not decorative Icons.refreshRetry standard action glyph Icons.info_outlinestale badge pairs with amber
Health colors ride the existing semantic tokens - no new palette entries,
no module-local color constants (00-shared/04 ).
Dark mode: status colors keep contrast ≥ 4.5:1 against color-surface
(00-shared/09 ); amber-on-dark validated for stale badge.
Motion tokens per 10 §4 (00-shared/08 ).