Tokens · palette
The five-role grayscale ramp, the Intent indigo accent for primary actions and selection states, and one semantic exception for invalid states. Wireframe content uses these variables only. The annotation layer shares the indigo but speaks in its own shapes — numbered markers and the notes rail, never controls.
Tokens · spacing scale
Tokens · type scale
Grid-locked size/line-height pairs in the neutral content font, floored for legibility (nothing under 11px). Hierarchy comes from size and weight — never typeface.
Tokens · heights, icons, radii
Glyphs · icons
Two roles, one rule. Functional glyphs (chevrons, search, check, ×) are drawn SVG rendered in currentColor — never text characters. The featureless circle is the placeholder for app-specific icons that aren't decided yet. An icon-only button always carries an aria-label.
Buttons · 3 styles × 3 sizes
Native buttons. Hover, press, focus, and disabled states are real — try them.
Form controls
All native and functional: type in them, tab through them, toggle them. Focus = 2px accent ring.
Error states
The ramp's single semantic exception: --w-error, for invalid states only. Never decorative, never for emphasis — if it isn't telling the user something is wrong, it stays gray.
Loading · skeletons
Skeletons for content, a spinner only inside controls. The label carries the state ("Posting…") — motion just reinforces it, and reduced-motion users get a static treatment.
Chips · tabs · app bar
Avatars · media · badges · divider
divider
Cards · list rows
Desk lamp
$10
Kids bike, 16-inch
$35
Table
| Listing | Price | Views | Status |
|---|---|---|---|
| Desk lamp | $10 | 34 | Active |
| Kids bike, 16-inch | $35 | 112 | Active |
| Moving boxes (12) | Free | 56 | Claimed |
Modal · sheet · toast
Elevation doctrine: a scrim plus a hairline border. No soft glow shadows.
Delete this listing?
"Desk lamp" will be removed for the 842 neighbors who can see it. This can't be undone.
Share listing
Callout — persistent inline alert
The in-page counterpart to the toast. Severity reads from the leading glyph and the copy, not from hue — the ramp carries no success or warning color. Neutral by default; accent for emphasis; error is the ramp's one semantic exception. Never a left accent stripe.
Giveaways are free to post
Marking a listing free skips the price step and notifies neighbors within 0.5 mi.
Your draft saves automatically.
Post to the block, not the city
Listings reach the 842 neighbors closest to you first — they're the ones who can pick up today.
This listing couldn't post
Add at least one photo, then try again. Your text is saved.
Thumbnails (lo-fi) — idea vignettes
A thumbnail is one idea: a focused UI fragment built from this same kit at natural size, staged on a muted panel, with a caption narrating the concept — index, title, one breath of description. A board of them is divergence at the mechanism level: many different answers to one problem. The vignette contains only real UI; the caption is annotation. The optional .dots stage grid is a board-level choice — all vignettes or none, and only when the dots mean something (a map, a canvas). Here, three ideas for "how do giveaways work on Nearby?"
A third of neighborhood posts are giveaways.
Free as a first-class choice
Price and "Free" are one decision, not two fields. Tapping Free clears the price — no validation error to recover from.
Free · 0.2 mi · first come, first served
Giveaway alerts to the block
Free items notify nearby neighbors instantly. Giveaways move in hours, not days — and the curb stays empty.
Porch pickup
Porch pickup windows
No coordination chat for a $0 item. The seller sets it out; the listing says when it's there.