Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

11 — Design System Mapping (RBAC Module)

Token → widget mapping for the RBAC surface. Base mapping in 00-shared/04; this file extends it. Theme foundation: Material 3, seed #0037B0 (00-shared/02 §1), tenant branding overrides primary only.

1. Component → token map

ComponentSurfaceTextBorder/RadiusElevationStates
RoleRow / MemberTilesurfaceContainerLowonSurface / onSurfaceVariantr-lg, outlineVariant hairlinee-0selected primaryContainer (master-detail), hover tint m-fast
PermissionMatrix containersurfaceContainerLow—r-lge-1—
PermissionGroupSection headersurfaceContainerHigh (sticky, desktop)titleSmall onSurfacer-mde-2 sticky—
PermissionChip selectedprimaryContaineronPrimaryContainerr-fulle-0ripple m-fast
PermissionChip unselectedsurfaceVariantonSurfaceVariantr-fulle-0ripple m-fast, hover surfaceVariant + 2%
System badgeoutline borderonSurfaceVariantr-sm——
Perm-count badgesecondaryContaineronSecondaryContainerr-sm——
Status badge activesecondaryContaineronSecondaryContainerr-sm——
Status badge suspendederrorContaineronErrorContainerr-sm——
Status badge invitedtertiaryContaineronTertiaryContainerr-sm——
Save CTAprimary / onPrimarylabelLarger-md—disabled 40% opacity
Delete (destructive)errorContaineronErrorContainerr-md——
FAB "Create role"/"Add member"primaryContaineronPrimaryContainerr-xl (56)e-3hide on scroll-down
Slug field textmono 14onSurfaceVariant———
Info banner (system role, propagation delay)primaryContaineronPrimaryContainerr-mde-0—

2. Typography map

TextToken
Screen titles "Roles & Permissions"headlineMedium
Section headers (System/Custom roles, groups)titleSmall/titleMedium
Role/member namestitleMedium (list), titleLarge (detail)
Slug, requestId, userIdmono
Descriptions, emails, datesbodyMedium/bodySmall
Matrix count "6 of 95"labelMedium onSurfaceVariant
Chip labelsbodySmall
ButtonslabelLarge

3. Iconography

Icon (Material Symbols outlined; filled for status)Use
admin_panel_settingsRoles & Permissions nav entry, role avatar fallback
shield_personsystem role rows
groups / person_addmembers entry / add-member FAB
lock / lock_openlocked system role / custom role
manage_search / historyaccess-audit entry
check_box tri-stategroup select-all (IndeterminateCheckbox)
search, close, more_vert, edit, deletestandard chrome

All icons 24 dp default; dense rows 20; status icons filled (00-shared/04 §4).

4. Spacing & layout

  • List rows 56 dp; matrix chips Sp-8 gaps; section gap Sp-24; card padding Sp-16; bottom action bar padding Sp-16, height 64 (02 §3).
  • Matrix on tablet/desktop: 2-column group grid (min group width 320 dp); phone: single column.
  • Safe areas: bottom bar respects nav bar; sheets SafeArea top handle.

5. Motion tokens (02 §6)

UseToken
Chip toggle, badge countm-instant
Ripple, hoverm-fast
Sheet, dialog, section collapsem-base
Hero avatar flight, skeleton fadem-slow
List entrance stagger 40 msm-entrance
Reduced motionall → m-instant fade

6. Dark/light parity

  • All colors token-referenced; no literals (04 §7 enforced).
  • Dark: chips surfaceVariant dark variant; selected primaryContainer dark variant (dark chromatic roles TBD by designer, 00-shared/02 §1.4); contrast maintained for all badge text (≥ 4.5:1).
  • Golden tests: every screen light + dark at 3 breakpoints (10_QA_Baseline.md §6).

7. Theming hooks (tenant)

  • Org branding primary override propagates to chips/FAB/CTA automatically (00-shared/04 §7.5); system badges and destructive colours stay token-fixed.
  • No RBAC-specific color semantics beyond status badges (§1).