gp/docs/design/focus-seed-visual-system-v1.0.2.md

Focus Seed Visual System v1.0.2

Status: planning contract. Do not treat this document as an implementation diff.

Product Thesis

Focus Seed is an offline-first personal focus companion. It helps users choose one important thing, complete focused sessions, keep daily habits, write a short reflection, and review visible progress.

The product should not be plant-only. "Seed" means intention, momentum, craft, discipline, and progress. Plant visuals are allowed only as one mature motif, mostly for growth, empty states, or reward moments.

Recommended Direction

Use a hybrid direction:

• Base: Editorial Focus Companion.
• Structure: Soft Bento Productivity.
• Focus mode: Precision Dark as an optional immersive screen language.
• Warmth: Light editorial or tactile illustration for empty states, rewards, and growth.

Working name: Calm Modular Editorial.

This direction is global-friendly, feasible in Flutter, serious enough for productivity users, warm enough for retention, and flexible enough for future subscription features.

Primary Product Loop

1. Pick today's main focus.
2. Start or continue a focus session.
3. Complete daily habits.
4. Write one short reflection.
5. Review growth and adjust tomorrow.

Target App Structure

Preferred primary navigation:

• Today: daily action hub.
• Focus: immersive timer and active session.
• Habits: habit list, completion, weekly rhythm.
• Growth: reflection, history, trends, milestones.

Settings should move behind a top-right profile/settings entry or a More sheet. It should not compete with the daily loop unless account, billing, or preferences become a core product surface.

Screen Hierarchy

Screen	User goal	First visible content	Primary action	Secondary content	Scroll behavior
Today	Know what to do now	Date, greeting, main focus	Start focus or set focus	Habit summary, reflection prompt, small growth cue	Natural vertical scroll; P0 remains near top
Focus	Stay in one session	Current task and timer	Pause/complete/start	Duration, mode, next break, session stats	Minimal scroll; controls stable
Habits	Complete and manage habits	Today progress and filters	Toggle habit / add habit	Weekly dots, streaks, edit/reorder	Dense list; sticky section controls optional
Growth	Understand progress	Reflection entry or weekly summary	Reflect today / view timeline	Sessions, habits, records, trend charts	Timeline + cards; history can go to detail
Settings	Adjust app and privacy	Local data, appearance, language	Change preference	Privacy, clear data, version	Compact grouped list

Visual System

Palette:

• Primary: mature green or teal for progress and focus.
• Secondary: restrained blue/violet for reflection or insight.
• Warm neutral surfaces instead of pure white where appropriate.
• Semantic colors for success, warning, destructive, disabled, offline.
• Dark mode must be designed, not inverted.

Typography:

• Use highly readable system UI for body and dense data.
• Optional expressive display style only for brand/page title, not dense content.
• Timer and stats need tabular, stable numeric rendering.

Spacing and surfaces:

• Use an 8 px base rhythm with 4 px fine adjustments.
• Cards should have roles: hero, action, stat, list container, warning, reward.
• Avoid stacking identical large rounded cards.
• Prefer compact rows for dense data.

Motifs:

• Focus ring, anchor point, path, window/light, notebook, timeline, gentle growth.
• Use illustration in empty states, onboarding, growth, and rewards.
• Do not decorate every card.

Interaction And Motion

Motion budget:

• 80% functional feedback: press, select, save, toggle.
• 15% spatial motion: tab/page/sheet/list transitions.
• 5% reward: session complete, streak, milestone.

Required behavior:

• Tap feedback within 100 ms.
• Page transitions preserve direction.
• Timer updates must not rebuild entire pages.
• Completion should be rewarding but non-blocking.
• Reduced motion must disable decorative effects.
• Bottom tabs preserve state and scroll position.

Component System

Create or consolidate:

• AppScaffold and AppTopBar.
• AppNavigation.
• AppButton variants.
• AppCard role variants.
• SectionHeader.
• CompactStatCard.
• DenseListRow.
• HabitRow.
• TimelineItem.
• EditableTextCard.
• EmptyState and ErrorState.
• OfflineBadge and SaveStateIndicator.
• AnimatedNumber, AnimatedProgressBar, AnimatedProgressRing.
• RewardMoment.

Content Rules

• English-first for release; Chinese supported for development/testing.
• Visible text must be user-facing, not developer-facing.
• Avoid words like JSON, debug, select result, internal, export/import unless a real user feature needs them.
• Empty states should guide one action.
• Destructive actions must state impact clearly.

Flutter Execution Plan

1. Create design, component, and motion foundations.
2. Prototype Today and Focus first; review screenshots and interaction.
3. Add the Habits screen as a real first-class surface.
4. Rework Growth into reflection plus progress timeline.
5. Move Settings out of primary navigation or make it compact.
6. Add empty/dense/error/offline/restored states.
7. Verify light/dark, English/Chinese, small phone, large text.
8. Build and test Android release after each large module.

Risk Notes

• Navigation changes can affect user familiarity; do it on a development branch, not the already submitted release.
• More visual richness can reduce performance if blur/shadow/ambient animation is overused.
• Too much plant imagery may feel childish or narrow.
• Too much bento/card structure may look generic.
• Too much dark precision may feel cold.

Decision For v1.0.2

Use Calm Modular Editorial unless the user chooses a stronger expressive direction. Start with Today and Focus because they define whether the product feels real.