# pebbles.show

Source: https://www.pebbles.show/
Captured: 2026-09-13
Tags: marketing, landing, light, both, minimal, playful, playful, calm, friendly, human, warm
Colors: #ffffff, #ccced1, #0c0c0e, #a9adb2, #4c4d4e, #8c8d8f, #2d2e31, #6f7072
Type (h1): host · 34px/45.9px · 400 — "A cosy little game of sharing links with your closest friends. Once a day, their"
Type (button): host · 13px/19.5px · 500 — "Contact"
Button (primary): "Contact" — fill #ffffff, text #5c6470, radius 999px, border 1px, padding 8px 14px, height 38px, type 13px/500
Radii: 999px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/pebbles-show/hero.webp?v=df3195fb
- Hero (mobile): https://media.lvly.design/library/pebbles-show/mobile-hero.webp?v=d3ac4fbb
- Full page (desktop): https://media.lvly.design/library/pebbles-show/full.jpg?v=f31c57c9
- Full page (mobile): https://media.lvly.design/library/pebbles-show/mobile-full.jpg?v=ff110f56
- Clip preview (mp4): https://media.lvly.design/library/pebbles-show/video-a6aaiw.preview.mp4?v=d20e7843

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.

## Steal-worthy details

- 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.
- 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.
- 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.
- 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.
- 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.
- A single warm-orange "Public Beta" badge, slightly detached from the hairline pills, tells you the status of the product without a banner.
- Copy voice is the brand: "cosy little game", "wrapped in collectible pebbles" — lower-case, gentle, specific numbers.

## Style recipe

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.