Steadyline

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Nunito Sans has soft, rounded terminals that make the planner feel like a cozy morning ritual rather than a productivity machine.

• Nunito SansHeadings: hero 60px 700 at -1.5px, section heads 36px
• Nunito SansBody: body 16px at 1.6, 12px uppercase eyebrows

Who it is for

• Self-improvement minded individuals
• People building morning or fitness routines
• Users tired of ad-heavy habit apps
• Developers wanting a clean tracker base

Layout

1. Transparent top nav over hero: infinity-mark logo left, 3 anchor links center, outlined 'Get started' pill right
2. Full-bleed photographic hero with dark overlay: large white two-line headline, subcopy, amber CTA button
3. Floating daily-ritual summary card (greeting, date, progress %, habit checklist)
4. Features grid: 6 cards (streaks, heatmap, insights, reminders, dark mode, sync)
5. How it works: 3 numbered rounded-square steps joined by a dashed connector
6. Reviews section on warm off-white band
7. Closing CTA band and footer
8. App: onboarding, Today dashboard with habit cards, Insights page, Settings

Palette

Calm, warm, cozy, focused, grounded. Feels like a quiet morning ritual rather than a productivity machine.

• background#faf8f5
• text#0e0a07
• primary (espresso brown)#5f4738
• accent / CTA amber#f5a93b
• secondary / muted#f3ede7
• accent soft (peach)#f2d1ad
• border#e9e4de
• muted text#6b5a4e
• input border#a28c73

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Nunito Sans 700, 60px hero with -1.5px tracking; 36px section heads, tight tracking, sentence case

Body

Nunito Sans 400 16px, warm gray-brown secondary text (#6b5a4e), line-height 1.6, max ~70ch

Single geometric-humanist sans; hierarchy via weight and size, 12px uppercase eyebrow labels of 1-4 words with 0.08em tracking

Spacing and imagery

Generous whitespace, centered max-w ~1100px container, ~120px section padding, alternating white and warm off-white bands; 12px radius cards, 16px rounded-square step badges, pill buttons

Lifestyle photography of a person reading in a sunlit home, darkened for text legibility; in-app visuals are colored heatmap cells and progress rings rather than illustrations.

Components

• Transparent overlay navbar
• Photo hero with gradient scrim
• Amber primary CTA with arrow
• Daily ritual summary card with progress
• Feature card grid with icons
• Numbered step timeline with dashed connector
• Testimonial cards
• Habit card with check button and streak count
• 30-day heatmap grid
• Habit create/edit dialog with color swatches and schedule picker
• Insights charts (completion rate, streaks)
• Onboarding stepper
• Settings with danger-zone clear data

Interactions

• Tap-to-complete check with satisfying scale/fill animation
• Streak milestone toast at 7/30/100/365 days
• Drag-and-drop habit reordering persisted to DB
• Heatmap cell hover tooltip with date and status
• Dark mode toggle
• Smooth scroll to anchored sections
• Button hover lift and arrow nudge
• Onboarding step transitions

Data

• Habit{id, user_id, name, description, color, frequency_type(daily|weekdays|times_per_week), weekdays[], target_per_week, reminder_time, position, archived}
• HabitLog{id, habit_id, user_id, date, completed_at}
• Profile{id, display_name, timezone, theme}
• Derived: Streak{current, longest}, completion_rate

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any color change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labeled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build **Steadyline**, a quiet habit tracker for people who want to build routines without noise. A warm marketing page introduces the product; behind sign-in, users create habits with colors and schedules, check them off each day, and see streaks, a 30-day heatmap and simple insights. The core job: make the daily check-in take seconds and make consistency visible.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. dnd-kit for habit reordering, date-fns for schedule and streak math, TanStack Query for server state, react-hook-form + zod for the habit form, Recharts for insights, Framer Motion for check animations. Supabase: Postgres for habits and logs, Auth (email/password + Google), optional Edge Function for reminder emails.

### Pages & layout
1. **Landing** – transparent nav over a full-bleed lifestyle photo with a dark gradient scrim; two-line white headline, one-sentence subcopy, amber CTA; a floating "today" summary card showing 2 of 4 habits done. Then a 6-card feature grid, a 3-step "how it works" row with numbered rounded-square badges joined by a dashed line, testimonial cards on an off-white band, final CTA, footer.
2. **Auth** – sign in / sign up / reset.
3. **Onboarding** – 3 steps: pick starter habits, set schedule, choose colors.
4. **Today** – greeting, date, progress ring, list of habit cards (check button, streak flame, mini 30-day heatmap).
5. **Insights** – completion rate per habit, longest streaks, weekly bar chart.
6. **Settings** – profile, timezone, theme, clear data.

### Design system
Warm neutral light theme with a proper dark variant. Tokens: `--background: #faf8f5`, `--foreground: #0e0a07`, `--primary: #5f4738` (espresso), `--cta: #f5a93b` (amber), `--secondary: #f3ede7`, `--accent: #f2d1ad`, `--border: #e9e4de` (decorative dividers only), `--input-border: #a28c73`, `--muted-foreground: #6b5a4e`. Dark: `--background: #1a1512`, `--foreground: #f3ede7`, `--muted-foreground: #b3a497`; amber CTA keeps dark text in both themes. Habit colors: 8 muted swatches (sage, clay, ocean, plum, etc.). Font: Nunito Sans (400/500/700). Scale 12/14/16/20/28/36/60 (body 16px/1.6, nothing below 12px), headings tracking -0.025em. Spacing 4-pt base, sections 96–128px. Radius 12px cards, 16px step badges, full pills for buttons. Shadows soft and warm (`0 8px 24px rgb(95 71 56 / .12)`). Motion 150–250ms ease-out; check fill 300ms spring.

### Components & interactions
HabitCard (default, completed, not-scheduled-today, dragging), CheckButton (idle/hover/pressed/done/loading), Heatmap (cells with tooltip), HabitDialog (validation errors inline), ColorSwatchPicker, SchedulePicker (daily/weekdays/times-per-week), ProgressRing, MilestoneToast, EmptyState ("Add your first habit"), ErrorBanner with retry. Reordering via drag handle and keyboard. Optimistic check-off with rollback on failure.

### Data & state
Tables: `habits` (user_id, name, description, color, frequency_type, weekdays int[], target_per_week, reminder_time, position), `habit_logs` (habit_id, user_id, date unique per habit), `profiles` (timezone, theme). Streaks computed client-side with date-fns respecting schedule and user timezone. Seed demo with 4 fictional habits and 45 days of logs.

### Accessibility
Check buttons are real buttons with `aria-pressed` and habit name in the label. Heatmap cells expose date + status via `aria-label`; provide a text summary ("21 of 30 days"). Drag reorder must also work with keyboard (dnd-kit keyboard sensor) and have up/down menu actions. Ensure white hero text over photo passes 4.5:1 via a `rgb(14 10 7 / .65)` scrim; amber CTA uses dark text. Visible 2px focus ring in primary. Honor `prefers-reduced-motion` for check animations. Verified contrast: body text #0e0a07 on #faf8f5 = 18.6:1; muted text #6b5a4e on #faf8f5 = 6.2:1; dark text #0e0a07 on #f5a93b = 9.9:1; white #ffffff on #5f4738 = 8.5:1; white hero text #ffffff on #625f5e = 6.3:1.

### Security
RLS on `habits`, `habit_logs`, `profiles`: `user_id = auth.uid()` for select/insert/update/delete. Unique constraint (habit_id, date). Validate habit input with zod on client and via DB constraints (name length ≤ 60, color from allowlist). Only the anon key in the client; reminder email function uses service key from env. "Clear data" requires typed confirmation.

### Performance & SEO
Landing pre-rendered-friendly with meta/OG tags, compressed hero image with width/height set, lazy load below-fold images. Code-split the app routes from the landing. Target Lighthouse 90+.

### Guardrails
- Use original copy and placeholder photography; no trademarked names or logos.
- Label testimonials as sample content; don't present them as real users.
- Store only what the tracker needs; no health data beyond habit names.
- Keep components small and typed; no `any`; surface errors visibly.
- Done when: a user can sign up, create a weekday-only habit, check it off, see the streak and heatmap update, reorder habits by keyboard, and data persists after reload.

Open the builderAll templatesThis palette on its own