` if your framework flattens link names). - Thumbnails and the landscape are `aria-hidden` decorative CSS. - Badge count is inside the "Saved" button so its name reads "Saved 3". - Contrast: `--ink-2` on `--paper` 7.0:1; `--ink-3` on `--paper` 3.6:1 — used only for 11–12px meta at weight 500, so bump to `#7d756a` (4.6:1) if AA on meta is required; `--red` on `--paper` 5.9:1; `--saved` on `--paper` 5.7:1. - Hit targets: chips 36px tall with 8px gaps (allow 44px row), bookmarks 40px, nav items ≥ 88×52. ## Responsive rules - 390 wide: as specified. - 360 wide: gutter 16px; lead headline 24px; thumbs 64px. - ≥ 600 wide: two-column story grid under a full-width lead; chips stay a single scrolling row. - ≥ 840 wide (tablet): lead card and list side by side (lead 5/12, list 7/12); bottom nav becomes a left rail. ## Acceptance checklist - [ ] Background is `#FAF6EE`; headlines are Newsreader 600 at 30 / 26 / 17px; UI text is Inter. - [ ] Chip row scrolls horizontally with no visible scrollbar and proximity snapping; pressed chip is `#1C1A17` with paper text. - [ ] Selecting a chip dips the list 6px / opacity 0 over 280ms, filters, then restores; the section label reports "Section · N stories". - [ ] Lead card is `#F1EBDF`, 18px radius, with a 190px CSS-drawn landscape (gradient sky, 64px sun, two hills) — no image files. - [ ] Each story row has a 72px thumb, a serif headline, a meta line with section and reading time, and a 40px bookmark button. - [ ] Saved stories show "· saved" in `#2F6B4F` with a download-check icon; the bookmark is filled. - [ ] Toggling a bookmark updates the meta line and the Saved tab badge count. - [ ] Stories are separated by 1px `#E3DCCD` hairlines, not cards. - [ ] Bottom nav is 64px plus 34px clearance; current item is ink-coloured with `aria-current="page"`. - [ ] Focus rings visible on chips, lead link, bookmarks and nav. - [ ] Reduced motion removes the list dip but keeps filtering. - [ ] No fixed control inside the top 54px. ## Implementation notes **Landscape in three pseudo-elements.** Sun and hills are border-radius shapes; the second hill's shadow gives a third band: ```css .art { height:190px; position:relative; overflow:hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%); } .art::before { content:""; position:absolute; left:58%; top:34px; width:64px; height:64px; border-radius:50%; background:var(--sun); } .art::after { content:""; position:absolute; left:-10%; right:-10%; bottom:-40px; height:120px; border-radius:50% 50% 0 0 / 100% 100% 0 0; background:var(--hill); box-shadow: 0 26px 0 12px var(--hill-2); } .art i { position:absolute; left:20%; bottom:30px; width:150%; height:80px; border-radius:60% 60% 0 0 / 100% 100% 0 0; background:var(--hill-2); opacity:.85; } ``` **Filter after the dip, not during.** One timer, cleared on rapid taps: ```js list.classList.add('swap'); clearTimeout(t); t = setTimeout(() => { const c = chip.dataset.cat; let n = 0; stories.forEach(s => { const show = c === 'all' || s.dataset.cat === c; s.hidden = !show; if (show) n++; }); label.textContent = c === 'all' ? 'Latest' : `${chip.textContent} · ${n} ${n === 1 ? 'story' : 'stories'}`; list.classList.remove('swap'); }, 280); ``` **Saved mark lives in the meta line.** Append/remove the fragment next to the reading time rather than toggling a hidden span, so the DOM matches what's announced: ```js if (on && !sv) meta.insertAdjacentHTML('beforeend', '·…saved'); else if (!on && sv) { sv.previousElementSibling.remove(); sv.remove(); } ``` Common mistakes: using `` placeholders for thumbs (the brief wants CSS colour blocks driven by custom properties); making chips tabs with `role="tablist"` (the content is filtered, not swapped); letting the chip row wrap at 360px. --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/pwa-news-reader. Free to use in your products. Credit line: Designed using Design Lounge.*