Clay component library

Everything on this site is built from these pieces. They're all live, so press them.

Colour

Text on clay is always ink, never white. Every pairing is checked at build time.

--clay-peach#FFB38AAddition, primary buttons 8.0:1 with ink
--clay-mint#8FE3C3Subtraction, success 9.2:1 with ink
--clay-lilac#C7B3FFTimes tables 7.5:1 with ink
--clay-sky#9ED4FFFractions 8.8:1 with ink
--clay-lemon#FFE27ARewards, stars, play 10.9:1 with ink
--bg#FFF8F0Page background 13.2:1 with ink

The clay recipe

A soft outer shadow plus two inner shadows: light from the top-left, dark to the bottom-right. The same light hits the 3D mascots.

.clay {
  border-radius: 32px;
  background: var(--clay-peach);
  box-shadow:
    0 14px 28px rgba(45, 42, 62, 0.14),
    inset -8px -8px 16px rgba(0, 0, 0, 0.10),
    inset 8px 8px 16px rgba(255, 255, 255, 0.55);
}

Phone8px outer blur

Tablet18px

Desktop28px, full recipe

Type

Display 84

Heading 48, Baloo 2

Body 19, Nunito. Both fonts use a single-storey “a” and clear numerals: 0123456789.

7 + 5

Buttons

64px tall pills. They squish to 95% with a deeper inner shadow when pressed, then spring back.

Cards

32px radius on desktop, 28px on tablets, 24px on phones. A mascot can peek over the top edge.

Plus Park

Hop, count and add with Pip.

Take-Away Tunnels

Dig for answers with Minty.

Times Tower

Climb higher with Lulu.

Progress

A pressed-in clay track with a puffy fill and a star riding the end.

Badges

Round clay coins with an icon.

Mascots

Rendered in 3D and served as WebP at 320 and 640 pixels. Hover or tap to make them jump.

Pip, adding
Minty, taking away
Lulu, times tables
$Skye, the sky-blue fractions friend$
Skye, fractions