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.

Colouroklch, as authored
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 glowradial, blur 12px
TypeInstrument Serif · Nunito Sans
Displayserif 400 · clamp(42,8.2vw,88) · lh .98 Keep what moves you. Forget the filing.
Section headserif 400 · clamp(26,3.8vw,40) · lh 1.06 Two steps. That is the whole product.
Ledesans 400 · clamp(16,1.7vw,20) Notes, images and links land in one private place and sort themselves.
Bodysans 400 · 16 · lh 1.62 A quote goes to Studio. A link goes to Reference. You can move it, and Quietmoor learns.
Eyebrowsans 800 · 11.5 · ls .16em · upper How it works
Smallsans 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.

Primary button.cta
DefaultAccent 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.
Email fieldsignup form
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.

Trusted-by row at phone widthPriya Nair · resolved in v4
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.

Content that does not behavelong strings, missing data
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.
Empty, loading, failedevery async surface
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.

320small phone

Single column. Hero drops to 42px. Floating save cards stack into a vertical list rather than overlapping.

620large phone

Floating cards return to their overlapped arrangement. Logo row takes two lines.

760tablet

Nav links appear alongside the wordmark. Feature tiles go two-up.

1120desktop 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