pebbles.show

Pebbles · A cosy little game of sharing linkssaved 26d ago · captured 26d ago

Seven details, five pinned.

View as Markdown ↗

Colors8 colors · ground #FFFFFF

ground#ffffff·93.56%#ccced1·2.49%accent#0c0c0e·1.69%#a9adb2·1.09%#4c4d4e·0.56%#8c8d8f·0.24%#2d2e31·0.21%#6f7072·0.16%

Sized by coverage · click to copy.

Typography1 family · 1 styles · host

A cosy little game of sharing links with your closest friends. Once a day, their

host · 34/46 · 400 · normal

Specimens are the page's own words at their measured metrics; shown in Inter when the family is not loaded.

ButtonsContact1 style

Contact

primary · fill #ffffff · label #5c6470 · radius 999px · border 1px · padding 8px 14px · height 38px · type 13px / 500

Shape1 radii · 3 uses

999px3 uses · 100%

AnalysisA one-viewport app teaser (by @lukesbeard) that is almost nothing but type on white until it isn't: a heavy, slightly toy-like geometric wordmark, a three-line slate-gray pitch in a rounded grotesk…

A one-viewport app teaser (by @lukesbeard) that is almost nothing but type on white until it isn't: a heavy, slightly toy-like geometric wordmark, a three-line slate-gray pitch in a rounded grotesk ("host", 34px, regular), a small bold count ("291 pebbles to collect") and a full-black pill CTA pinned near the bottom. The whole middle of the page is left empty on purpose, because within a second of load a physics simulation drops photoreal 3D pebbles — malachite, amethyst, jasper, granite — from the top of the viewport and they tumble and settle into a heap behind the CTA. The stills capture the restraint; the clip captures the toy. Chrome is two hairline pills (Contact, By @lukesbeard) in the corners and a saturated orange "Public Beta" pill that fades in at top center, the only color on the page that isn't a rock. It reads like Apple-grade minimalism with a childhood pocket of stones tipped onto it.

Style recipeBuild on pure white (#ffffff) with near-black ink (#0c0c0e) and a slate-gray for secondary text (#5c6470).

Build on pure white (#ffffff) with near-black ink (#0c0c0e) and a slate-gray for secondary text (#5c6470). Use one rounded geometric grotesk (Host Grotesk or similar: Recoleta-free, low-contrast, round terminals) at three sizes only: 34px/400 for the lead sentence (1.35 line-height, max ~30ch, centered), 16px/400 body, 13px/500 for controls and micro-labels. Reserve one heavy, chunky custom-ish display weight for the logotype alone. Every control is a pill: border-radius 999px, 1px border in #ccced1, 8px 14px padding, white fill; the one primary action is the same pill inverted (black fill, white text) at roughly 420px wide and 54px tall, centered low in the viewport. Leave the lower half of the first viewport empty and populate it at load with a physics scene (Matter.js / Rapier + three.js or pre-rendered sprites) of photoreal textured objects that fall, collide and settle around the CTA; keep gravity and restitution gentle so it feels cosy, not arcade. Allow exactly one saturated accent (a warm orange, ~#ff5a1f) for a single status badge, floated top-center, and let all other color come from the objects themselves. No shadows on UI, no gradients, no section dividers; copy in lower-case, first-person-friendly sentences with concrete numbers.

Details7 worth noting

pebbles.show — the captured page — Landing, 1440 × 900 · captured Sep 13, 2026

1Stage reserved for the physics pile
The page is a stage, not a layout: the hero copy sits in the top third and the bottom half is reserved for the physics pile, so the product (collectible pebbles) is demonstrated rather than screenshotted.
2Photoreal mineral texture as ornament
Photoreal texture as the only ornament — no gradients, no illustration; each pebble is a scanned-looking mineral with its own color, so the palette is literally the collection.
3CTA inside the landing zone
The CTA is placed *inside* the pile's landing zone; pebbles come to rest around and behind the black pill, which makes the button feel physically present.
4Pills everywhere, hierarchy by fill
Everything interactive is a 999px pill with a 1px border and 13px/500 text, on white — the CTA is the same shape, just inverted to #0c0c0e, so hierarchy comes from fill alone.
5Three weights, no size ramp
One heavy wordmark, one regular-weight body face, one bold micro-label — three weights carry the whole type system; no size ramp beyond 34/16/13.
6Detached orange status badge
A single warm-orange "Public Beta" badge, slightly detached from the hairline pills, tells you the status of the product without a banner.
7Gentle lowercase copy with real numbers
Copy voice is the brand: "cosy little game", "wrapped in collectible pebbles" — lower-case, gentle, specific numbers.

marketing · landing · light · minimal, playful · playful, calm, friendly, human, warm

pebbles.show

More like this