# Color & Clarity — review notes

Recommend **M1 Guided focus** for the clearest Home hierarchy. **S1 Indigo clarity** is the least disruptive color-only step. M2 is the intentionally adventurous reading-surface study.

## Scope and source fidelity

- Baseline is an HTML reconstruction, **not a screenshot or running Flutter app**. Read the current source; did not use `web/screenshots/mobile-android.png`.
- Source checkout: `/Users/joshuasperry/.codex/worktrees/61c2/active-listening` (read-only).
- Canonical brand: `/Users/joshuasperry/Library/Application Support/Open Design/namespaces/release-stable/data/projects/brand-design-system-26c240` (read-only): `DESIGN.md`, `tokens/tokens.json`, `tokens.css`, `fonts/`.
- `lib/view/home_page/home_page_route.dart` and `home_page_view.dart`: Suggested Visit → Companies → Action Items; 16px page inset and top spacing. Optional permission/feedback widgets are outside the requested comparison scope.
- `lib/view/_widget/halosight_scaffold/halosight_scaffold.dart`, `halosight_glass_app_bar.dart`, `menu_icon.dart`, `profile_avatar/profile_avatar.dart`: 56px toolbar, conditional engagement-menu icon at left, 44px profile at right, no Home title and no bottom tabs. Menu assumed available; no user portrait supplied, so fallback profile icon used.
- `recommended_accounts/recommended_accounts_suggested_visit_card_view.dart`: 24px corners, 16px inset, 24px title separation, 8px metadata gap, 24px action gap, 32px trailing space.
- `recommended_accounts_widget.dart`, `recommended_accounts_list_row.dart`, `halosight_column_container.dart`, `halosight_titled_section.dart`, `halosight_label.dart`: grouped list, 16px row padding, 18px names, 14px metadata, 12px uppercase headings, 24px group corners. Source list background is legacy **#202535**, not generic #252A36.
- `button/capture_meeting_button.dart` and `record_button/record_button_view.dart`: enabled full-width **Log a visit** pill, 24px icon, 18px label, coral background and white ink.
- `recommended_accounts/account_open_task_count.dart`: actual `badgeColor` is **neonIndigo**, despite stale comments describing coral. 15% alpha pill background.
- `recommended_accounts/account_active_risk_count.dart`: **colorScheme.error**, 15% alpha pill, warning icon. `maverick_theme.dart` does not override the dark error default. Reconstruction uses **#CF6679**, verified against Flutter's `ColorScheme.dark` constructor: https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/color_scheme.dart . This is a framework-default reconstruction, not a runtime theme capture.
- `lib/feature/tasks/view/tasks_list/{tasks_list_view,task_list_column,task_checkbox}.dart`: grouped action items, 24px circular unchecked indicator, 18px title, 14px date/account text. Home has no account-scoped add action in this example.
- `lib/view/theme/{maverick_theme,design_tokens}.dart`: Barlow UI and Roboto Slab title, canonical colors plus source legacy surfaces. Browser line metrics are an approximation of Flutter text rendering. Medium variants intentionally loosen single-line metadata. Source ellipsis behavior is retained for company names but the supplied records fit.

## Identical fictional records

Suggested: Acme Healthcare Systems · 2.5 mi · 123 Main St · Visited 1w ago. Companies: Cedar Medical (1.0 mi, 456 Oak Ave, 3 tasks); Northline Labs (5.0 mi, 789 Elm Blvd, 1 task, 1 risk); Summit Care (8.0 mi, 321 Pine Rd, 2 tasks). Action items: Send pricing update (18 Sep, Cedar Medical); Confirm sample delivery (19 Sep, Northline Labs). Counts represent all account tasks, while Home displays two action items. These are fictional design records, not production data.

## Palette and hierarchy differences

| Direction | Reading / suggestion surfaces | Action / ink | Metadata | Task / risk cues |
|---|---|---|---|---|
| B Current Home | #202535 / source glass | #FF6B5A / #FFFFFF | #8B94A8 | #8B92FF / #CF6679 |
| S1 Indigo clarity | #252A36 / #272D43 | #8B92FF / #111420 | #C3CAD8 | #B3B8FF / #8CB5C5 |
| S2 Teal lift | #232E38 / #213D46 | #8CB5C5 / #111420 | #C3CAD8 | #B3B8FF / #8CB5C5 |
| S3 Warm balance | #2B3C46 / #30424E | #8B92FF / #111420 | #D3E0E5 | #C3C7FF / #B7D3DD |
| M1 Guided focus | #252F3E / #29354F | #8B92FF / #111420 | #C3CAD8 | #B3B8FF / #8CB5C5 |
| M2 Light reading | #E7EEF4 companies, #F3F1EB tasks / #252E45 | #8B92FF / #111420 | #475569 on light | #4850B8 / #315C6B |
| M3 Spacious slate | #2B3B4D / #344960 | #8CB5C5 / #111420 | #D3E0E5 | #C3C7FF / #B7D3DD |

S1–S3 share the baseline layout, spacing, type sizes and records. S3 uses coral-light #FF8F82 only in the small suggestion label. M1 uses 20px suggestion padding, separate last-visit context, stronger section titles and labelled cues below company metadata. M2 keeps dark chrome and suggestion with pale reading surfaces. M3 uses #19232F page chrome, 20px company names and two-line metadata. The slight pale-indigo/teal extensions in S3/M3 are local proposals needed for contrast on lighter slate. No canonical files were changed.

## Measured contrast

WCAG sRGB relative luminance; ratios rounded to two decimals. Actual opaque CSS pairs are measured after badge alpha compositing and rounding to the rendered sRGB value. The source glass is background #111420, a 230/255 base wash, 5% white, then radial #7E85E6 at 20% to #111420 at 15%; text results use the brighter endpoint as a conservative bound. The baseline intentionally retains deficiencies.

| Pair | B | S1 | S2 | S3 | M1 | M2 | M3 | Target |
|---|---:|---:|---:|---:|---:|---:|---:|---:|
| Main action ink | 2.80 | 6.69 | 8.33 | 6.69 | 6.69 | 6.69 | 8.33 | 4.5 |
| Company metadata | 5.01 | 8.72 | 8.40 | 8.47 | 8.21 | 6.47 | 8.48 | 4.5 |
| Company name | 14.39 | 13.55 | 13.05 | 10.79 | 12.75 | 15.67 | 10.80 | 4.5 |
| Suggestion metadata | 3.97 | 8.27 | 7.01 | 7.72 | 7.43 | 8.20 | 6.86 | 4.5 |
| Suggestion label | 4.41 | 6.18 | 5.24 | 4.72 | 5.55 | 6.13 | 5.90 | 4.5 |
| Task count · 15% tint | 4.35 | 5.56 | 5.31 | 5.00 | 5.20 | 4.65 | 5.02 | 4.5 |
| Risk count · 15% tint | 3.52 | 4.87 | 4.70 | 5.12 | 4.60 | 5.03 | 5.13 | 4.5 |
| Action-item metadata | 9.26 | 8.72 | 8.40 | 8.47 | 8.21 | 6.71 | 8.48 | 4.5 |
| Menu icon | 2.70 | 11.15 | 11.15 | 11.15 | 11.15 | 11.15 | 9.65 | 3 |
| Task checkbox | 2.65 | 4.72 | 4.54 | 5.19 | 6.13 | 6.71 | 5.19 | 3 |

The comparison workspace uses canonical primary/secondary text against dark background and surfaces. Focus uses an indigo outline; hover retains foreground and changes border/background. No color is the sole risk signal: warning icon and accessible name in small variants, visible “risk” text in medium variants. The outside-frame semantic reference uses distinct warning/error icons and explicit wording. Baseline defects are preserved for comparison, so the entire artifact is not claimed to be uniformly WCAG-conformant.

## Validation and limits

- JavaScript syntax and DOM interaction checks passed: all seven selectors, gallery, small/medium filters (baseline + three), mobile baseline toggle, frame-scroll reset, and shared 3-company/2-task records.
- Desktop visual inspection completed: menu/profile header, frame alignment, source typography, cards and evidence table verified.
- Rendered 390px mobile and desktop views inspected. Automated layout checks exercised all seven directions at 360/390/430/600/768/820/1024/1366/1440/1920px: no page horizontal overflow or clipped company-name/metadata/title text detected. All five embedded font faces reported loaded. Gallery and filter counts plus the mobile baseline toggle were also verified in the rendered document.
- Responsive CSS supports 360/390/430/600/768/820/1024/1366/1440/1920px. Nominal app width is 390px; below 390px it reflows without shrinking type. At narrow widths baseline/selected toggle replaces two simultaneous screens. Gallery retains reading-size screens.
- Barlow 400/600/700, Roboto Slab 700 and Material Symbols Rounded are embedded as local WOFF2 data; no remote font or image requests. Font source licenses are retained under assets. No invented logo or real-person imagery.
- App-frame actions are intentionally illustrative, not simulated navigation or recording; only comparison controls operate. No backend, device, recording or production verification is claimed.
- Main entry is `index.html`; compare selection/filter/view persist in localStorage. Static artifact is self-contained except the optional notes link.

Validation images: [desktop](assets/validation-desktop.png), [mobile and viewport checks](assets/validation-mobile.png). Preview: http://127.0.0.1:8767/index.html (local server for this review).