Pebble

Best for

• Business types: consumer apps and friendly fintech (budgeting, savings, insurance), health and wellness, dentists, GPs and clinics for families, vets and pet care, kids' and family brands, education and learning apps, charities and community groups.
• Audiences: everyday people who may feel anxious, rushed or out of their depth (about money, health, a pet, a new skill) and need to feel looked after; parents; first-time customers.
• Less suited to: luxury and premium brands that should feel distant, heavy industry and B2B tools where density matters, legal or financial firms that need gravitas, anything that must look sombre.

Personality and voice

Warm, reassuring and plain. Pebble talks like a kind friend who happens to be good with the subject. It names the worry, takes it away, and says exactly what happens next.

• Headlines are short, concrete and calm, ending in a full stop: "Money, sorted into little pots.", "Gentle vets, happy pets.", "Learn a language one chat at a time.", "Gentle with you. Strict with the numbers.", "Three steps, then it mostly runs itself."
• Leads say what the thing does in one breath, then remove a worry: "One look tells you what's safe to spend today, and nothing ever nags."
• Buttons say what happens: Start free, Book a visit, Try your first chat, See how it works, Give it a shake. Never Submit or Learn more.
• Microcopy is kind and specific: "Cancel in two taps", "Two minutes, no homework.", "Nothing from Mallow between 9pm and 8am", "Treats are on us."
• Stickers (the small clay pills above headings) name the section in sentence case: What Mallow does, Your visit, Pricing. No all-caps labels.
• Avoid: jargon (leverage, seamless, solution), alarm (Don't miss out!, red warnings), guilt (streaks, you're falling behind), baby talk, exclamation marks in headlines, and fake numbers.

Colour

Four pastels and one bold colour. Pastels are pigments (pebbles, coins, knobs, dots) and, in paler tint versions, card surfaces. All text uses the deep colours; pastels never carry text on white.

Contrast (WCAG, measured): ink on bg 14.6:1, on surface 16.2:1; ink-2 on bg 8.8:1; muted on bg 5.8:1, surface 6.5:1, sunk 5.2:1, tray 5.0:1 and every tint 5.2 to 5.9:1; on-pastel on the pigments 9.3:1 (lilac) to 12.2:1 (butter); on-bold on bold 13.6:1; ok on tint-mint 4.6:1, on surface 5.4:1; focus on bg 6.1:1. Dusk: ink 16.4:1, ink-2 12.2:1, muted 7.2:1 on bg and 5.3 to 5.9:1 on the deep tints; plum on butter (buttons) 12.0:1; ok on surface 10.7:1. The pastels themselves on white are 1.3 to 1.6:1, which is why they never carry text.

Typography

• Fredoka (Google Fonts), variable width and weight, used wide (font-stretch: 108–116%) at 500–700 for headlines, buttons, numbers and pebble values. Its round terminals and inflated bowls look like the clay shapes around them.
• Figtree (Google Fonts) 400–800 for body, UI labels and small print. A crisp, open geometric sans: it keeps long reading and figures calm and clear next to the puffy display, so the page never turns into a nursery.

Why this pairing: the display does the squishing, the body does the explaining. Two rounded faces (Fredoka with Nunito, say) blur together and lose hierarchy; one soft and one crisp keeps Pebble friendly but competent, which is what fintech and clinics need.

The signature move: a little clay pebble (<span class="nugget">) sits inside the hero headline like a word: x-height tall, lit and shaded like the pebbles in the dish. On load the headline's words spring up one by one (squash, overshoot, settle) and the nugget drops in last with a bounce, then wobbles every few seconds. JavaScript glues it to the word before it so it never starts a line. One nugget per page, in the hero only. Never colour or italicise a word for emphasis instead.

Layout

• Wrap 1200px with 24px gutters (16px under 640px).
• Hero: two columns, text left (sticker, H1, lead, two buttons, three ticked notes) and the pebble dish right, vertically centred. Stacks below 1080px, dish under the text.
• The dish: a white clay rim (14px) around a sunk basin clamp(400px, 42vw, 590px) tall (380px on phones), with one clay chip floating in its top-left corner (Safe to spend today), and a strip underneath with a one-line hint and the shake button.
• Bento of clay cards: a 12-column grid: a tall phone card (7 columns, two rows) beside two cards (5 + 5), then two cards (6 + 6). Collapses to 12 at 760px.
• One raised section slab mid-page ("How it works") in a tint, inset from the viewport edges with a 64px radius; everything else sits on the ground.
• Steps are three columns joined by a sunk groove with numbered clay pebbles on it (only for real sequences).
• Closing slab in the bold colour, 64px radius, with pebbles peeking in from its corners.
• Section rhythm 108px (88px on phones); heads are a sticker, an H2 and a lead (max 52ch), left-aligned except "how it works" and pricing, which centre.
• Spacing scale: 4, 8, 12, 16, 24, 32, 48, 72, 120, 160.

Shape

• Radii, generous everywhere and stepping down when nested: 999px pills (buttons, stickers, switches, chips); 10px small; 16px; 22–26px rows and toggle cards; 30px panels inside cards; 44px cards, plans and the basin; 58px the dish rim; 64px section slabs and the closing slab; 50% for every pebble, coin and avatar.
• Clay depth (--shadow-clay): a 2px white inner highlight on top, a soft inner shade at the bottom, a tight contact shadow and a long, coloured outer shadow (--glow).
• Lifted (--shadow-lift): the same with a longer, softer outer shadow; for hover and the dish.
• Pressed (--shadow-press, --shadow-btn-press): the shadows invert, so the thing reads as pushed into the surface.
• Sunk (--shadow-sunk): wells, switch beds, meters, the basin.
• Specular: a soft white radial highlight in the top-left of cards, buttons and pebbles (--hi).
• No hairline borders as structure (the nav gets one when scrolled). No glass, no gradients as decoration, no sharp corners.

Motion language

Motion is springy and physical: things have weight, overshoot a little and settle. It answers the visitor's hand.

Degrading. The default follows prefers-reduced-motion; the footer Motion switch overrides it either way and is remembered (localStorage "site-motion", html.calm). With motion off, the pebble sim runs instantly behind the scenes and draws one still frame: the same tidy pile every time (seeded drop). Pointer play is off; Give it a shake still works and simply shows the new resting pile. Words and the nugget sit still, reveals don't play, ambient bobbing stops, hover lifts are off, and presses and switches still respond but without the overshoot. Nothing is hidden waiting for motion: without JavaScript the pots are a row of clay pills.

Imagery and illustration

• Everything is clay, built in CSS or canvas: pebbles, pills, coins, cards, switches, padlocks, a phone with a real-looking app screen. No stock photos, no image files, no emoji.
• Light comes from the top left. Every object has a highlight there, an inner shade underneath and a soft coloured shadow below (a glow in dusk).
• Objects carry the customer's nouns: pots and amounts (Mallow), pets and their names (Burrow), hellos in each language (Hullo). The phone shows the real product moment.
• Avatars are pastel pebbles with an initial. Photos, if a customer insists, sit inside a 30px-radius clay frame.
• Logo: two overlapping clay pebbles (a big one and a small one in two pastels) beside a lowercase Fredoka wordmark at 116% width.

Signature components

• Pebble dish (.pit-wrap > .pit[data-pit]): canvas plus the <ul class="pit-list"> it reads; a floating chip; a hint and the shake button.
• Nugget headline: H1 with data-words and one .nugget.
• Clay button set: .btn-bold (the one bold colour), .btn-soft (white clay), .btn-on-bold (on the closing slab and featured plan).
• Switches: <button class="toggle" role="switch" aria-checked> with a sunk bed and clay knob; inside cards as .toggles rows, as a billing switch with side labels, and as the footer Motion switch.
• Bento cards in tints: phone with app screen and floating stickers; savings switches with a coin stack; bills list with status pills; shared pot with a squishy meter; nudges with a quiet-hours switch.
• Steps with numbered pebbles on a sunk groove and three clay objects (card, pebbles, coin).
• Speech-bubble quotes (one squared corner), each with a Sample quote pill until real ones arrive.
• Plans with a big tabular price; the pick is in the bold colour with a tilted pastel flag.
• FAQ as clay pills with a sinking plus.
• Closing slab in the bold colour with pebbles peeking in; footer with the Motion switch.

Do and don't

Do

• Keep one bold colour and four pastels. Put all text in the deep colours.
• Make the pebbles mean something: the customer's categories, services, products or words, sized by importance.
• Keep every raised thing clay: highlight top-left, shade underneath, long soft shadow. Press things in when they're pressed.
• Write like a kind expert: name the worry, remove it, say what happens next.
• Use real, keyboard-operable controls for anything that looks clickable (switches, the shake button, FAQ).

Don’t

• Put text in a pastel, or pastel text on white (1.3 to 1.6:1).
• Add a second bold colour, or the purple-to-blue gradient on white. No gradients as decoration at all.
• Use flat cards with hairline borders, sharp corners or grey drop shadows; it stops being clay.
• Put more than one nugget on a page, or highlight a word with colour or italics instead.
• Let the pebbles bounce forever: they settle, sleep when still and pause off-screen.
• Present sample quotes or placeholder figures as real.

Accessibility

• Contrast as measured above; text never sits on a raw pastel except the plum --on-pastel.
• The pebble canvas is aria-hidden; the pots it draws are a real list (.pit-list) read by screen readers and shown as clay pills without JavaScript. The phone and decorative objects are aria-hidden.
• Every switch is a <button role="switch" aria-checked>; the savings total is aria-live="polite"; the FAQ uses native <details>; the shake button is the keyboard way into the pebbles.
• Visible focus: a 3px --focus outline with a 3px offset on every control. Skip link first.
• Buttons press in for Enter and Space as well as the pointer.
• No horizontal scroll at 360px; the dish shrinks to 380px tall and the pebbles scale with it; phone stickers hide on small screens.

How to make it yours