Goal setup that builds your plan

Build brief for a coding agent. Rebuild this piece in the reader’s stack. If they haven’t said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don’t “improve” them.

What it is

The first-run setup of Fernway, a fictional movement coach. Three short steps ask what you want (large goal chips, up to three), how active you are now (a slider over a five-step staircase), and which days suit you (a week row with suggested days marked by a dot, plus a reminder time). Then a deep pine “Your plan” card assembles itself from those answers, one line at a time, ending with a four-week bar ramp. The language is Material 3 Expressive: tonal surfaces, a 60px pill primary, and selection shown by shape morph (20px corners become a 32px pill) as well as fill. Playfair Display carries the questions with an italic turn on the last words; Public Sans does the work. The detail worth copying is that the summary is written from the answers (“Four weeks to walk further and sleep better.”) and the first session date is real.

Reference behaviour

1. Initial state, step 1 of 3: progress segment 1 at half, Back hidden, Skip top right. “What would you like more of?” with six 2-column chips (Walk further, Sleep better, Ease back pain, Build strength, Feel calmer, Run 5 km). Walk further and Sleep better are already selected. “2 of 3 picked”. Continue at the bottom.
2. Tap a chip: it fills pine, its corners morph from 20px to 32px (320ms emphasized curve), the tick disc pops its check (scale .4 → 1, 260ms). A fourth pick is refused and announced: “You can pick three. Unpick one to swap.” With none picked, Continue is disabled.
3. Continue: step 1 slides out 28px left and fades, step 2 slides in from 28px right (420ms); the first progress segment fills, the second goes to half; Back appears; focus moves to the new question.
4. Step 2, “How active are you right now?”: five rising bars (20/38/56/76/100% of 150px) with the first N filled; a Playfair level name and one line (“Light walks / A short walk most days, not much else.”); a slider 1–5 with end labels “Mostly sitting” and “Training hard”. Sliding changes bars, name and line, and pre-selects the suggested days for step 3.
5. Step 3, “Which days suit you?”: seven 76px day pills (Mon…Sun). Suggested days carry a 6px dot (level 2: Mon, Wed, Sat; level 1: Mon, Thu; level 4: Mon, Tue, Thu, Sat; level 5: Mon, Tue, Thu, Fri, Sun). A tonal hint reads “For light walks we suggest 3 days, marked with a dot.” Below, “Remind me in the” with Morning 7:30 / Lunch 12:30 / Evening 18:30. Days toggle freely; with none, the primary disables. The primary reads Build my plan.
6. Build my plan (or Skip at any step): all three segments fill, Back and Skip hide, the plan card builds: kicker “Your plan · 4 weeks”, headline, chips for the goals and the level, “3 sessions a week / Mon, Wed and Sat, mornings at 7:30”, “20 minutes each, brisk walk and stretch / First one Sat 7 Nov, then it grows about 12% a week”, then four bars W1 · 60m, W2 · 65m, W3 · 75m, W4 · 80m. Each line rises 14px and fades in, 110ms apart after 120ms; bars grow from the bottom 70ms apart after the last line.
7. The primary becomes Start my plan (reads “Plan saved” for 1.4s on tap). Edit answers returns to step 1 with every answer kept.

Structure

390 × 844, no page scroll; steps stack inside the stage
┌──────────────────────────────────────┐
│ 54 safe area                         │
│ (<)  ▬▬▬▬ ▬▬▭▭ ▭▭▭▭          Skip    │  top 56: back 44, 3 × 6px segments
│ STEP 1 OF 3                   13px   │
│ What would you like          34px    │  Playfair 500
│ more of?                     italic  │
│ Pick up to three. …           15px   │
│ ╭────────────╮ ╭────────────╮        │  chips 2 × 1fr, gap 10, 112 tall
│ │ icon    (v)│ │ icon    (v)│        │  r20 idle → r32 selected
│ │ Walk further│ │ Sleep better│       │
│ ╰────────────╯ ╰────────────╯        │
│ ... 3 rows                           │
│ 2 of 3 picked                        │
│                                      │
│ (          Continue  →           )   │  60 tall pill, 20px sides
│ 34 home indicator                    │
└──────────────────────────────────────┘
Plan step: the card replaces the content (r32, pine, 22/20 padding)

• .top: Back <button> (hidden on step 1 and the plan), role="progressbar" with aria-valuenow, Skip <button>.
• <main class="stage"> with four <section class="step" aria-labelledby>; only .on is visible, the rest are visibility:hidden and aria-hidden.
• Step 1: .chips of <button aria-pressed>, an aria-live count.
• Step 2: aria-hidden stairs, name and description, native <input type="range" min=1 max=5> with aria-valuetext.
• Step 3: .week[role=group] of day buttons with aria-pressed and labels (“Monday, suggested”), the hint, .times[role=group] of three buttons.
• Plan: a visually hidden <h1>Your plan</h1>, .card built from the answers, Edit answers <button>.
• .foot with the one primary <button>; a hidden aria-live region.

Tokens

:root {
  --bg: #EEF0E6;          /* sage paper ground */
  --surface: #F8F9F3;     /* idle chips, day pills, level card */
  --tonal: #DCE7DE;       /* idle stairs, hint plate, disabled primary */
  --ink: #18231F;         /* text, 15:1 on surface */
  --ink-2: #4F5B55;       /* secondary text, 6.2:1 on --bg */
  --edge: #7C8A83;        /* tick ring, slider track, 3.4:1 on surface */
  --rule: #D4DAD0;        /* 1.5px inset outline on idle chips */
  --pine: #1F4D45;        /* the one accent: selected, progress, primary, plan card */
  --on-pine: #F4F1E6;     /* text on pine, 8.4:1 */
  --pine-2: #BFD3C8;      /* progress track, secondary text on pine (6.1:1) */
  --pine-3: #2D6359;      /* goal chips inside the plan card */
  --hairline-on-pine: rgba(244, 241, 230, .2);

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --fs-question: 34px; --fs-level: 28px; --fs-plan-title: 28px;
  --fs-button: 17px; --fs-chip: 16px; --fs-body: 15px; --fs-day: 14px;
  --fs-kicker: 13px; --fs-small: 12px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --r-chip: 20px; --r-chip-on: 32px; --r-day: 24px; --r-day-on: 38px;
  --r-card: 32px; --r-hint: 20px; --r-pill: 999px;

  --std: cubic-bezier(0.2, 0.7, 0.2, 1);
  --emph: cubic-bezier(0.2, 0, 0, 1);      /* M3 emphasized */
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-micro: 160ms; --t-colour: 200ms; --t-tick: 260ms; --t-fade: 280ms; --t-morph: 320ms;
  --t-stair: 360ms; --t-step: 420ms; --t-progress: 480ms; --t-rise: 520ms; --t-bar: 640ms;
  --stagger: 110ms; --bar-stagger: 70ms;
}

Typography

Role	Family	Size / line	Weight	Tracking	Case
Question	Playfair Display	34px / 1.08	500, last words italic pine	−0.01em	sentence
Level name	Playfair Display	28px / 1.1	500	0	sentence
Plan headline	Playfair Display	28px / 1.12	500, goals italic	0	sentence
Primary	Public Sans	17px	600	0	sentence
Chip label, fact title	Public Sans	16px / 1.2	600	0	sentence
Body, hint, level line	Public Sans	15px / 1.45	400	0	sentence
Day, time	Public Sans	14–15px	600	0	“Mon”
Fact detail, count	Public Sans	14px	400	0	sentence
Kicker	Public Sans	13px	600	0.08em	upper
Plan chips, bar labels	Public Sans	13px / 12px	600 / 400	0	—

Motion

What	Trigger	Property	From → to	Duration	Easing	Delay	Reduced motion
Step in	step change	opacity, translateX	0, 28px → 1, 0	280ms / 420ms	--std / --emph	opacity 80ms	200ms crossfade
Step out	step change	opacity, translateX	1, 0 → 0, −28px	280ms / 420ms	same	0	200ms crossfade
Progress	step change	scaleX per segment	→ 0, .5 or 1	480ms	--emph	0	instant
Chip select	tap	border-radius, background	20 → 32px, surface → pine	320ms / 200ms	--emph / --std	0	instant
Tick	chip select	opacity, scale	0, .4 → 1, 1	160ms / 260ms	--expo	0	instant
Stairs	slider input	background	tonal ↔ pine	240ms	--std	0	instant
Day / time select	tap	border-radius, background	24 → 38px / 20 → 36px	320ms	--emph	0	instant
Plan lines	plan opens	opacity, translateY	0, 14px → 1, 0	520ms	--expo	120 + i × 110ms	200ms fade, no delay
Ramp bars	plan opens	scaleY (origin bottom)	0 → 1	640ms	--expo	670 + j × 70ms	200ms fade
Primary press	:active	scale, border-radius	1, pill → .98, 20px	160ms	--std	0	same

States

• Chip idle: surface fill, 1.5px --rule inset outline, r20, empty tick ring in --edge.
• Chip selected: pine fill, on-pine text, r32, tick disc on-pine with a pine check, aria-pressed="true".
• Limit reached: count reads “3 of 3 picked. Unpick one to swap.”; further taps announce instead of selecting.
• Level: N of 5 stairs pine; the slider fill matches (--p = (N − 1) / 4).
• Day suggested: 6px pine dot under the name (on-pine when selected). Day selected: pine pill r38.
• Primary disabled: tonal fill, ink-2 text (5.6:1), when step 1 has no goals or step 3 no days.
• Plan: Back and Skip hidden, progress full, primary “Start my plan”.
• Focus-visible: 3px pine outline at 3px offset; headings receive programmatic focus without a ring.

Accessibility

• Each step is a <section> labelled by its question; inactive steps are visibility:hidden and aria-hidden="true", so neither focus nor reading reaches them.
• On each step change focus moves to the new question (tabindex=-1), not on first load.
• Chips, days and times are buttons with aria-pressed; days have full names (“Saturday, suggested”).
• The level slider has aria-valuetext “Light walks. A short walk most days, not much else.”
• The progress bar is role="progressbar" with aria-valuenow 1–3.
• A polite live region reads the plan summary: “Your plan: 3 sessions a week of 20 minutes, starting Sat 7 Nov.” The ramp has an aria-label with the four totals.
• Contrast: ink-2 on ground 6.2:1, on-pine on pine 8.4:1, pine-2 on pine 6.1:1, ink-2 on tonal 5.6:1; non-text: tick ring and slider track 3.4:1 on surface.
• Hit targets: chips 112px tall, days 76px tall by 45px, times 72px, Back / Skip 44px, primary 60px.

Responsive rules

• At 360 wide: chips stay two columns (152px each); questions drop to 30px; day pills shrink with minmax(0,1fr) to 40px wide and keep the three-letter name at 13px.
• Short phones (< 760 tall): the app keeps min-height:760px and each step scrolls inside the stage; the primary stays pinned.
• Tablet: the column caps at 430px and centres; do not spread the chips into three columns, the thumb reach is the point.
• Hidden steps translate 28px; the stage clips (overflow:hidden) so scrollWidth stays 390.

Acceptance checklist

Always

• Exactly three question steps, each one decision, with a segmented progress bar and Skip on every step.
• Goals are large two-column chips; selection changes shape as well as colour.
• The level is a native range input with a visual that changes with it.
• Suggested days follow the level and are marked, not forced; the user can toggle any day.
• Skip lands on a complete plan built from defaults, never an empty card.
• The plan card’s sentences are composed from the answers and the first session is a real upcoming date.
• Plan lines build one at a time, then the bars; reduced motion fades them in together.
• Inactive steps are visibility:hidden; focus moves to each new question.
• One primary per screen, in the bottom third.

This demo

• Fernway; six goals; Walk further and Sleep better preselected; three max.
• Levels: Mostly sitting 15 min, Light walks 20, Active a few days 25, Active most days 30, Training hard 35.
• Today is Fri 6 Nov 2026: with Saturday chosen the first session is Sat 7 Nov, otherwise the first chosen weekday of the week of 9 Nov.
• Weekly ramp = sessions × minutes × (1 + 0.12 × week), rounded to 5: 60, 65, 75, 80 for the defaults.
• Reminder times Morning 7:30, Lunch 12:30, Evening 18:30.

Implementation notes

1. Stacked steps that can’t leak. Keep every step in the DOM, but let only one be visible; delay visibility on the way out so the slide can finish, and drop the delay on the way in.

.stage { position: relative; flex: 1; overflow: hidden; }
.step { position: absolute; inset: 0; visibility: hidden; opacity: 0; transform: translateX(28px);
  transition: opacity 280ms var(--std), transform 420ms var(--emph), visibility 0s 420ms; }
.step.on { visibility: visible; opacity: 1; transform: none;
  transition: opacity 280ms var(--std) 80ms, transform 420ms var(--emph); }
.step.out { transform: translateX(-28px); }

2. Stagger from a custom property. Write each card line with its index and let CSS do the delay; the bars add their own index on top so they start after the last line.

.card > * { animation: rise 520ms var(--expo) backwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
.ramp i { transform-origin: bottom; animation: bar 640ms var(--expo) backwards;
  animation-delay: calc(var(--i) * 110ms + var(--j) * 70ms + 160ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } }
@keyframes bar { from { transform: scaleY(0) } }

3. Sentences from answers. Keep a short phrase per goal and join with an Oxford-free “and”; the first session looks for the weekend before next week.

const list = (a) => a.length < 2 ? a.join('') : a.slice(0, -1).join(', ') + ' and ' + a[a.length - 1];
const title = `Four weeks to <em>${list(goals.map((g) => g.phrase))}</em>.`;
const first = days.find((d) => d > 4) ?? days[0];           // today is Friday (index 4)
const date = first >= 5 ? `${DAYS[first]} ${first === 5 ? 7 : 8} Nov` : `${DAYS[first]} ${9 + first} Nov`;

Common mistakes: an instruction screen before the first question, a plan card with generic copy that ignores the answers, chips that only change colour (fails for colour-blind users and looks flat), and hidden steps that are merely translated off-canvas so their text still reads and overflows.