Brand foundations
The mark, the palette and the tokens PebbleYard is built on. Everything here is the live specification, not a redrawing of it, so a partner or a school setting our name beside their own can take the values straight off this page.
The mark
PebbleYardA cairn: three stacked pebbles, widest at the base. Children stack pebbles for fun, and walkers stack them to mark the path for whoever comes next. Both readings are the product.
Always one word
PebbleYard, with a capital P and a capital Y. Never Pebble Yard, never Pebbleyard, never shortened to Pebble.
The mark holds its ground
Clear space of at least the height of the top pebble on every side. Never re-coloured outside the palette below, never rotated, never set on a busy photograph.
Never stretched
The mark keeps its own aspect ratio at every size we render it - letterboxed, never cropped or distorted to fill a box.
The favicon
The cairn on a ground, because three outlines on transparency vanish against a dark tab strip. The outline weight is set per size rather than scaled: it is heaviest on the app icon and comes off entirely at 16px, where a stroke landing on half a pixel closes the gaps and the three pebbles read as one blob.
Colour tokens
Purple
#A175FC
Blue, primary
#89A0FC
Green
#93DA83
Yellow
#F0DE81
Pink
#E180AB
Orange
#E4A145
Ground, blue
#C6D2F9
Ground, blue soft
#D4DEFE
Ground, purple
#DCD5EF
Ground, purple soft
#EAE6F6
Ground, green
#C4EAC0
Ink, all type on fills
225 24% 16%
Paper
228 26% 97%
Accent set
42 92% 53% · 173 80% 36% · 10 83% 63%
Standing rule: ink + paper + indigo + at most one accent per viewport. The full set appears together exactly once, in the topic catalogue on Home. Amber is a fill only. It fails AA as type on paper, so anywhere it has to be the type colour it darkens to 43 100% 21%.
Type, radii, motion
elevation e1 3–4px hard offset · e2 5px hard offset (no blur, ever)
motion 160ms exit · 320ms enter · cubic-bezier(.2,.8,.2,1)
space 4 8 12 16 24 32 48 64 96 104