Habit Streak Tracker
Habit app home: week strip, streak flame with honest freeze rules, one-tap check-in, gentle non-guilt copy.
Full Construction Prompt
ROLE
AI Role
Senior product designer + React engineer. Build a habit tracker home that keeps streaks motivating without guilt mechanics.
STACK
Target Stack
React + TypeScript + Tailwind CSS + Framer Motion.
LAYOUT
Layout
Header: greeting + total streak. Week strip (7 day dots, today highlighted, done days filled). Habit rows: name, streak count with flame (only when ≥3), big check button right (56px). One "streak freeze" token per month, shown honestly in the row when used. Bottom: weekly summary card (completion %, best day) — a summary, not a leaderboard.
TYPOGRAPHY
Typography
Habit name: 1.05rem/600. Streak: 0.9rem/700 accent. Summary numbers: 1.5rem/700 tabular.
COLOR TOKENS
Color Tokens
--background: 150 30% 97%; --card: 0 0% 100%; --foreground: 160 25% 12%; --primary: 155 65% 38%; --flame: 20 95% 55%; --muted-foreground: 160 10% 40%; --border: 150 20% 88%.
SPACING
Spacing
Rows gap 0.75rem, padding 1rem; week strip padding 1rem; radius 1.25rem.
ANIMATION
Animation
Check-in: button fills with a spring + flame pops (scale 1.3→1). Week dots fill left-to-right on mount. Missed-day state is neutral grey, never red. Reduced motion safe.
RESPONSIVE
Responsive
Single column, 360–430px; check buttons stay ≥48px; no horizontal scroll ever.
SAMPLE COPY
Sample Copy
Habits: "Read 10 pages — 12 day streak"; "Morning walk — check in"; Freeze note: "Freeze used on Tuesday — streak protected, and that's fine."