166 lines
7.3 KiB
Markdown
166 lines
7.3 KiB
Markdown
# 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.
|