diff --git a/.planning/phases/07-engagement-overview-new/07-CONTEXT.md b/.planning/phases/07-engagement-overview-new/07-CONTEXT.md
index 702f540..4c7a69f 100644
--- a/.planning/phases/07-engagement-overview-new/07-CONTEXT.md
+++ b/.planning/phases/07-engagement-overview-new/07-CONTEXT.md
@@ -187,10 +187,13 @@ Out of scope:
### Typography & spacing (mirror Phase 4 UI-SPEC)
- **D-28:** Two weights only: `font-normal` (400) and `font-semibold`
(600). No `font-medium`.
-- **D-29:** Three sizes: `text-sm` (14px) primary, `text-xs` (12px)
- secondary/labels, `text-[10px]` for badges/captions. Plus `text-2xl`
- for the four big summary numbers and `text-base font-semibold` for the
- page H1 "Engagement".
+- **D-29:** Four declared sizes (Phase 4 typography rule cap): `text-sm`
+ (14px) primary, `text-xs` (12px) secondary/labels, `text-[10px]` for
+ badges/captions, and `text-2xl` for the four big summary numbers.
+ Page H1 "Engagement" uses `text-sm font-semibold` (matches Row primary
+ scale; H1 scrolls away under the sticky period chips). `text-base`
+ (16px) is NOT used on this page — kept the count at 4 to satisfy the
+ UI-checker typography cap.
- **D-30:** Page container: `px-4 py-4 space-y-4` (matches Phase 5/6).
No horizontal overflow at 360px viewport.
diff --git a/.planning/phases/07-engagement-overview-new/07-UI-SPEC.md b/.planning/phases/07-engagement-overview-new/07-UI-SPEC.md
index 3861d29..d238310 100644
--- a/.planning/phases/07-engagement-overview-new/07-UI-SPEC.md
+++ b/.planning/phases/07-engagement-overview-new/07-UI-SPEC.md
@@ -1,7 +1,8 @@
---
phase: 7
slug: engagement-overview-new
-status: draft
+status: approved
+reviewed_at: 2026-05-04T00:00:00Z
shadcn_initialized: true
preset: new-york / neutral base / CSS variables
created: 2026-05-04
@@ -52,7 +53,7 @@ Declared values (multiples of 4). Mirrors Phase 4/5/6 contract exactly.
|-------|-------|---------------------|
| xs | 4px | Badge internal padding (`px-1.5 py-0.5`), avatar-to-text gap (`gap-1`), icon gap |
| sm | 8px | Row internal gaps (`gap-2`), chip gaps (`gap-2`), sparkline label row gap (`gap-2`) |
-| sm+ | 12px (3 × 4) | Period chip `py-1.5`, sort chip `py-1.5`, secondary stacking |
+| sm+ | 12px (3 × 4) | Period chip `py-1.5`, sort chip `py-1.5`, secondary stacking — known exception: 12px is not in the 7-value standard set {4,8,16,24,32,48,64} but is a multiple of 4 and mirrors approved Phase 4/6 contract |
| md | 16px | Horizontal page padding (`px-4`), Card vertical padding (`py-4`), sticky chip strip offset |
| lg | 24px | Vertical section gap between sparkline card and user list (`gap-6` if needed) |
| xl | 32px | Empty state vertical padding (`py-8`) |
@@ -72,13 +73,13 @@ Two weights only: `font-normal` (400) and `font-semibold` (600). `font-medium` (
| Role | Size class | Weight | Line Height | Font | Usage |
|------|-----------|--------|-------------|------|-------|
-| Page H1 | `text-base` (16px) | `font-semibold` (600) | `leading-snug` (1.375) | IBM Plex Sans | "Engagement" heading — renders in page body, scrolls away [D-31] |
+| Page H1 | `text-sm` (14px) | `font-semibold` (600) | `leading-snug` (1.375) | IBM Plex Sans | "Engagement" heading — renders in page body, scrolls away [D-31]; matches Row primary scale to keep total size count at 4 |
| Summary big number | `text-2xl` (24px) | `font-semibold` (600) | `leading-none` | IBM Plex Sans | Four summary card primary values (e.g. "42", "128.5h") [D-10] |
| Row primary / section heading | `text-sm` (14px) | `font-semibold` (600) | `leading-snug` (1.375) | IBM Plex Sans | User display name (1-line truncate), config banner headings |
| Body / secondary | `text-xs` (12px) | `font-normal` (400) | `leading-normal` (1.5) | IBM Plex Sans | Summary card label, sparkline label, role/jobTitle, hours right-aligned value, search placeholder, chip labels |
| Badge / caption | `text-[10px]` (10px) | `font-normal` (400) | `leading-normal` | IBM Plex Sans | Period chip labels ("7d", "30d", "90d"), sort chip labels ("Hours", "Name", "Utilization"), banner body detail |
-[D-29] Three declared sizes: `text-sm` (14px), `text-xs` (12px), `text-[10px]` (10px). Plus `text-2xl` for big summary numbers and `text-base` for the page H1.
+[D-29] Four declared sizes (max allowed): `text-sm` (14px), `text-xs` (12px), `text-[10px]` (10px), `text-2xl` (24px, summary big numbers only). The page H1 uses `text-sm font-semibold` (matches Row primary). `text-base` (16px) is NOT used on this page — kept the count at 4.
Detail: hours right-aligned value in the user row top line (`text-sm font-semibold`) renders the billable hours, e.g. `12.4h`. This is `text-sm font-semibold` matching the display name weight to hold visual balance in the same row. [D-19]
@@ -555,7 +556,7 @@ interface EngagementUsersResponse {
For the executor: the page renders in this exact vertical order within `px-4 py-4 space-y-4`:
-1. `Engagement
` — `text-base font-semibold` — scrolls away
+1. `Engagement
` — `text-sm font-semibold` — scrolls away (matches Row primary scale to keep declared font size count at 4)
2. `` — sticky `top-0 z-10`, scrolls header out but chips stay
3. Summary cards section — `space-y-3` between 4 `` instances
4. `` — compact sparkline card