Tend habit tracker
A sunny illustrated landing page and three onboarding screens for a habit app that’s fine with missed days.
Prompt: Landing page (web), Tend
Build the marketing landing page for Tend, a gentle habit tracker for everyday routines (water, reading, walking, stretching, winding down). Tend counts "most days" instead of perfect streaks: check-ins take two seconds, a missed day is fine, and the week shows up as a calm rhythm instead of a score.
Follow the style guide style.md (Illustrated App v2) exactly. Treat every token, pattern, and item in its "Never" list as a hard constraint. Use only the illustrations listed below; never draw scenes, people, objects, or plants in code.
Assets
| File | Size | What it shows | Where text may go |
|---|---|---|---|
assets/hero-scene.png | 1536×1024 | City park in the morning, people doing small habits | Top 45% is clear sky; the lower-middle lawn is empty for the phone |
assets/card-move.png | 1536×1024 | Man walking a dog down a leafy street | No text on it |
assets/card-read.png | 1536×1024 | Woman reading in an armchair with a cat | No text on it |
assets/card-rest.png | 1536×1024 | Evening tea ritual at a kitchen table | No text on it |
assets/spot-water.png, spot-book.png, spot-sneaker.png, spot-yoga.png, spot-moon.png | 1024×1024, transparent | Single objects | n/a |
Sections, in order
- Nav: floating white pill bar (999 radius, floating shadow), centered over the top of the hero: wordmark "Tend" with a small leaf-green dot, links (How it works, Habits, Pricing), ink pill button "Get the app".
- Hero:
hero-scene.pngfull-bleed as background (cover, anchored to the top, 40px bottom radius). All hero text sits inside the top 45% sky zone, centered:- Headline, Outfit 76px, ink: "Keep small habits, [most] days." where [most] is the inline headline pill in sun yellow containing the word plus
spot-sneaker.pngat 40px. - Subline directly on the sky in ink (not ink-soft, which fails contrast on sky), Plus Jakarta Sans 18px weight 500, max 560px: "Check in in two seconds, skip a day without guilt, and watch your week settle into a rhythm."
- Buttons: primary "Start for free", secondary "See how it works".
- Two sparkles in the sky, away from the text.
- A phone mockup sits on the empty lawn in the lower middle and overlaps the bottom edge of the hero by ~120px. Build Tend's Today screen inside it in HTML: date "Tuesday, 14 Oct", greeting "Good morning, Sam", a week strip of 7 day dots (5 filled leaf, 1 today ring, 1 empty), then a list of habit rows, each with its spot illustration at 40px, a name, a small detail, and a round check: Drink water, "5 of 8 glasses" with a mini progress bar (sky); Read, "10 pages" (done); Walk, "20 min" (done); Stretch, "5 min"; Wind down, "after 21:00". Tab bar: Today, Week, Habits, Me.
- Two floating widgets beside the phone (white, 20px radius, floating shadow, gentle drift): left "Water · 5 of 8 glasses" with
spot-water.png; right "This week · 5 of 7 days, and that counts" withspot-moon.png.
- Headline, Outfit 76px, ink: "Keep small habits, [most] days." where [most] is the inline headline pill in sun yellow containing the word plus
- Why it sticks: small label pill "Why it sticks", heading Outfit 40px centered: "Built for real weeks, not perfect ones". Three tinted bento cards (leaf-50, sun-50, sky-50) with illustration on top, title, one line, and the round arrow button:
card-move.png: "Check in, move on", then "One tap from your lock screen. No forms, no journaling required."card-read.png: "Most days is the goal", then "Miss a day and nothing resets. Your rhythm is what we show."card-rest.png: "Nudges that read the room", then "Reminders back off when you're busy and never nag twice."
- Pick your habits: two columns on desktop. Left: heading Outfit 40px "Start with one. Add more when it feels easy." and a short paragraph. Right: a bento grid of five tinted tiles laid out 3 + 2 (row one: sky-50, sun-50, clay-50; row two: leaf-50, sky-50, each twice as wide), each with its spot illustration at 72px and a label: Drink water, Read a little, Take a walk, Stretch, Wind down. One sparkle.
- Stats band: white panel, 40px radius. Three big numbers in Outfit 56px with labels: "2 sec" with "to check in"; "0" with "streaks to lose"; "5 of 7" with "still a great week".
- CTA:
sky-600panel, 40px radius. White Outfit 40px headline: "Your first habit is free, forever." White 18px line: "Upgrade when you want more than three." White pill button with ink text "Start for free".spot-yoga.pngat 220px on the right. - Footer: wordmark, three link columns (Product, Company, Help), small ink-soft copyright "© 2026 Tend".
Output
- One self-contained
landing-web.htmlwith inline CSS and minimal vanilla JS (scroll reveal, widget drift, checking a habit in the phone updates its row). Google Fonts allowed. Images via relative pathsassets/.... - Responsive below 768px: headline 44px, hero text stays in the sky zone (use
object-position/background-position so the sky stays behind it), phone centered below the text, widgets stack under the phone, cards and tiles become one or two columns. - Reveal animations must leave all content fully visible when
prefers-reduced-motion: reduceis set. - Semantic HTML, alt text on every image, visible focus states, AA contrast everywhere.
Prompt: Onboarding (mobile, 3 screens), Tend
Build the three onboarding screens of the Tend mobile app (a gentle habit tracker that counts "most days" instead of perfect streaks), presented side by side like a polished app showcase.
Follow the style guide style.md (Illustrated App v2) exactly. Treat every token, pattern, and item in its "Never" list as a hard constraint. Use only the illustrations listed below; never draw scenes, people, objects, or plants in code.
Assets
| File | Size | What it shows | Where text may go |
|---|---|---|---|
assets/onboard-welcome.png | 1024×1024 | Woman stretching by a sunny bedroom window | Top 18% is plain wall (status bar zone) |
assets/onboard-reminder.png | 1024×1024 | Man reading in bed at night, moon outside | Top 18% is plain night sky/wall (status bar zone) |
assets/spot-water.png, spot-book.png, spot-sneaker.png, spot-yoga.png, spot-moon.png | 1024×1024, transparent | Single objects | n/a |
Presentation
- Page background
canvas. A largesun-50panel (40px radius) holds three phones in a row, 48px apart, each 390 × 844 with a 40px radius and 10px ink bezel. Under each phone a small caption in ink-soft 14px: "01 Welcome", "02 Pick habits", "03 Reminders". Two sparkles on the panel, never over a phone. - Each phone screen is 390 × 844 inside the 10px bezel (410 × 864 overall). Inside each phone: 47px status bar, 34px bottom safe area with a home indicator, 20px side margins. Everything fits without scrolling.
Screen 1: Welcome
onboard-welcome.pngfills the top 56% (cover). Status bar glyphs white over the image with the style's top scrim.- White sheet with 32px top radius overlapping the image by 32px.
- Headline Outfit 34px, ink, left-aligned: "Habits that [bend], not break" where [bend] is the inline headline pill in sun yellow. Punctuation hugs the pill: the comma sits directly after it with no space.
- One line ink-soft 16px: "Tend counts most days, not perfect streaks. Two seconds a day is enough."
- Page indicator: three dots, the first one a wide ink pill.
- Primary ink pill button, full width, 56px: "Get started". Below it a text button "I already have an account".
Screen 2: Pick habits
- White background, status bar glyphs ink. Top row: round back button (white, 1px line border) and a progress bar (2 of 3,
leaf-600fill on a line-colored track). - Headline Outfit 30px: "Pick one or two to start". One line ink-soft: "You can add more once these feel easy."
- 2-column grid of six compact tiles (about 150px tall), 20px radius, each with a -50 tint background, the spot illustration large at 96px so it fills the tile, and a label:
Drink water (
spot-water.png, sky-50) · Read a little (spot-book.png, sun-50) · Take a walk (spot-sneaker.png, clay-50) · Stretch (spot-yoga.png, leaf-50) · Wind down (spot-moon.png, sky-50) · "Add your own" (white tile, 1px dashed line border, round + button). - Drink water and Read a little start selected: 2px ink border and a leaf check circle with an ink check mark in the top-right corner. Unselected tiles show an empty white check circle with a 1px line border.
- Primary button: "Continue with 2 habits". The number updates as tiles are toggled; with zero selected it reads "Pick at least one" and looks quiet (secondary style) but stays focusable.
Screen 3: Reminders
onboard-reminder.pngfills the top 42% (cover). Status bar glyphs white with the top scrim.- White sheet with 32px top radius overlapping by 32px.
- Headline Outfit 30px: "When should we [nudge] you?" where [nudge] is the inline headline pill in sky-50 with ink text.
- Three time options as a segmented row of pills: "Morning 08:00", "Midday 12:30", "Evening 21:00", with Evening selected (ink fill, white text).
- A settings row with label "Quiet on weekends" and a toggle (on,
leaf-600track, white knob). - A small
sun-50note card, 20px radius, withspot-moon.pngat 40px: "Miss a day and we won't remind you twice." - Primary button "Turn on reminders", text button "Not now".
Output
- One self-contained
onboarding-mobile.htmlwith inline CSS and minimal vanilla JS (tile selection with live count, time selection, toggle). Google Fonts allowed. Images via relative pathsassets/.... - Between 1300px and the full row width, scale the three phones down evenly (CSS
zoomor transform) so they stay in one row; below 1300px they wrap into a centered column with 48px gaps, scaled to fit narrow screens. No horizontal page scroll at any width. - Real buttons, radios, and switches with labels; alt text; visible focus states; AA contrast.
Tokens
Illustrated App v2.1sky#5B9BFF
primary brand color, hero sky, links, active states
sky-50#EAF3FF
tinted card background
leaf#4CB963
growth, success, progress
leaf-50#EAF8EE
tinted card background
sun#FFC94D
highlight pills, badges, sparkles
sun-50#FFF6DC
tinted card background
clay#F08A5D
warm accent, one highlight per screen
clay-50#FDEDE5
tinted card background
sky-600#2F6BDB
colored panels that carry white text (white on it = 4.9:1)
leaf-600#26773B
leaf panels that carry white text
clay-600#B84E25
clay panels that carry white text
ink#14161A
headlines, primary buttons
ink-soft#5B6170
body and secondary text
line#E7E9EE
hairlines, outlines
canvas#F7F8FA
page background between sections
white#FFFFFF
cards, sheets
Style: Illustrated App (v2.1)
Direction
Bright and friendly, with custom illustration doing most of the work while the UI stays clean and confident. It should look like a polished app showcase shot that actually works: big bold type, a full-bleed illustrated scene with a real phone UI placed inside it, and soft pastel color blocks.
Assets (mandatory)
All illustrations come from the provided files in assets/. Never draw illustrations, people, plants, or scenes with SVG or CSS. Code only draws UI: shapes, cards, charts, icons for controls, and the small 4-point sparkle.
Tokens
Color
| Token | Hex | Use |
|---|---|---|
| sky | #5B9BFF | primary brand color, hero sky, links, active states |
| sky-50 | #EAF3FF | tinted card background |
| leaf | #4CB963 | growth, success, progress |
| leaf-50 | #EAF8EE | tinted card background |
| sun | #FFC94D | highlight pills, badges, sparkles |
| sun-50 | #FFF6DC | tinted card background |
| clay | #F08A5D | warm accent, one highlight per screen |
| clay-50 | #FDEDE5 | tinted card background |
| sky-600 | #2F6BDB | colored panels that carry white text (white on it = 4.9:1) |
| leaf-600 | #26773B | leaf panels that carry white text |
| clay-600 | #B84E25 | clay panels that carry white text |
| ink | #14161A | headlines, primary buttons |
| ink-soft | #5B6170 | body and secondary text |
| line | #E7E9EE | hairlines, outlines |
| canvas | #F7F8FA | page background between sections |
| white | #FFFFFF | cards, sheets |
Rules:
- One primary color per section (sky, leaf, sun, or clay) plus its -50 tint. A row of cards may use up to three different tints.
- Text on color: white text only on the -600 tokens. On sky, leaf, sun, or clay (400 level) use ink text. Never put white text on #5B9BFF (2.8:1).
- Body text is ink-soft on white or -50 tints only.
- Controls: "on" states for toggles, checkboxes, and progress use
leaf-600(orsky-600) so they reach 3:1 against white; glyphs on a leaf/sky 400 fill are ink, on a -600 fill they are white.
Type
- Display: "Outfit" (Google Fonts), weight 600, letter-spacing -0.03em, line-height 1.02.
- UI and body: "Plus Jakarta Sans", weights 400, 500, 600. Body line-height 1.55.
- Scale (px): 12 · 14 · 16 · 18 · 22 · 28 · 40 · 56 · 76.
- Big numbers (stats, prices): Outfit 600, tabular figures.
Shape
- Radius: 12 (chips), 20 (inputs, small tiles), 28 (cards), 40 (phone frame, large panels), 999 (pills, round buttons).
- Shadow (floating UI only, e.g. widgets over the illustration):
0 1px 2px rgba(20,22,26,.06), 0 12px 32px rgba(20,22,26,.10). Flat cards have no shadow. - Spacing (px): 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 72 · 112.
Text over illustrations
- Every scene that sits behind text is generated with an empty zone (e.g. "top 45% is clear sky with at most two small clouds"). Text may only sit inside that zone.
- If the image has no calm zone, do not overlay text: place the text on a solid band (white or a -50 tint) above or below the image instead.
- Never fix readability with a pill or box behind a sentence; fix the composition.
- Status bars and controls over an image: white glyphs plus a functional scrim at the top edge,
linear-gradient(rgba(20,22,26,.35), transparent)96px tall. This scrim is the only gradient allowed.
Signature patterns
- Inline headline pill: inside a headline, one word or an icon sits in a rounded pill of
sunorsky-50, the same height as the cap height + padding. Use at most once per screen (a multi-screen showcase may repeat it, one per phone). - Scene + phone: a full-bleed illustration with a phone mockup (40px radius, 10px ink bezel) overlapping it. Real app UI is built in HTML inside the phone. Two or three small floating UI widgets (white, 20px radius, floating shadow) sit around the phone.
- Tinted bento cards: cards with a -50 tint background, an illustration at the top cropped with 20px radius, title in Outfit 22px, one line of ink-soft text. Spot illustrations inside tiles are at least 64px; inline in a list row, note, or widget they may be 40px.
- Round arrow button: 40px circle in ink with a white ↗ arrow, top-right of cards.
- Sparkle: 4-point star drawn in SVG, in
sunorink, 12 to 28px. Max 3 per section, never on top of text. - Progress ring + big number: for stats inside the phone UI.
Buttons
- Primary: ink pill, white text, 48px tall (56px when full-width on a phone screen), 24px horizontal padding, 600 weight.
- Secondary: white pill with 1px line border.
- Hover: primary lightens to #2A2D33, 150ms. No scale, no glow.
Motion
- Section reveal: fade + 16px rise, 500ms, cubic-bezier(0.22, 1, 0.36, 1), stagger 70ms.
- Floating widgets drift 6px up and down, 5s ease-in-out, infinite, offset per widget.
- Respect
prefers-reduced-motion; content must be fully visible and static when it is set. - Above-the-fold content must be visible within 1s of load without scrolling. Implementation: reveal observers use
threshold: 0with no negative bottomrootMargin, and anything already inside the viewport on load is revealed immediately.
Copy voice
Warm, clear, and specific. Short headlines with one concrete promise. No hype.
Never
- Purple-to-blue gradients, any decorative gradient (only the status-bar scrim above is allowed), glassmorphism, blur, glow, neon
- Dark mode with gold "premium" accents
- Cream paper + serif + uppercase monospace labels (editorial look)
- Inter, Roboto, Arial, or system fonts as the visible font
- Emoji as icons or decoration
- Hand-coded SVG/CSS illustrations of people, plants, landscapes, or objects
- Phrases like "unlock", "supercharge", "seamless", "revolutionize", "next level"
- Fake logo strips or "Trusted by 10,000+"
card-move.png2.0 MB
card-read.png1.8 MB
card-rest.png1.5 MB
hero-scene.png2.2 MB
onboard-reminder.png1.4 MB
onboard-welcome.png1.2 MB
spot-book.png748 KB
spot-moon.png642 KB
spot-sneaker.png924 KB
spot-water.png1015 KB
spot-yoga.png833 KB
Image prompts
The prompts we used to make these images. Use them to make your own versions.
{
"styleAnchor": "Modern flat vector illustration for a friendly mobile app. Bold, clean, rounded shapes with no outlines; forms are defined by color alone. Two-tone cel shading (one flat shadow tone per color), very subtle grain texture. Saturated but soft palette: sky blue #5B9BFF, leaf green #4CB963 with darker greens, sun yellow #FFC94D, warm clay orange #F08A5D, cream and white highlights, deep navy #14161A for small details. People have simple, friendly faces and natural, diverse skin tones. Warm daylight, calm and cheerful mood.",
"images": [
{
"name": "hero-scene",
"size": "1536x1024",
"background": "opaque",
"prompt": "A wide city park on a fresh morning, seen from slightly above eye level. Lush trees at both edges, a curving path, a pond with ducks at the far right. Small everyday habits happening around the park: on the left a woman rolling out a yoga mat on the grass and stretching; on the right an older man reading a book on a bench with a takeaway coffee; further back a young person jogging with a happy dog; a kid refilling a water bottle at a drinking fountain.",
"emptyZones": "The top 45% of the image is clear sky blue with at most two small clouds at the far edges and no tree branches crossing into it. The center of the lawn in the lower middle is open with no people or objects, because a phone mockup will be placed there."
},
{
"name": "onboard-welcome",
"size": "1024x1024",
"background": "opaque",
"prompt": "A cozy, sunlit bedroom corner in the morning: a young woman in comfy clothes stretching her arms up by a big open window, a leafy plant on the sill, a mug of tea steaming on a small side table, soft rug, light curtains moving in the breeze.",
"emptyZones": "The top 18% is a plain, calm wall color with no objects, because the phone status bar sits there."
},
{
"name": "onboard-reminder",
"size": "1024x1024",
"background": "opaque",
"prompt": "A calm evening scene: a man sitting up in bed reading a book under a warm bedside lamp, a cat curled at his feet, a glass of water on the nightstand, a deep blue night sky with a crescent moon and a few stars outside the window. Cozy and quiet. Use deep navy and sky blue for the night with warm sun-yellow lamplight.",
"emptyZones": "The top 18% is plain night sky or wall with no objects, because the phone status bar sits there."
},
{
"name": "card-move",
"size": "1536x1024",
"background": "opaque",
"prompt": "A young man in a light jacket walking a golden dog along a leafy tree-lined street in soft morning light, both mid-stride and happy. Leaf green and sky blue dominant."
},
{
"name": "card-read",
"size": "1536x1024",
"background": "opaque",
"prompt": "A woman curled up in a big armchair reading a book, a cat on the armrest, a tall plant and a floor lamp, a window with afternoon light. Sun yellow and clay orange dominant, cozy."
},
{
"name": "card-rest",
"size": "1536x1024",
"background": "opaque",
"prompt": "A wind-down evening ritual: a person in pajamas pouring herbal tea at a small kitchen table, a phone turned face down, a small candle and a book, a window showing a soft dusk sky. Calm sky blue and clay orange dusk tones."
},
{
"name": "spot-water",
"size": "1024x1024",
"background": "transparent",
"prompt": "A tall glass of water with a lemon slice and two ice cubes."
},
{
"name": "spot-book",
"size": "1024x1024",
"background": "transparent",
"prompt": "A small stack of two books with a bookmark ribbon and a tiny leaf on top."
},
{
"name": "spot-sneaker",
"size": "1024x1024",
"background": "transparent",
"prompt": "A single friendly running sneaker in clay orange and white."
},
{
"name": "spot-yoga",
"size": "1024x1024",
"background": "transparent",
"prompt": "A rolled-up yoga mat in leaf green leaning against a small water bottle."
},
{
"name": "spot-moon",
"size": "1024x1024",
"background": "transparent",
"prompt": "A soft crescent moon resting on a small white pillow with two tiny stars."
}
]
}
