ten31-database/design/phase8-conformance.md

Phase 8 — mobile visual-conformance build reference

Status: scoped 2026-06-19, not started. Working reference for ROADMAP Phase 8 (8a–8i). Delete/archive once Phase 8 lands.

Anchor (read first): the source of truth is each *.dc.html in design/_imports/2026-06-19_zip-file/Venture-CRM mobile redesign/ rendered at its DEFAULT data-props — NOT the screenshots/ PNGs (those are option-history: rejected disposition badges, a 6-stage MEETING/FUNDED funnel, the star-everywhere flag, a contact-footer band). Defaults: all surfaces theme=dark; Grid variant=compact, font=plex, lpFlag=earmark; Pipeline mode=swipe. Spacing/type tokens (card radius 10, gap 10, title 16, body 15, detail title 22) already match — the gaps below are anatomy/structure, not spacing/theme.

Per-surface existing-LP signal: Grid = earmark corner-triangle · Pipeline = earmark corner-triangle (Grant override 2026-06-19 — unify with Grid; the dc default was a ★ star, we don't follow it) · Contacts = avatar ring.

Contacts sort/tabs (decided, Grant 2026-06-19): remove the investor/prospect type tabs — the prospect type isn't used anywhere useful (C2). Keep a sort — by the Priority flag — as a deliberate enhancement beyond the dc (which is search-only, no sort).

*.dc.html:NN = prototype line; index.html:NN = current app line.

---

Surface 1 — GRID (GridApp.dc.html, app MobileFundraisingGrid)

Authoritative card (GridApp:84–108): --panel bg, 1px --border, radius 10, padding 12×14, --shadow-card, gap 8.

• Existing-LP = earmark corner-triangle, top-left (:89–91): border-top:18px solid var(--accent); border-right:18px solid transparent. At lpFlag=earmark, lpEarmark true / lpStar/lpBanner false (:492–494).
• Row 1 (:92–102): name 16px/600 left; Priority mono-10px pill right, only if c.priority (radius 4, amber priBg/priText). No investor/prospect badge.
• Row 2 (:103–106): $amount mono 15/600 (amtColor green if >0 else muted) · 4-stage chip (mono 11, radius-999 pill; lead/engaged/diligence/commitment colors :405–409).
• Row 3 (:107): recency mono 12 ("2d ago"/"30d stale"; amber ≥10d, red ≥30d, :421–426).

List header (:65–81): tappable view-name 21/600 + ▾; row 2 = mono count (left) + SORT pill (right, mono 11 uppercase, sort-icon + label, :72–75); then search (44px) + gradient +. Sort sheet (:633): Name / Pipeline stage / Committed / Last contact / Priority.

Investor detail = full-screen (:177–293): title 22 + Edit; chip row = Priority + "Existing LP" pill (:192–194) + "Last contact …"; Pipeline stage card (tappable chip + "Change ›"); Contacts pills + "+ Add"; Commitments (read-only + Total); Reminder card; Notes timeline (dot-and-line, type tag + date + summary, "+ Log").

Deltas:

#	Delta	app	spec	sev
G1	Existing-LP wrong: app uses border-left:3px + ★ in detail title → earmark corner-triangle on card + "Existing LP" pill in detail	2321,9659,9754	89–91,192–194	HIGH
G2	Priority is a ★ glyph → make it a "PRIORITY" text pill (collides with existing-LP star today)	9662,2323	99–101	HIGH
G3	No sort control (only a count) → add SORT pill + sort sheet (5 opts)	9687–9689	72–75,633	HIGH
G4	Detail pipeline: "Stage" row + button → single tappable stage card (chip inline + "Change ›")	9762–9773	198–207	MED
G5	No dedicated Reminder card (reminder is a row in Activity) → dedicated card (note + due / "No reminder", ›)	9802–9804	249–262	MED
G6	Notes = single text blob → timeline (dot+line rail, per-entry tag+date+summary)	9805	270–289	MED
G7	Subtitle "$X committed · {lead}" → committed lives in Commitments card; subtitle = priority/LP/last-contact chips	9757	188–196	LOW
G8	Card amount color: verify zero-commit dims to muted (.zero token parity)	9665,2330	495	LOW

Corrections to prior read: DROP the left-accent-border (never the default — replace with earmark); the ★ is the rejected lpFlag=star option (remove); Priority is a pill not a star; the 4-stage chip is correct, keep.

---

Surface 2 — CONTACTS (ContactsApp.dc.html, app MobileContactsPage/MobileContactDetail)

Header (:59–65): "Contacts" 21/600 + mono count; search only — no segmented tabs, no sort. List always A–Z (sticky mono headers, :337–343), hard-coded name.localeCompare (:322).

Card (:72–83): row, panel/border/radius-10, padding 11×13.

• Avatar (:74): 40px, --elev, two-letter initials mono 13 accentlight; existing-LP = ring border:1.5px solid var(--accent) else 1px --border (:329).
• Name 15/600 (:76); below: org 13 --t3 + 4-stage pill mono 9 (:79).
• Right: recency mono 11 (:82, :272–278).

Detail = bottom sheet (:119–179, not full-screen): 52px avatar+initials+ring, name 19 + org; email-copy pill ("EMAIL" + mono accent address + copy, :134–140); two action buttons — "Log communication" (gradient, flex 2) + "Email" (flex 1, :143–146); Organization card = earmark + org + stage pill + Committed / Last-contact stat pair + last-note tag + "Open investor in Grid ›" (:149–175).

Deltas:

#	Delta	app	spec	sev
C1	Card has disposition (investor/prospect) badge → remove; right-side signal is 4-stage pill (under name) + recency	5220,5219–5222	79,82	HIGH
C2	Remove the All/Investors/Prospects type tabs (prospect type unused); keep a sort — by Priority flag (enhancement; dc is search-only) — Grant 2026-06-19	5240–5250	59–65	HIGH
C3	Avatar = one initial, no ring → two-letter initials + existing-LP ring (amt>0)	5214,2222–2227,5068	74,329,285–289	HIGH
C4	Card meta shows raw date (formatDate) → recency text ("2d ago")	5221	82	MED
C5	Detail = full-screen field-dump → bottom sheet (email-copy pill, Log/Email pair, Org card w/ "Open in Grid")	5075–5137	119–175	HIGH
C6	Card sub = org only → org + stage pill same line	5217	77–80	MED

Corrections: DROP the disposition badge (classifying signal is stage-pill + ring); the segmented tabs are an app-only addition, not in the design.

---

Surface 3 — PIPELINE (PipelineApp.dc.html, app MobilePipeline)

Header (:59–68): "Pipeline" 21 + mono total + SORT pill (Name/Amount/Staleness/Priority, :64–67,:422). 4 stages lead/engaged/diligence/commitment (:369–370).

Swipe mode (:71–132): horizontally-scrollable segmented stage pills (height 36, radius 999) with mono uppercase label + count badge (:76–79); full-width scroll-snap stage columns (header = stage chip + count + sum; card list); page dots (active = 22px bar, :125–132).

Card (:97–117): panel/radius-10; tappable region + divider + two move buttons (‹ / ›, disabled at ends, :112–115).

• Row 1: existing-LP = earmark corner-triangle (Grant override 2026-06-19 — dc default was ★ at :101; use the Grid earmark instead for consistency) + name 16/600; Priority pill right (:104).
• Row 2: $amount mono 15/600 · 3px dot · recency mono 12 (:106–110).

Detail = bottom sheet (:204–272): name 19 + Priority/Existing-LP pills + last-contact; Committed / Contacts stat tiles (:222–231); "Move stage" inline radio list w/ checkmarks (:233–241); Notes timeline + "+ Log" (:243–266); separate Log sheet over it (:274–302).

Deltas:

#	Delta	app	spec	sev
P1	Segmented control = vertical count-over-label boxes → horizontal-scroll pills + count badge	5945–5958,2400–2414	73–82	MED
P2	Cards lack existing-LP flag, Priority pill, recency (app = name + contact·org sub + amount) → earmark (Grant override, not ★) + name / Priority pill / amount·dot·recency	5916–5933	99–110	HIGH
P3	No SORT control on header	5935–5977	64–67	MED
P4	Detail = full-screen field-dump → bottom sheet (stat tiles + inline move-stage radio list + notes timeline + inline Log)	5980–6036	204–272	HIGH
P5	Stage change = button → sub-sheet → make move-stage list inline in the sheet	6005–6007,6023–6035	233–241	MED
P6	Page total "N deals · $X" → stage-column header = chip + count + sum	5963–5966	88–94	LOW

Corrections: the app's 4-stage funnel is CORRECT (dc stages() resolves to lead/engaged/diligence/commitment; the 6-stage MEETING/FUNDED/OUTREACH in screenshots is stale seed). Don't add a type/disposition badge. Pipeline existing-LP = earmark corner-triangle (Grant override 2026-06-19; the dc default was ★, we don't follow it — reuse the Grid earmark component).

---

Surface 4 — REMINDERS (RemindersApp.dc.html, app MobileReminders/ReminderRow)

Header (:56–62): "Reminders" 21 + a mono summary ("2 overdue · 1 today · 7 open", red when overdue, :313–315) + gradient +. No Active/Done/All filter — only a collapsible Completed section at list end (:109–130).

Buckets (:317–332): 4 — Overdue / Today / This week / Later, each header = colored dot (red/amber/blue/grey) + mono label + count.

Row (:75–94): swipe wrapper; right=Snooze (:77–80), left=Complete (:82–85), threshold 70 (:257). Card (:87–93): note 15/500; below = org 13 + due-chip pill (mono 10, radius 999, urgency bg/text/border, "3d overdue"/"Today"/"in 4d"/"Jun 24", :91,:228–240).

Completed (:109–130): collapsible; done row = filled check circle + strikethrough note + org.

Deltas:

#	Delta	app	spec	sev
R1	Due = plain colored mono text → urgency-colored chip pill	4620,2480	91	HIGH
R2	Buckets: Overdue/Due-soon/Later → Overdue / Today / This week / Later ("Today" its own bucket)	4557–4563	318,235–239	MED
R3	Header = Active/Done/All filter + "+ New" → title + summary line + +	4744–4755,4766	56–62	HIGH
R4	Group headers lack the colored dot (7px, red/amber/blue/grey)	4766,2455–2461	68–72,317	MED
R5	Completed via filter tabs → collapsible "Completed" section at list end (active list is default)	4748–4751,4764	109–130	MED
R6	Swipe left=Done / right=Snooze matches — keep (labels cosmetic)	4607–4608	77,82	LOW
R7	Edit = bottom sheet — correct, keep	4782	159–173	—

Corrections: left=Done/right=Snooze is correct (don't flip); edit-via-sheet is correct.

---

Phase 8 punch-list (visual/structural only — DB-wiring parity is the separate functional report)

• 8a Grid card (HIGH): G1 earmark corner-triangle (replace left-border); G2 PRIORITY text pill (replace ★); G8 zero-commit dim token parity.
• 8f Pipeline card (HIGH): P2 add ★ + Priority pill + recency line; P1 horizontal-scroll pills + count badge; P6 stage-column header chip+count+sum.
• 8b Detail actions/structure (HIGH): C5+P4 convert Contacts & Pipeline detail full-screen → bottom sheets with the dc anatomy; G4/G5/G6 Grid detail → tappable stage card + dedicated Reminder card + notes timeline; P5 inline move-stage list.
• 8c Quick-log (MED): Grid/Pipeline notes post into a timeline (tag+date); dc Grid has a top-bar quick-log pencil (GridApp:53–55) the shell lacks → 8i.
• 8d Sort (HIGH/MED): add SORT pill → sort sheet to Grid (9687) + Pipeline (5935). Contacts (Grant decided): remove the investor/prospect type tabs (5240–5250); keep a Priority-flag sort as an enhancement (dc had none).
• 8e Reminders (HIGH): R1 due-chip pill; R3 header summary line (reconsider Active/Done/All vs dc collapsible Completed, R5); R2/R4 re-bucket Overdue/Today/This-week/Later with colored dots.
• 8i Shell (MED): Contacts avatars → two-letter initials + existing-LP ring (C3); drop disposition badges (C1) + Contacts tabs (C2); dc top-bar = quick-log pencil + theme + account cluster (every dc :50–58).

Severity order (whole phase): G1, G2, C1, C2, C3, C5, P2, P4, R1, R3 (HIGH) → G3, P3, sort/bucket/dot/chip (MED) → G7, G8, P6, R6 (LOW).

Theme-var note (DESIGN convention): every new color (earmark, priority pill, ring, due-chip, segment count-badge) MUST use :root theme vars, not literals. Authoritative dark/light pairs: GridApp.dc.html stageColors/priColors/recency (:400–442), RemindersApp.dc.html urgency (:228–240).