UI/UX Review Sprint Report — Notion Tasks v2

Sprint Summary

Six specialist reviewers audited 7 design specification files for Notion Tasks v2 — a native cross-platform task manager targeting iOS (SwiftUI), Mac (menu bar), Android (Compose), and Galaxy Fold 7. Every spec was cross-referenced against acceptance-criteria.md and the canonical design-tokens.md.

206

Raw Findings

111

After Dedup

Critical

Major

Minor

Key Finding

The specs are impressively detailed — frame-by-frame animation storyboards, platform-specific SwiftUI + Compose code, comprehensive accessibility labels. However, the single largest systemic problem is cross-file color token inconsistency: at least 8 semantic tokens have different hex values depending on which file a developer reads. This was flagged independently by all 6 reviewers.

Severity Breakdown

By File (Deduplicated)

design-tokens.md

components.md

widget-themes.md

fold-layout.md

task-detail-layouts.md

interactions.md

settings.md

By Reviewer (Raw)

Reviewer	Role	Crit	Major	Minor	Total
Senior UI Designer	Visual design, tokens, contrast	8	25	10	43
Senior UX Designer	IA, interaction patterns, flows	3	11	13	27
Motion Design Expert	Animation, springs, haptics	3	8	14	25
iOS Design Specialist	Apple HIG, WidgetKit, SwiftUI	8	13	15	36
Android Design Specialist	MD3, Compose, Glance, Fold	4	14	10	28
Accessibility Expert	WCAG 2.1 AA, touch, contrast	7	19	21	47
Total (raw)		33	90	83	206

~62% overlap rate between reviewers, indicating strong consensus on key issues.

Top 5 Most Impactful Issues

Critical #1 — Widget Theme Naming Mismatch (Runtime Bug)

Files: widget-themes.md, settings.md, components.md • Flagged by: 4 reviewers

Three files use three incompatible naming schemes for the same three widget themes:

Theme	widget-themes.md	settings.md	components.md
A	Classic	Classic	Default
B	Cards	Minimal	Dense
C	Vivid	Vibrant	Minimal

Settings persists keys "minimal"/"vibrant". The widget extension reads "cards"/"vivid". These do not match. Selecting "Minimal" in settings produces undefined behavior in the widget.

Fix: Align all files to widget-themes.md canonical names: Classic / Cards / Vivid. Update persistence keys and ThemePicker enum.

Critical #2 — WCAG Contrast Ratio Calculation Errors

File: design-tokens.md • Flagged by: 3 reviewers

The contrast verification table contains miscalculated ratios. The spec self-certifies WCAG AA compliance but multiple colors actually fail:

Token	On White	Claimed	Actual	Required	Result
#DC4C3E	accent	4.6:1	~4.08:1	4.5:1	FAILS
#4772FA	due-today	4.5:1	~4.15:1	4.5:1	FAILS
#EB8909	due-tomorrow	3.4:1	~2.59:1	3.0:1 large	FAILS
#999999	text.done light	pass	~2.85:1	3.0:1 large	FAILS

Fix: Recalculate all ratios with WCAG relative luminance formula. Darken failing colors or restrict to large text/UI components.

Critical #3 — Cross-File Color Token Inconsistency (Systemic)

Files: All 7 specs • Flagged by: all 6 reviewers

At least 8 semantic tokens have different hex values across files. Examples:

Token	design-tokens.md	components.md	settings.md	widget-themes.md
text.primary dark	#E0E0E0	#E8E8E8	#FFFFFF	#E0E0E0
text.secondary dark	#A0A0A0	#AAAAAA	#999999	#A0A0A0
text.muted dark	#A0A0A0	--	--	#888/#777
error	#DC4C3E	--	#FF3B30	--
success	#058527	--	#34C759	#4CAF50
P4 priority	transparent	#999999	#8E8E93	--

Category colors for Work, Finance, FC-26, and Home also differ — FC-26 and Home are swapped.

Fix: All files must reference design-tokens.md by token name, never raw hex. Run a full hex audit.

Critical #4 — Widget WCAG Contrast Failures (Systematic)

File: widget-themes.md • Flagged by: 3 reviewers

All 3 widget themes reintroduce muted text colors that design-tokens.md explicitly upgraded for WCAG compliance. 15+ foreground/background combinations fail WCAG AA:

Theme	Element	Color	Background	Ratio	Result
Classic	text-muted light	#999999	White	~3.0:1	FAIL
Classic	section-header dark	#777777	#1E1E1E	~3.2:1	FAIL
Cards	text-muted dark	#777777	#282828	~2.5:1	FAIL
Vivid	text-muted dark	#777777	#1C1C1E	~3.1:1	FAIL

Additional: 9pt stale indicator (7+ occurrences), 10pt section headers, 38pt/36pt row heights below 44pt minimum. Appendix B incorrectly self-certifies PASS.

Fix: Replace all widget muted colors with #666666 (light) / #A0A0A0 (dark). Increase fonts to 11pt min. Fix Appendix B.

Critical #5 — Deleted Feature Still Specified + Spring Conflicts

File: interactions.md • Flagged by: 4 reviewers

Drag-to-reorder was removed (useDragReorder.ts deleted) but interactions.md still contains ~90 lines of spec, 3 haptic entries, 2 reduce-motion entries, a spring token, and a P3 priority entry.

Spring parameters are fundamentally inconsistent between interactions.md and design-tokens.md. Within interactions.md itself, SwiftUI dampingFraction differs from Compose dampingRatio for all springs except spring-critical (e.g., spring-bouncy: 0.60 vs 0.4).

Fix: Remove all drag-to-reorder content. Reconcile spring parameters — pick one canonical source and derive platform values mathematically.

Cross-Cutting Themes

#	Theme	Severity	Files	Reviewers
1	Color token inconsistency across files	Crit	All 7	6/6
2	Widget accessibility failures (contrast, fonts, targets)	Crit	widget-themes.md	3/6
3	Widget theme naming mismatch (runtime bug)	Crit	3 files	4/6
4	Spring parameter conflicts (cross-file + cross-platform)	Crit	interactions, tokens	3/6
5	Deleted feature still specified (drag-to-reorder)	Crit	interactions.md	4/6
6	WCAG contrast calculation errors in token spec	Crit	design-tokens.md	3/6
7	Checkbox done-state contradiction (green vs red)	Major	components.md	3/6
8	Missing platform features (predictive back, Material You)	Major	fold, interactions	2/6
9	Settings/spec layout description contradictions	Major	settings, detail	3/6
10	Title size and duration token drift	Minor	4 files	4/6

Root Cause

The root cause of themes 1, 3, 6, 7, 9, and 10 is spec fragmentation without single-source-of-truth enforcement. Values were defined in design-tokens.md, then copy-pasted into other specs where they drifted. Process recommendation: no spec file may define a hex color, font size, spacing value, or animation parameter inline — all must reference a named token from design-tokens.md.

Bright Spot: Reduce Motion

In contrast to the issues above, Reduce Motion coverage is exemplary. All 30 animations have documented alternatives with platform detection APIs for both iOS and Android. This is the strongest aspect of the entire spec suite.

design-tokens.md

Primary: Senior UI Designer • Secondary: Accessibility Expert Approved with Changes

4 Critical 6 Major 4 Minor — 14 issues

Critical

DT-1: Accent #DC4C3E on white: claimed 4.6:1, actual ~4.08:1 — FAILS AA normal text

Fix: Darken to ~#C9392B or restrict to large text/UI only

DT-2: Due-today #4772FA on white: actual ~4.15:1, not 4.5:1 — FAILS AA

Fix: Darken to ~#3A5FD4 for light mode

DT-3: Due-tomorrow #EB8909 on white: actual ~2.59:1 — FAILS even large text

Fix: Darken to ~#9E5C00 for text usage

DT-4: text.secondary and text.muted are identical values — no semantic differentiation

Fix: Differentiate values or merge with documented aliases

Major

DT-5: text.done fails WCAG at every level (~2.85-2.90:1)

DT-6: #A0A0A0 on #282828 = 4.3:1 — fails AA normal text on elevated dark surfaces

DT-7: Dark-mode due-date lightened colors (#F07068, #7B9CFF, #F5A83D) have no tokens

DT-8: Category dark-mode text colors undefined ("lightened +20%" is not implementable)

DT-9: Spacing scale missing space.9 (44px = iOS touch target)

DT-10: color.chart.bar uses invalid CSS notation

Done Well

Three-tier token architecture. Full SwiftUI/Compose/CSS platform mappings. Dynamic Type support. Reduce Motion section. v1-to-v2 migration table. Complete CSS custom property output. Shadow light/dark differentiation.

components.md

Primary: Senior UI Designer • Secondary: iOS + Android Specialists, A11y Expert Needs Rework

3 Critical 12 Major 8 Minor — 23 issues

Critical

C-1: Category colors differ for 3/5 categories — FC-26/Home swapped

Flagged by: 4 reviewers

C-2: Due-today #4772FA on bg-secondary #F5F5F5 = 3.81:1 — FAILS AA

C-3: Checkbox Done state: text says green #058527, SVG says red #DC4C3E

Flagged by: 3 reviewers

Major (12 issues)

DueChip tonal opacity 12% vs token 10%/15%. bg-task token doesn't exist. P4 priority: 3 specs disagree. TaskRow heights differ. Completion banner wrong color. No keyboard focus indicators. FilterChip height inconsistency. CategoryDot badge 10pt below min. Drag-to-reorder still referenced. bg-primary #FAFAFA vs #FFFFFF. text-primary/secondary/muted dark all differ from tokens. ThemePicker creates third naming scheme. Dynamic Type not used in SwiftUI code.

Done Well

VoiceOver/TalkBack labels per component. Touch targets documented. Component Interaction Map. Cross-Platform Matrix. State coverage. SVG specs with exact coordinates.

widget-themes.md

Primary: iOS Specialist • Secondary: Senior UX Designer, A11y Expert Needs Rework

7 Critical 8 Major 7 Minor — 22 issues

Critical (7)

W-1: 9pt stale indicator font — 7+ occurrences below 11px minimum

W-2: Theme names inconsistent with settings.md — runtime bug

W-3: Medium widget row 42pt below 44pt iOS minimum

W-4: Scrollable NSPopover violates macOS conventions

W-5/6/7: ALL 3 themes use WCAG-failing muted text (#888/#777/#999)

15+ failing fg/bg combinations across Classic, Cards, and Vivid

Major (8)

Lock screen 9pt/10pt labels. 10pt section headers. Large widget rows 38pt/36pt. No deep link URLs. No WidgetKit refresh budget. Vivid omits stale indicator. Cards checkbox blue vs accent red. Appendix B self-assessment incorrect.

Done Well

Three genuinely distinct themes. Comprehensive empty state/overflow handling. Small widget read-only. iOS 17+ Toggle correct. Cross-theme comparison table. Android Glance equivalents.

fold-layout.md

Primary: Android Specialist • Secondary: Senior UX Designer, A11y Expert Approved with Changes

2 Critical 5 Major 8 Minor — 15 issues

Critical

F-1: NavigableListDetailPaneScaffold navigateTo() wrong param (contentKey vs content)

Fix: Compile error — change to content

F-2: No predictive back gesture — mandatory Android 15+

Fix: Add PredictiveBackHandler spec for fold/unfold and detail pane

Major (5)

WindowSizeClass sub-breakpoints non-standard. Material You absent. Section header #888 in wireframe. Section header 32dp below 48dp min. Parallel token names not in design-tokens.md.

Done Well

Thorough fold/unfold storyboards. State preservation. Multi-window 10-scenario test matrix. Enhanced single-column layout. Crease avoidance. API contracts.

task-detail-layouts.md

Primary: Senior UX Designer • Secondary: Senior UI Designer Approved with Changes

1 Critical 5 Major 4 Minor — 10 issues

Critical

TD-1: Completion banner #4CAF50 fails WCAG on every background (2.78:1)

Fix: Use token #058527 (4.6:1 on white)

Major (5)

Title 16px not in token scale. settings.md describes Layout A as "2x2 grid" (rejected) and Layout B as "side drawer" (rejected). Property chip 8px vs pill 9999px. Appendix B stale values.

Done Well

Three genuinely different layouts. Progressive disclosure. Real data context (72% standalone). VoiceOver labels in Appendix A. Edge cases handled. Layout picker with live preview.

interactions.md

Primary: Motion Design Expert • Secondary: iOS + Android Specialists Approved with Changes

4 Critical 11 Major 12 Minor 5 Perf — 32 issues

Critical (4)

I-1: Spring params inconsistent between interactions.md and design-tokens.md

Flagged by: 3 reviewers

I-2: SwiftUI dampingFraction ≠ Compose dampingRatio within same file

I-3: Drag-to-reorder still specified (~90 lines) — feature REMOVED

Flagged by: 4 reviewers

I-4: Widget toggle uses .toggleStyle(.button) instead of AppIntent Toggle

Major (11)

5 spring tokens missing from design-tokens. 3 duration tokens undefined. Theme switch 300ms not a token. Missing reduce motion for Priority Flag (2.9) and Due Date Chip (2.10). Swipe cancel spring inconsistent. Completion 1800ms+ too long. design-tokens interaction table conflicts. UISelectionFeedbackGenerator API wrong. No predictive back. Fold transition contradicts fold-layout.md. Checkbox size 3-way conflict.

Performance (5)

Shadow animation GPU-expensive. Stagger 30ms at 20+ items. Rapid completion batching not specified. Per-row shimmer overhead. 120fps not addressed.

Done Well

Frame-by-frame storyboards. Platform code samples. 20-entry haptics map. Widget constraints correct. 85%+ Reduce Motion coverage. Priority-ordered implementation plan. Specific gesture physics. Animation decision flowchart.

settings.md

Primary: Senior UX Designer • Secondary: Accessibility Expert Needs Rework

2 Critical 6 Major 4 Minor — 12 issues

Critical (2)

S-1: Widget theme names "Classic/Minimal/Vibrant" — runtime bug with persistence keys

Flagged by: 4 reviewers

S-2: Error color #FF3B30 not design token #DC4C3E — two different reds

Major (6)

Success #34C759 vs token #058527. Row height 56dp undocumented override. --text-secondary dark #999999 fails WCAG on #282828. --text-primary dark #FFFFFF vs token #E0E0E0. --due-today repurposed as "P3 priority" (semantic confusion). Sync offline gray fails contrast.

Done Well

Comprehensive IA (8 sections). Every setting fully specified. Platform code examples. Destructive action confirmations. Debug Easter egg. Notification permission handling. Data persistence mapping.

Approval Status

File	Status	Blocking Issues
design-tokens.md	Approved w/ Changes	Contrast ratios need recalculation; missing tokens
components.md	Needs Rework	Color values diverge throughout; checkbox contradiction; third naming scheme
widget-themes.md	Needs Rework	Systematic WCAG failures; naming mismatch; font/touch violations
fold-layout.md	Approved w/ Changes	API parameter error; missing predictive back
task-detail-layouts.md	Approved w/ Changes	Completion banner color; title size not in token scale
interactions.md	Approved w/ Changes	Spring conflicts; deleted feature; missing predictive back
settings.md	Needs Rework	Naming mismatch = runtime bug; multiple token contradictions

Approved

Approved w/ Changes

Needs Rework

Prioritized Fix List

Tier 1: IMMEDIATE (Blocks Implementation)

#	Fix	Files	Effort
1	Align widget theme naming to Classic / Cards / Vivid everywhere	settings.md, components.md	30 min
2	Remove all drag-to-reorder spec (Section 5.3, haptics, spring-drop)	interactions.md	20 min
3	Replace all widget WCAG-failing muted colors; fix font sizes and row heights	widget-themes.md	45 min

Tier 2: HIGH (Before Implementation Starts)

#	Fix	Files	Effort
4	Recalculate all contrast ratios with correct WCAG formula	design-tokens.md	1 hr
5	Full hex-value audit — replace every non-canonical value	6 files	2 hr
6	Resolve checkbox Done state (green #058527 vs red #DC4C3E)	components.md	15 min
7	Reconcile spring parameters — single canonical source	interactions.md, design-tokens.md	1 hr
8	Add predictive back gesture specification	fold-layout.md, interactions.md	45 min
9	Fix settings layout descriptions to match actual specs	settings.md	30 min

Tier 3: MEDIUM (Before Beta)

#	Fix	Files	Effort
10	Add missing tokens (dark due-date, elevated text, durations)	design-tokens.md	30 min
11	Add Material You dynamic color strategy	1-2 files	1 hr
12	Fix widget font sizes (9pt → 11pt min)	widget-themes.md	20 min
13	Increase section header touch targets to 44pt/48dp	components.md, fold-layout.md	20 min

Tier 4: LOW (Before 1.0)

#	Fix	Files	Effort
14	Add RTL layout considerations	3-4 files	2 hr
15	Add edge-to-edge inset specification	fold-layout.md	30 min
16	Complete screen reader labels for widgets	widget-themes.md	45 min

Total estimated effort: ~12 hours of spec editing across all tiers.

Reviewer Agreement Matrix

Shows how many of the 6 specialists independently flagged each theme. Higher agreement = higher confidence.

Theme	UI	UX	Motion	iOS	Android	A11y	Score
Color token inconsistency	X	X	X	X	X	X	6/6
Widget theme naming	X	--	--	X	X	X	4/6
Title/duration token drift	X	X	X	--	--	X	4/6
Deleted feature specified	X	--	X	X	X	--	4/6
Widget accessibility	--	X	--	X	--	X	3/6
WCAG contrast errors	X	X	--	--	--	X	3/6
Checkbox contradiction	X	--	--	X	X	--	3/6
Settings contradictions	X	X	--	--	--	X	3/6
Spring parameter conflicts	X	--	X	X	--	--	3/6
Missing platform features	--	--	--	--	X	X	2/6

Review Team

Role	Primary Files	Issues	Expertise
Senior UI Designer	design-tokens.md, components.md	43	Color theory, contrast ratios, typography, visual consistency
Senior UX Designer	task-detail-layouts.md, settings.md	27	User flows, cognitive load, IA, discoverability
Motion Design Expert	interactions.md	25	Animation timing, spring physics, haptics, performance
iOS Design Specialist	widget-themes.md	36	Apple HIG, SF Symbols, WidgetKit, SwiftUI
Android Design Specialist	fold-layout.md	28	Material Design 3, Compose, Glance, Fold
Accessibility Expert	All files (dedicated audit)	47	WCAG 2.1 AA, touch targets, screen readers, contrast

Sprint Summary

Key Finding

Severity Breakdown

By File (Deduplicated)

By Reviewer (Raw)

Top 5 Most Impactful Issues

Cross-Cutting Themes

Root Cause

Bright Spot: Reduce Motion

design-tokens.md

Critical

Major

Done Well

components.md

Critical

Major (12 issues)

Done Well

widget-themes.md

Critical (7)

Major (8)

Done Well

fold-layout.md

Critical

Major (5)

Done Well

task-detail-layouts.md

Critical

Major (5)

Done Well

interactions.md

Critical (4)

Major (11)

Performance (5)

Done Well

settings.md

Critical (2)

Major (6)

Done Well

Approval Status

Prioritized Fix List

Tier 1: IMMEDIATE (Blocks Implementation)

Tier 2: HIGH (Before Implementation Starts)

Tier 3: MEDIUM (Before Beta)

Tier 4: LOW (Before 1.0)

Reviewer Agreement Matrix

Review Team

Related Documents