Mobile App Landing Page

Build a complete landing page for "Daybook", a nightly journaling app for iPhone and Android. Match my project's existing stack, conventions, and design tokens. If there are none, output a single HTML file with inline CSS and zero dependencies. No JavaScript is needed; every effect is CSS.

The goal: warm, friendly, and calm, like good stationery. Paper background, ink text, one tomato accent, soft pastel cards, and a phone built in CSS that shows the actual app. No stock photos, no 3D blobs.

TOKENS
- Colors: paper #F6F1E8, card #FFFDF8, ink #1D1B17, muted #6E675C, line rgba(29, 27, 23, 0.10), tomato #E5533D, butter #F4C95D, butter tint #FBE9B7, sage #9DB89A, sage tint #DCE7D9, sky #A9C7E8, sky tint #DCE8F5, stone #CFC6B8.
- Font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif for everything. Headlines weight 800, letter-spacing -0.04em. Body weight 400 to 500.
- Container: max-width 1120px, centered, horizontal padding clamp(20px, 4vw, 40px).
- Ink pill button: ink background, card-colored text, weight 600, radius 999px. Hover background #000. Focus ring 2px tomato, offset 3px, on every link and button.
- Tomato is decoration and large display text only, never small text on paper.

1. NAV (height 76px, not sticky)
- Left: logo, a 22px tomato circle with a 8px paper circle offset to its top-right inside it (like a sun behind a cloud), then "daybook" at 19px, weight 750, letter-spacing -0.03em, 10px gap.
- Right: links Features, Stories, Pricing (15px, muted, 28px gap, ink on hover), then 24px later an ink pill "Get the app" (14px, padding 10px 18px).
- Under 760px wide, hide the three links.

2. HERO (grid 1.1fr / 0.9fr, 48px gap, items centered, padding 56px 0 104px; single column under 900px with the phone below the text)
- Eyebrow pill: "Journaling, minus the guilt" 13px weight 600, tomato text, background rgba(229, 83, 61, 0.10), radius 999px, padding 6px 12px. This is the one exception for small tomato text; it sits on its own tint.
- h1, 22px below: "Two minutes a day." then on a new line in tomato "A year you'll remember." clamp(44px, 6.2vw, 76px), weight 800, line-height 1, letter-spacing -0.045em, ink.
- Subhead, 24px below: "One gentle question each night. Answer in a sentence or a photo, and get a look back every Sunday. No streaks to break." 19px (17px under 600px), line-height 1.55, muted, max-width 40ch.
- Store buttons, 32px below, 12px gap, wrapping: two ink rounded rectangles (height 54px, radius 14px, padding 0 18px 0 14px, card-colored text), each a 22px line icon on the left and two lines of text: a 10px line at 0.7 opacity and a 16px weight 650 line. First: download-arrow icon, "Download on the" / "App Store". Second: play-triangle icon, "Get it on" / "Google Play". Use simple generic icons, not brand logos.
- Rating, 24px below: five 16px butter stars (SVG, filled) then "4.9 · 12,400 ratings" 14px muted, 10px gap.

3. PHONE (right column; a stage exactly the phone's size, centered in the column, with the notes positioned relative to it)
- Phone: 290 × 590px, radius 46px, ink background, padding 10px, box-shadow 0 50px 90px -40px rgba(29, 27, 23, 0.5), 0 0 0 1px rgba(29, 27, 23, 0.06).
- Screen: card background, radius 36px, full size, padding 54px 20px 20px, flex column, 16px gap. A 92 × 26px ink pill centered 16px from the top (the camera island).
- Screen content, top to bottom:
  - Row, space-between: "Tue, Oct 14" (13px weight 600 ink) and "Entry 41" (12px muted).
  - Question card: butter tint, radius 20px, padding 16px. Label "Tonight's question" 11px weight 600 uppercase letter-spacing 0.08em muted, then 6px below "What made you smile today?" 21px weight 800 line-height 1.15 letter-spacing -0.03em ink.
  - Answer: "Mila learned to whistle and would not stop for an hour." 15px line-height 1.5 ink, followed by a 2px × 18px tomato caret that blinks (steps, 1.1s, visible half the time).
  - Mood: label "Mood" 11px uppercase muted; then five 30px circles, 10px gap, filled tomato, butter, sage, sky, stone. The sage one is selected: a 2px ink ring with 3px of card-colored gap (box-shadow 0 0 0 3px card, 0 0 0 5px ink).
  - This week: label "This week" 11px uppercase muted; then 7 bars in a 56px-tall row, 8px gap, each 100% of its column wide, radius 6px, aligned to the bottom, heights 40%, 65%, 30%, 85%, 55%, 100%, 20%, colors alternating butter and sage starting with butter; the last (today) is tomato.
  - At the bottom (margin-top auto): an ink "Save entry" bar, 46px tall, radius 14px, centered card-colored 15px weight 600 text.
- Two floating notes, absolutely positioned relative to the stage, card background, radius 18px, padding 14px 16px, box-shadow 0 18px 40px -18px rgba(29, 27, 23, 0.35), 1px line border:
  - Look-back note, near the phone's top-left corner overlapping it (left -24px of the phone, top 90px), rotated -6deg: a stack of three overlapping 26px squares (radius 7px, butter, sage, sky, each offset 10px, 2px card border), then "Sunday look-back" 13px weight 700 ink and "7 entries · 3 photos" 12px muted.
  - Count note, near the phone's bottom-right (right -28px, bottom 110px), rotated 5deg: a 36px tomato circle with "41" in card color 14px weight 800, then "days written" 13px weight 600 ink and "this year" 12px muted.
  - Both float: translateY 0 to -8px, 6s ease-in-out infinite alternate; the second starts 3s later. Under 600px, pull them inward (left -8px and right -8px) and scale them to 0.9.

4. HOW IT WORKS (padding 96px 0)
- Centered h2 "Built for tired people." clamp(32px, 4.4vw, 52px), weight 800, letter-spacing -0.04em. Subhead 14px below: "Three small habits instead of one big promise." 18px muted.
- 48px below, three cards (one column under 860px), 20px gap, radius 28px, padding 28px, no border. Card backgrounds: butter tint, sage tint, sky tint. Each card: a 120px illustration area, then the title (22px weight 800 letter-spacing -0.03em ink, 20px below), then text (16px line-height 1.55 muted, 8px below).
  a. Illustration: a speech bubble (card background, radius 22px 22px 22px 6px, 120 × 76px, centered) holding a 40px weight 800 tomato "?". Title "One question". Text "A new prompt every evening. Small enough to answer half asleep."
  b. Illustration: three stacked chips, each a card-colored pill (padding 8px 14px, 14px weight 600 ink) rotated -4deg, 2deg, and -1deg: "Text", "Photo", "Voice note". Title "Answer your way". Text "Type a line, snap a photo, or talk for thirty seconds."
  c. Illustration: a row of seven 22px circles, the first six sky, the last ink, 8px gap, with "S M T W T F S" in 11px muted letters under them. Title "A look back on Sunday". Text "Your week, gathered into one page you'll actually want to read."

5. STORIES (padding 0 0 96px)
- h2, left aligned: "People keep coming back." same style as above. 40px below, three cards in a row (one column under 860px), 20px gap.
- Card: card background, 1px line border, radius 24px, padding 28px, flex column. Quote 18px line-height 1.5 ink. At the bottom (margin-top auto, 24px above): a 36px circle with two-letter initials (13px weight 700) and the name (15px weight 700) over a muted 13px line.
  - "I've tried every journaling app. This is the first one I still opened on day 300." Jonas Weber, "Writing since 2024". Avatar butter, initials ink.
  - "The Sunday look-back made me cry, in a good way. It's a tiny time capsule." Amara Okafor, "Writing since 2025". Avatar sage, initials ink.
  - "Two minutes is the whole trick. I never feel behind." Lucía Ferrer, "Writing since 2023". Avatar sky, initials ink.

6. CTA (padding 0 0 96px)
- Ink panel, radius 36px, padding 80px 32px, centered, overflow hidden, position relative. Two decorative circles inside: a 260px tomato circle at top -90px right -70px, and a 120px butter circle at bottom -40px left 8%.
- h2 "Start tonight." clamp(40px, 6vw, 64px), weight 800, letter-spacing -0.045em, card color. Subhead 16px below: "Free for your first 100 entries. Then $3 a month, or stay on the free plan forever." 18px, card color at 0.72 opacity, max-width 44ch, centered.
- The same two store buttons 32px below, inverted: card background, ink text.
- Text and buttons sit above the circles (position relative, z-index 1).

7. FOOTER
- 1px line top border, padding 32px 0 48px, flex, wrapping, space-between, 16px gap: logo and "© 2026 Daybook" (14px muted) on the left; links Privacy, Terms, Support (14px muted, 24px gap, ink on hover) on the right.

MOTION
- Hero entrance: eyebrow, h1, subhead, store buttons, rating fade in and rise 14px, 700ms cubic-bezier(0.2, 0.7, 0.2, 1), staggered 80ms. The phone stage fades in and rises 32px over 900ms with a 200ms delay.
- Notes float as described. The caret blinks.
- prefers-reduced-motion: no entrance, no float, no blink.

ACCESSIBILITY
- One h1. Section headings are h2; card titles are h3.
- The phone and the floating notes are one decorative group: role="img" with aria-label "Daybook app showing tonight's question, a short answer, and this week's entries"; everything inside is aria-hidden.
- Store buttons are links with accessible names "Download on the App Store" and "Get it on Google Play"; their icons are aria-hidden.
- Stars are aria-hidden; the rating text carries the meaning.

NEVER
- Stock photos, 3D illustrations, gradient blobs, or glassmorphism.
- Emoji, brand logos you don't own, or a second accent color competing with tomato.
- Small tomato text on paper (it fails contrast), centered body paragraphs wider than 44ch, or sharp-cornered cards.