11 — Design System Mapping (Communication Module)
- 1. Semantic → token map
- 2. Component → token mapping (key ones)
- 3. Status → color rules
- 4. Iconography
- 5. Density & layout
- 6. Dark mode / contrast
Maps module semantics onto shared tokens (00-shared/02 design tokens, 00-shared/04 system mapping). No new tokens without a shared-doc change.
1. Semantic → token map
| Semantic | Token | Component use |
|---|---|---|
| Published | success/primary | AnnouncementStatusBadge |
| Draft | neutral/grey | AnnouncementStatusBadge |
| Unread | accent amber dot | AnnouncementCard leading dot |
| Read | default text/icon | checkmark on detail CTA |
Audience role | info chip | AudienceChip |
Audience grade/section | info chip variant | AudienceChip |
Audience custom | secondary chip | AudienceChip |
Audience all | primary "Everyone" chip | AudienceChip |
Priority high (planned) | error/alert accent | future PriorityBadge — no schema field yet (announcement.schema.ts:31-53) |
Expired (planned) | muted + strikethrough title | future filter state |
2. Component → token mapping (key ones)
| Component (07) | Tokens |
|---|---|
| AnnouncementCard | surface card, outline border, radius-m, space-3/4, shadow-1 |
| AudienceChip | chip tokens + per-type fill (map above) |
| AnnouncementStatusBadge | AppBadge token sets (success/neutral) |
| ReadReceiptBar | progress primary, track surface-variant |
| Compose form | standard AppTextField tokens; error = error color |
Typography: title titleMedium, body bodyMedium/bodySmall (excerpt), audience chip
labelSmall, timestamps labelSmall muted. All from shared type ramp — no module-local
font sizes.
3. Status → color rules
- Color never carries meaning alone — always paired with text/label (00-shared/09): "Draft", "Published", "Unread" semantics.
- Unread amber is reserved for "has unread content" only (feed dot, thread badge).
- Error red = validation and failures only, not for "draft" or "expired".
- High-priority accents
(planned)must contrast ≥ 4.5:1 and pass 00-shared/09 checks.
4. Iconography
| Icon | Meaning |
|---|---|
campaign / megaphone | announcements hub, compose FAB |
mark_email_read / check_circle | mark-read CTA, read state |
visibility / bar_chart | read receipts (author) |
attach_file | attachments |
draft (document) | draft badge |
schedule | expiry (planned) |
Icons from the shared icon set (00-shared/02); no custom glyphs.
5. Density & layout
- Feed rows: comfortable density (
space-4vertical); receipts rows: compact (space-2) — receipts are scanning surfaces. - Composer max width 640 dp on tablet/desktop (forms are hard to fill on wide panes — 00-shared/04).
- Sheets: standard bottom-sheet radius/height rules; receipts sheet can be full-height (scroll-heavy).
6. Dark mode / contrast
All tokens are theme-aware (light/dark from shared tokens). Unread amber, success green, and muted grey all have dark-variant tokens — verify on both themes in QA (14_QA_Checklist.md §9).