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

Focus Seed Visual System v1.0.2

Status: visual direction reference. Current product scope is defined in ../product-current-baseline.md.

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

Current V1 primary navigation:

• Today: daily action hub.
• Focus: immersive timer and active session.
• Records: focus sessions and reflection history.
• Me: preferences, privacy, and local data controls.

Habits and Growth are not current primary tabs. They can be promoted later only when habit management, trend review, and detail pages are real product surfaces rather than thin wrappers.

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
Records	Review saved work	Focus/reflection history switch	Open Today when empty	Sessions, notes, simple trends	Timeline/list; detail pages are V2
Me	Adjust app and privacy	Local data summary	Change preference	Privacy, clear data, language	Compact grouped list

Visual System

Palette:

• Brand: deep ink for identity, headings, and logo text. Do not use brand as a catch-all accent.
• Action: blue for primary buttons, navigation selection, and forward movement.
• Focus: blue family for timer and active-session controls.
• Habit: amber or warm accent for small repeatable actions.
• Reflection: violet for notes, review, and insight.
• Success: green for completion, checkmarks, and finished progress.
• Privacy/local: green-teal for on-device trust indicators only.
• Warm neutral surfaces instead of pure white where appropriate.
• Warning/destructive/disabled/offline must remain separate semantic colors.
• 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.

Asset ambition:

• Be more expressive with the logo, app icon, key illustration set, reward visuals, and store screenshots. These are allowed to carry stronger identity than the everyday UI.
• Do not rely only on the plant metaphor. Explore sharper symbols such as focus rings, marked paths, light windows, paper cuts, modular tiles, timeline traces, and crafted seed/anchor hybrids.
• Navigation and utility icons should stay readable and consistent, but they may use a custom symbolic grammar after the structure passes.
• Illustrations should feel complete and production-worthy at their real display size. Avoid rough placeholder line art in polished previews.
• Dense task surfaces stay restrained; onboarding, empty states, milestones, completion moments, and launch assets can be bolder.

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.

Motion ambition:

• Reward moments may be more memorable than the base UI: focus ring bloom, path lighting, notebook mark, seed-to-signal transition, or timeline pulse.
• Keep bold motion rare, interruptible, and non-blocking. It should celebrate completion or clarify state, not decorate every tap.
• Use Flutter-safe primitives first. Escalate to Rive/Lottie only for a signature reward or onboarding moment with a static fallback and reduced-motion behavior.

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. Keep Records and Me honest until Habits/Growth have enough product depth to become primary tabs.
4. Add detail pages only when they have data writes, navigation targets, and clear user outcomes.
5. Keep Settings compact and user-facing; avoid developer-tool language.
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.