# M3 Expressive home feed > **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 home screen of "Mira", a daily planner, in the **Material 3 Expressive** language: warm tonal surfaces instead of hairlines, 28px card radii, a segmented "button group" whose selected segment grows into a full pill, a bottom **floating toolbar** (a detached pill with five icon actions) and an **extended FAB** stacked above it. The feeling is warm and physical: things squash when pressed, shapes morph rather than fade. The detail worth copying is the segmented group: the pressed segment takes 1.7× the flex share and rounds from 16px to a full pill over 500ms with emphasized easing, while a small morphing "loading shape" opens a 44px slot above the cards and the cards dip and return. ## Reference behaviour 1. Initial state: greeting "Morning, Noor." (36px) with the date above it, a 48px avatar button at right. Below: segmented group with **Today** selected, then three tonal cards (primary-container hero, surface-high stats, tertiary-container habits). A floating toolbar pill sits centred 46px from the bottom; an extended FAB "New task" sits at right, 118px from the bottom. 2. Tap **Week** or **Month**: the previously selected segment shrinks back to flex 1 and 16px radius; the tapped one grows to flex 1.7 and 999px radius, fills `--primary`. Both over 500ms `cubic-bezier(.2,0,0,1)`. 3. At the same instant a loader slot expands from 0 to 44px height (500ms, same easing) showing a 22px primary-coloured blob that morphs between three border-radius shapes while rotating 180° (1.2s loop). The card stack fades to opacity 0 and moves down 14px / scales to .98. 4. After 700ms the hero and stats headlines swap to that range's copy ("4 meetings, 2 free afternoons" / "Avg. sleep 6h 48m" for Week; "September: 11 focus days" / "Avg. sleep 7h 02m" for Month), the loader slot collapses and the cards return. 5. Tap any habit row: the 26px checkbox fills `--tertiary`, morphs from 9px radius to a circle, a check scales in from .5; the label strikes through at 60% opacity. Tap again to undo. 6. Tap a toolbar action: it becomes the pressed one — background `--primary`, icon white, radius eases from 999px to 16px (500ms). Only one pressed at a time. Inbox carries a "3" badge. 7. Press-and-hold the FAB or the "Join call" pill: it scales to .95/.96 and its radius rounds further (18→28px, 999→14px respectively) over 160ms, then releases. 8. The content scrolls beneath the toolbar and FAB; 150px of bottom padding keeps the last card reachable. ## Structure ``` 390 × 844 ┌────────────────────────────────────┐ │ (54px status clearance) │ │ Tuesday, 29 September (NH)48 │ header │ Morning, Noor. avatar │ h1 36px │ ┌──────────────┬────────┬────────┐ │ │ │ Today ● │ Week │ Month │ │ segmented, 56px tall, 4px inset │ └──────────────┴────────┴────────┘ │ │ [loader slot 0→44px] │ │ ╭────────────────────────────────╮ │ │ │ NEXT UP · 10:30 │ │ hero card, primary-container │ │ Design sync with Priya │ │ 28px radius │ │ (Join call) pill 48px │ │ │ ╰────────────────────────────────╯ │ │ ╭────────────────────────────────╮ │ │ │ BODY · You slept 7h 12m │ │ surface-high card │ │ [6,420][5 / 8][61] tiles 20px │ │ │ ╰────────────────────────────────╯ │ │ ╭────────────────────────────────╮ │ │ │ HABITS · 1 OF 3 (3 checkboxes)│ │ tertiary-container card │ ╰────────────────────────────────╯ │ │ ┌──────────────┐ │ │ │ + New task │ │ extended FAB, bottom 118 │ ╭──────────────────────────────╮ │ │ │ ⌂ ▦ ✉3 ▥ ○ │ │ floating toolbar, 64px, bottom 46 │ ╰──────────────────────────────╯ │ │ (34px home-indicator clearance) │ └────────────────────────────────────┘ ``` - `
` — full height, `overflow-y:auto`, padding `54px 16px 150px`. Contains everything that scrolls. - `
` flex row, `align-items:flex-end`, 10px top padding; the segmented group has 16px above and 12px below. With these values the habits card headline sits just above the FAB on the first frame. `
`: `

` with a `` date line, plus `