11 - Design System Mapping (Webhooks Module)

1. Semantic status mapping (delivery health)
2. Type ramp
3. Spacing & layout
4. Iconography
5. Dark mode / contrast
6. Motion tokens (00-shared/08)
7. Component mapping table

Module → design-system mapping. Tokens in 00-shared/02, components in 00-shared/03, mapping method in 00-shared/04. This file adds webhook specifics only.

1. Semantic status mapping (delivery health)

Domain state	Token role	Component usage
`success` (`webhook-delivery-log.schema.ts:20`)	`success`	`AppBadge` success; metric green
`failed` (same)	`danger`	`AppBadge` danger; metric red + pulse; retry affordance
`pending` (same)	`warning`	`AppBadge` warning amber; metric amber
webhook `enabled: true` (`webhook.schema.ts:22-23`)	`success`	badge "Active"
webhook `enabled: false`	`neutral`	badge "Paused"
no deliveries yet	`neutral`	empty state icon

Rules: color never alone - text label always present (00-shared/09).

2. Type ramp

Content	Token (00-shared/02)
Screen titles / AppBar	`text-lg / text-xl` semibold
Webhook name (list, detail)	`text-md` semibold
URL	`text-sm` monospace (`fontMono`), muted
Event chips	`text-sm` label in chip
Delivery log eventType	`text-sm` monospace
Payload / responseBody code blocks	`text-xs` monospace, `surface-muted` background
Metrics counts	`text-2xl` tabular-nums

3. Spacing & layout

List rows: 16 dp padding, 8 dp between sections.
Create/edit form: AppCard 16 dp padding, field spacing 16 dp.
Metrics grid: 2 columns (12/24) on phone, 4 on tablet.
Dialog width ≤ 360 dp; bottom sheet ≤ 80% height (payload scroll).

4. Iconography

Concept	Icon
Webhook (list tile leading)	globe/webhook glyph
Active	check-circle
Paused	pause-circle
Delivery status icons	clock (pending), check (success), alert (failed)
Actions	send (test), replay (retry), eye/eye-off (secret), copy

5. Dark mode / contrast

Code blocks: surface-muted with text-on-surface; status badges keep token pairs - no raw hex anywhere (00-shared/02).
Monospace URL contrast ≥ 4.5:1 on both themes.

6. Motion tokens (00-shared/08)

Interaction	Token
chip toggle, snackbar, badge cross-fade	`m-fast` (150 ms)
screen push, sheet rise, row fade-in	`m-base` (250 ms)
failed-count attention pulse	`m-slow` (400 ms), disabled on motion-reduce

7. Component mapping table

Module widget (07)	Base components	Shared counterpart
`EventPickerChipField`	`AppChips` grid + `AppTextField` (custom input)	00-shared/03 chips
`SecretField`	`AppTextField` + icon buttons	-
`DeliveryLogTile`	`AppListTile` + `AppBadge`	-
`MetricsTile`	`AppStatTile` × 4	00-shared/03 stats
`SignatureVerifyCard`	`AppCard` + monospace blocks	-