┌──────────────────────────────────────┐ │ (54px status clearance) │ │ ‹ Settings [Notifications] │ fixed bar 98px, blur, title fades in │ Notifications │ large title 34/700 │ ┌──────────────────────────────────┐ │ │ │ 🔕 Notifications are off for … │ │ amber banner, 14px radius │ │ Your choices below are saved… │ │ │ │ [ Open Settings ↗ ] │ │ 44px pill │ └──────────────────────────────────┘ │ │ WHAT YOU HEAR ABOUT │ mono 12 caps │ ┌──────────────────────────────────┐ │ │ │ ▣ Replies (●─) │ │ row ≥60px │ │ When someone answers… │ │ │ │ VIA [✓ Push] [✓ Email] │ │ chips 44px, indent 60px │ │──────────────────────────────────│ │ │ │ ▣ Mentions … Reminders … │ │ │ │ ▣ Product news (─○) │ │ channel row collapsed │ └──────────────────────────────────┘ │ │ QUIET HOURS │ │ ┌──────────────────────────────────┐ │ │ │ ☾ Quiet hours (●─) │ │ │ │ From [22:00] │ │ mono 17 time button │ │ 21 : 55 │ │ inline wheels, 5 × 40px │ │ [ 22 : 00 ] │ │ centre band 172 × 40 │ │ 23 : 05 │ │ │ │ To [07:00] │ │ │ │ ◷ Silent from 22:00 to 07:00 │ │ live summary │ └──────────────────────────────────┘ │ │ PREVIEW │ │ [Replies|Mentions|Reminders|News] │ segmented, 44px │ ┌──────────────────────────────────┐ │ │ │ TUE 14 OCT · 08:41 │ │ lock tile #18231D, 22px radius │ │ ┌──────────────────────────────┐ │ │ │ │ │▣ LARKPOST now │ │ │ notification card 18px radius │ │ │ Mira Okafor replied │ │ │ │ │ └──────────────────────────────┘ │ │ │ │ Held on this phone: … │ │ mono 12 explanation │ └──────────────────────────────────┘ │ │ Show the off state again │ └──────────────────────────────────────┘ ``` - `header.bar` fixed: back `button` ("Back to Settings") and an `aria-hidden` small title (the `h1` is the real heading). - `main` is the scroll container, `position: relative`, padding 98px 16px 60px. - Banner: `section` labelled by its `strong`, inside a `.collapse` wrapper. - Each category group: `div role="group"` labelled by its `h2`. A category is a row with an icon tile, a two-line label, and `button role="switch"`; below it a `div role="group" aria-label="Replies channels"` with two `button aria-pressed` chips. - Quiet hours: switch row, two `.time` rows with a `button aria-expanded aria-controls`, two `.pick` regions each holding two `role="spinbutton"` wheels, and a `.summary` with `aria-live="polite"`. - Preview: `div role="group"` of four `aria-pressed` buttons, and a `role="region" aria-live="polite"` lock tile. - A visually hidden `p aria-live="assertive"` announces the last-channel guard and the permission change. ## Tokens ```css :root { /* neutrals, warm bone */ --bg: #eeeae0; /* page */ --surface: #faf8f3; /* grouped sections */ --ink: #1c2420; /* text */ --ink-2: #535e58; /* secondary text, captions (6.4:1 on surface) */ --ink-3: #8a938d; /* unselected wheel numbers, off icons */ --line: #ddd8cc; /* hairlines, chip borders */ --off: #d9d4c8; /* switch track off */ /* accent, moss */ --moss: #2f6a4b; /* switches on, chips pressed, back link, focus */ --moss-soft: #dce7df; /* icon tiles, open time button, banner ok */ --on-moss: #f4f8f5; /* warning + preview */ --amber: #f6e3b4; /* system-off banner */ --amber-ink: #573c05; /* banner text and pill */ --amber-line: #e6cd8c; --lock: #18231d; /* lock-screen preview tile */ --lock-ink: #eef2ee; --error: #9b2c1d; /* start = end summary */ --display: "Bricolage Grotesque", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; --r-group: 14px; --r-chip: 12px; --r-time: 10px; --r-lock: 22px; --r-note: 18px; --inset: 16px; --row: 44px; --opt: 40px; /* wheel item height */ --switch-w: 51px; --switch-h: 31px; --knob: 27px; --t-micro: 160ms; --t-layout: 320ms; --t-drop: 420ms; --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.32, .72, 0, 1); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Notes | | --- | --- | --- | --- | --- | --- | --- | | Large title | Bricolage Grotesque | 34px | 700 | 1.1 | -0.025em | opsz 96 | | Bar title | Bricolage Grotesque | 17px | 600 | 1 | 0 | fades in | | Section header | IBM Plex Mono | 12px | 500 | 1 | 0.08em | uppercase, `--ink-2` | | Row label | Bricolage Grotesque | 16px | 600 | 1.35 | 0 | | | Row sub | Bricolage Grotesque | 13px | 400 | 1.35 | 0 | `--ink-2` | | Chip | Bricolage Grotesque | 14px | 600 | 1 | 0 | | | "VIA" | IBM Plex Mono | 12px | 400 | 1 | 0 | | | Time button | IBM Plex Mono | 17px | 500 | 1 | 0 | tabular by nature | | Wheel number | IBM Plex Mono | 20px | 400, selected 500 | 40px | 0 | | | Summary | Bricolage Grotesque | 15px / 13px | 600 / 400 | 1.35 | 0 | | | Notification meta | IBM Plex Mono | 11px | 500 | 1.3 | 0.06em | uppercase | | Notification title / body | Bricolage Grotesque | 15px / 14px | 600 / 400 | 1.35 | 0 | | | Preview explanation | IBM Plex Mono | 12px | 400 | 1.5 | 0 | `rgba(238,242,238,.78)` on lock | Mono is for anything that is a time, a channel tag, or machine-ish metadata. Everything a person reads as a sentence is Bricolage. ## Motion | Element | Trigger | Property | From → To | Duration | Easing | | --- | --- | --- | --- | --- | --- | | Switch track | toggle | background | `--off` ↔ `--moss` | 320ms | `--ease` | | Switch knob | toggle | translateX | 0 ↔ 20px | 320ms | `--spring` | | Switch knob | :active | width | 27 → 32px | 160ms | `--ease` | | Channel row, time rows, pickers, banner | open/close | grid-template-rows, opacity | 0fr/0 ↔ 1fr/1 | 320ms | `--spring` / `--ease` | | Chip | press | scale | 1 → .96 | 160ms | `--ease` | | Chip | last-channel guard | translateX | 0, -4, 4, 0 | 300ms | `--ease` | | Banner | permission granted | background, colour | amber → moss-soft | 320ms | `--ease` | | Banner | 2400ms after granted | collapse | 1fr → 0fr | 320ms | `--spring` | | Wheel | key press / tap | scrollTop | smooth scroll to index × 40 | browser smooth | n/a | | Notification card | preview change | translateY, opacity | -12px, 0 → 0, 1 | 420ms | `--spring` | | Bar | large title leaves | border colour, title opacity | transparent/0 → line/1 | 160ms | `--ease` | Reduced motion: every transition is 1ms, the shake and drop animations are removed, wheel keyboard moves jump instead of smooth scrolling, and the fake Settings round trip shortens to 200ms. ## States - **System off (default):** amber banner, preview explains that push is held. - **Opening Settings:** banner title "Opening Settings…", pill still visible. - **System on:** banner moss-soft without the pill, then collapsed and `inert`. - **Category off:** switch track `--off`, icon tile `#ebe7de` with `--ink-3` glyph, channel row collapsed and `inert`. - **Chip pressed:** fill and border `--moss`, text `--on-moss`, check icon visible. **Unpressed:** transparent, 1px `--line` border, `--ink-2` text, no check. - **Last channel guard:** shake plus announcement, state unchanged. - **Time button open:** background `--moss-soft`, text `--moss`. - **Quiet hours error (start = end):** summary icon and title `--error`, preview omits the quiet sentence. - **Quiet hours off:** time rows collapsed, summary explains push can sound any time. - **Preview tab selected:** surface fill with a 1px 2px shadow, `--ink` text. - **Focus-visible:** 2px `--moss` outline, 2px offset, 8px radius on every control including the wheels. - **Pressed (rows/pill):** pill scales to .97. ## Accessibility - One `h1` ("Notifications"); section headers are `h2` and label their groups. - Switches are `button role="switch" aria-checked` labelled by the visible row name. Space and Enter toggle. - Chips are `aria-pressed` buttons inside a labelled group ("Mentions channels"). - Time buttons use `aria-expanded` and `aria-controls`; closed pickers are `inert` so wheels are not tabbable while hidden. - Wheels are `role="spinbutton"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax`, `aria-valuetext` ("07"). Keys: ArrowUp/ArrowDown move 1 step, PageUp/PageDown 3 steps, Home/End jump to the ends. Tapping a visible number selects it. - The summary is `aria-live="polite"`, so the new window is read after a change. The last-channel guard and "Notifications are on" go through an assertive hidden region. - Contrast: `--ink` on `--surface` 15.0:1; `--ink-2` on `--surface` 6.4:1; `--amber-ink` on `--amber` 8.1:1; `--on-moss` on `--moss` 6.0:1; preview explanation on `--lock` 9.8:1. - Hit targets: switches get a `::before` extending to 55 × 45px; chips, time buttons, segmented buttons, the back button and the pill are at least 44px tall. - State is never colour-only: chips gain a check icon, off categories collapse their channels, the error summary changes its words. ## Responsive rules - 390 × 844 is the design frame. Top content starts below the 98px bar (54px status clearance + 44px bar). `main` keeps 60px bottom padding so the last control clears the home indicator. - 360 wide: both chips still fit on one line beside "VIA" with no spare room; the channel row has `flex-wrap: wrap` so a longer label drops to a second line instead of overflowing. The segmented control labels stay one word each. Row sub text wraps to two lines, which is allowed. - Largest text size (Dynamic Type AX): rows grow in height, never clip. Row subtitles wrap freely. The channel row wraps its chips onto a second line (use `flex-wrap: wrap`) and drops the "VIA" tag. The time rows stack: label above, time button below and full width. The wheels grow item height with the font (use `em` for `--opt` in production) and stay centred. The segmented control becomes a 2 × 2 grid. - Tablet: show this as the detail pane of a split settings view, max width 560px. Do not stretch the grouped sections to 1180px. - Never draw the status bar or home indicator. ## Acceptance checklist ### Always - [ ] A banner appears only when the system permission is off, has one action that deep-links to OS settings, and the screen re-checks permission when the app returns to the foreground. - [ ] Every category has a switch and a channel choice; a category that is on can never have zero channels. - [ ] Marketing-type category starts off. - [ ] Quiet hours has a start and an end picker and a summary sentence that updates while the wheel moves, including an overnight case and a start = end error. - [ ] The preview reflects the current settings: off, push, email-only, held by system permission, and silent during quiet hours. - [ ] Switches 51 × 31px with a 27px knob; all tap targets at least 44px. - [ ] Hidden pickers and collapsed channel rows are `inert`. - [ ] Focus is visible on every control, including the wheels. - [ ] Reduced motion leaves the screen fully usable with no shake or drop animation. ### This demo - [ ] Large title "Notifications" 34px/700 Bricolage Grotesque on `#EEEAE0`. - [ ] Banner `#F6E3B4` with `#573C05` text: "Notifications are off for Larkpost" and an "Open Settings" pill. - [ ] Categories Replies, Mentions, Reminders, Product news; Product news off by default with Email preselected. - [ ] Quiet hours default 22:00 to 07:00, summary "Silent from 22:00 to 07:00 / 9 hours, overnight. Every day." - [ ] Wheels: hours 00 to 23, minutes in 5-minute steps, 40px rows, 5 rows visible. - [ ] Preview tile `#18231D`, clock "TUE 14 OCT · 08:41", Replies card "Mira Okafor replied". ## Implementation notes **Height animation without measuring.** Animate a one-row grid between `1fr` and `0fr`; the child needs `min-height: 0` and `overflow: hidden`. Set `inert` on the wrapper when shut so nothing inside is focusable. ```css .collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 320ms var(--spring), opacity 320ms var(--ease); } .collapse > div { overflow: hidden; min-height: 0; } .collapse.shut { grid-template-rows: 0fr; opacity: 0; } ``` **Scroll-snap wheel as a spinbutton.** Native scrolling gives drag and fling for free; the index is just `round(scrollTop / 40)`. Pad the column by two items top and bottom so the first and last values can reach the centre. ```js const H = 40; wheel.addEventListener('scroll', () => { const i = Math.round(wheel.scrollTop / H); if (i !== idx && i >= 0 && i < vals.length) { idx = i; mark(); } }, { passive: true }); wheel.addEventListener('keydown', e => { const step = { ArrowUp: -1, ArrowDown: 1, PageUp: -3, PageDown: 3 }[e.key]; if (step) { e.preventDefault(); go(idx + step, true); } }); function go(i, smooth) { idx = Math.max(0, Math.min(vals.length - 1, i)); wheel.scrollTo({ top: idx * H, behavior: smooth && !reduced ? 'smooth' : 'auto' }); mark(); } ``` CSS for the column: `height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; padding: 80px 0;` and each option `height: 40px; scroll-snap-align: center`. Fade the ends with a vertical mask, not an overlay, so taps still reach the numbers. **Duration across midnight.** `(end - start + 1440) % 1440` in minutes. Zero means start equals end: show the error, do not call it "24 hours". Common mistakes: - Disabling every control when the system permission is off. Keep them editable; the banner and the preview explain that nothing will arrive yet. - Letting a user unpress both chips and leaving the switch on. That is a silent off. - A modal time picker. Inline wheels keep the summary visible while you scroll. - Positioning a hidden live region absolutely without a positioned scroll container; it extends the page and lets the body scroll under the fixed bar. - Using the accent for the warning banner. Amber is the one exception colour and it leaves once the permission is granted. --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/phone-notification-settings. Free to use in your products. Credit line: Designed using Design Lounge.*