lorentz/wulf-pulse
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

docs(07): UI design contract

Browse source
This commit is contained in:
lorentz 2026-05-03 22:27:13 -04:00
parent 8b6e8b27b1
commit 71b20612b2
2 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
.planning/phases/07-engagement-overview-new/07-CONTEXT.md
View file

@ -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.

11
.planning/phases/07-engagement-overview-new/07-UI-SPEC.md
View file

@ -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. `<h1>Engagement</h1>` — `text-base font-semibold` — scrolls away
1. `<h1>Engagement</h1>` — `text-sm font-semibold` — scrolls away (matches Row primary scale to keep declared font size count at 4)
2. `<EngagementPeriodChips>` — sticky `top-0 z-10`, scrolls header out but chips stay
3. Summary cards section — `space-y-3` between 4 `<EngagementSummaryCard>` instances
4. `<EngagementHoursSparkline>` — compact sparkline card