--- description: States, edge cases and design-system alignment for the Quietmoor marketing page, ready for engineering handoff. --- Review example 03 · pre-build review # Quietmoor marketing page — _states, edges, and the system._ Everything engineering needs to build the landing page without guessing: the tokens it draws from, every state each component can be in, the edge cases that broke v3, and the breakpoints they have to hold at. v4 · ready for handoff Design system: Quietmoor 1.2 2 open questions 01 · Design system ## The page draws from _eleven tokens._ No hex values in component code. Everything below is already defined in the Quietmoor 1.2 token set — if a build needs a colour that is not here, that is a design bug, not an implementation choice. **Background**`--qm-bg` **Paper**`--qm-paper` **Ink**`--qm-ink` **Muted**`--qm-muted` **Line**`--qm-line` **Accent**`--qm-accent` **Accent soft**`--qm-accent-soft` **Signal · yellow**`--qm-y` **Signal · pink**`--qm-p` **Signal · green**`--qm-g` **Hero glow**`radial, blur 12px` Display`serif 400 · clamp(42,8.2vw,88) · lh .98` Keep what moves you. _Forget the filing._ Section head`serif 400 · clamp(26,3.8vw,40) · lh 1.06` Two steps. That is the whole product. Lede`sans 400 · clamp(16,1.7vw,20)` Notes, images and links land in one private place and sort themselves. Body`sans 400 · 16 · lh 1.62` A quote goes to Studio. A link goes to Reference. You can move it, and Quietmoor learns. Eyebrow`sans 800 · 11.5 · ls .16em · upper` How it works Small`sans 400 · 13.5` No card required · Your saves stay yours 02 · Component states ## Every state, _drawn rather than described._ The two interactive components on the page. Hover and focus are shown side by side on purpose: focus is not a hover lookalike, it is a 2px ink ring at 3px offset so it survives on the accent fill. DefaultSign upAccent fill, paper text, pill radius. HoverSign upLifts 1px, darkens one step, warm shadow. Pointer devices only. FocusSign up2px ink ring, 3px offset. Must be visible without hover. LoadingSigning upLabel changes, width holds, spinner honours reduced motion. DisabledSign up42% opacity, no pointer. Never the only signal — pair with a message. DefaultLine border, paper fill. FocusAccent ring, 1px offset. ErrorThat address is missing its ending.Message sits below, never as a tooltip. DisabledBackground drops to bg, text to muted. 03 · Edge cases ## What broke in v3, _and what v4 does instead._ These are the cases the build has to survive. The first one is the comment Priya left on the v3 review — it is fixed here and the fix is the reason this version exists. **v3 — clips360px** MossvaneSumkinFerrowyn MarrowbyWyndlowHalden Bikes **v4 — wraps360px** MossvaneSumkinFerrowyn MarrowbyWyndlowHalden Bikes * ✓**Wrap, do not scroll** A horizontally scrolling logo row hides names with no affordance. `flex-wrap: wrap` with a centred last line; gap collapses from 44px to 18px as the viewport narrows. * ✓**Names never break mid-word** `white-space: nowrap` on each logo. "Halden Bikes" moves to the next line whole. **Long single word** Kunstgewerbemuseumsdirektorenassistent Wraps anywhere. Never widens the card — the grid column stays fixed. **Pasted URL** https://mossvane.co/journal/2026/the-quiet-shelf-and-why-filing-is-a-tax Same rule. Overflow-wrap anywhere beats a scrollbar. **Save title · one line only** A field guide to slow tools, and the people who still make them by hand The one place we truncate: card titles get a single line with an ellipsis, full text on the detail view. **Missing author** “Less noise, more of what I actually wanted to remember.” Attribution block is omitted entirely — never renders "Unknown" or an empty avatar. Nothing here yet. Keep something and it will appear here, sorted for you. Skeleton matches the final line count, so nothing jumps when content lands. That did not save. Your text is still in the box. Try again, or copy it out. 04 · Responsive ## Four widths the build _has to hold at._ Everything is fluid between these — the numbers are where the layout changes shape, not a set of fixed canvases. This page and the landing concept both survive 320px without a horizontal scrollbar; that is the acceptance bar. **320**`small phone` Single column. Hero drops to 42px. Floating save cards stack into a vertical list rather than overlapping. **620**`large phone` Floating cards return to their overlapped arrangement. Logo row takes two lines. **760**`tablet` Nav links appear alongside the wordmark. Feature tiles go two-up. **1120**`desktop cap` Content stops widening; the gutter grows instead. Hero reaches its 88px ceiling. 05 · Handoff ## Decided, and _still open._ **Decided · the hero glow is CSS, not an image** A radial gradient with a 12px blur, no asset. It has to scale to any width without banding, and an export would not. Design · settled in v3 **Decided · capture is two steps** Keep it, then confirm where it landed. The four-step version tested as paperwork. The landing page's "How" section has to keep matching the prototype. Priya Nair · resolved **Decided · scroll behaviour is opt-out** Smooth scrolling on the nav anchors, disabled under `prefers-reduced-motion`. Same rule for the skeleton shimmer and the button spinner. Design · settled in v4 **Open · do the trusted-by names become real logos before launch?** They are set as text today, which is why the wrap fix works so cleanly. Real SVG logos would need a height rule and a fresh look at the wrap. Needs an answer before the build starts, not after. Waiting on marketing **Open · does the sticky nav keep the CTA on phones?** It does here. If analytics say the hero CTA carries the signups, the sticky one is cost with no return and can drop below 760px. Waiting on data