11 — Design System Mapping (Search Module)
- 1. Tokens used
- 2. Component mapping
- 3. Iconography
- 4. Typography rules
- 5. Theme variants
- 6. What the module does NOT customize
Maps every search surface to shared design-system tokens and components (00-shared/02_Design_Tokens.md, 00-shared/04_Design_System_Mapping.md, 00-shared/03_Component_Library.md). No new tokens are invented; module components (07) are compositions of shared primitives.
1. Tokens used
| Token class | Usage in search | Shared source |
|---|---|---|
| Color | color.surface (bar), color.primary (focus underline, see-all), color.text.secondary (hint/captions), color.error (error state) | 00-shared/02 |
| Spacing | 8/12/16 grid: bar padding 16, group gap 16, tile gap 8 | 00-shared/02 |
| Radii | bar 24 dp (pill), tiles 12 dp | 00-shared/02 |
| Elevation | none on results (flat list); shadow only on bar when focused | 00-shared/02 |
| Type scale | titleMedium (tile title), bodyMedium (description), labelSmall (captions/tags) | 00-shared/02 |
| Motion | m-fast 150 ms, m-base 250 ms (10 §5) | 00-shared/08 |
| Semantics | heading levels on group headers, live region on count | 00-shared/09 |
2. Component mapping
| Shared component (00-shared/03) | Search usage | Module wrapper |
|---|---|---|
AppTextField | search input base | SearchBarField (07 §1) |
AppListTile | result row base | SearchResultTile (07 §2) |
AppAvatar | leading avatar / type icon | in SearchResultTile |
AppChips / AppTag | landing examples; result tags (role/dept/grade — search-indexer.service.ts:83-86) | 07 §2,6 |
AppSkeleton | first-query shimmer | SearchResultSkeleton (07 §4) |
AppEmptyState | zero results / landing | SearchEmptyState (07 §5) |
AppErrorState | error + retry | SearchErrorState (07 §5) |
AppOfflineBanner | offline banner | direct use |
AppSpinner | bar inline spinner, bottom loader | direct use |
AppButton | clear/back CTAs | direct use |
AppBadge | group count badge (per-page counts — 07 §3) | in SearchGroupHeader |
3. Iconography
Entity-type icons (proposed set, 07 §2): Student, User, Teacher, Staff,
Parent, Book, Organization, Lead, Announcement. Rules: monochrome
color.text.secondary; avatar fallback = initials from title
(search.service.ts:13).
4. Typography rules
- Titles never truncate to one line without ellipsis; descriptions max 2 lines.
- Query text in the bar renders as typed (casing preserved — 08 §3).
- "No results for “q”" quotes the raw query verbatim.
5. Theme variants
| Variant | Change |
|---|---|
| Dark theme | surface/elevation tokens only; no layout change |
| High contrast | focus underline 2 dp; tag borders instead of fills |
| Text scale ×1.5+ | groups remain scrollable; tiles stack (a11y, 00-shared/09) |
6. What the module does NOT customize
No new color roles, no custom type scale, no custom motion curves; the search surface is a pure composition of shared primitives + the 8 module wrappers in 07.