Skip to content
Browse
Library

Toca Boca. Sticker sheet on a crayon box.

  • Brand
  • Light theme
  • 9 colors
  • 2 typefaces

Toca Boca is a kids’ games studio site that reads like a sticker sheet: a white canvas carrying inset 32px-radius colour slabs in Sky Blue #59acff and Grass Green #62d962, with Bubblegum Pink #ff8cbc, Tangerine #ff7040 and Sunshine Yellow #ffe359 taken straight from the four teeth and tongue of the mouth logo. All type is Midnight Mouth #101014. Headlines are set in Wallop, a chunky geometric grotesque, at 160px down to 40px with tracking near -4%, and cartoon emoji stickers replace letters inside words. Every control is a Midnight Mouth 9999px pill with a Daylight #f2f2ff label; there are no borders and no shadows, so flat colour and character art do all the work.

Visit tocaboca.com
Screenshot of Toca Boca
Captured from tocaboca.com on October 18, 2026

Toca Boca design system

Toca Boca

Brand1

  • The mouth of the logo, every headline and every pill button — a blue-black that frames the candy colours the way an outline frames a sticker

Accent5

  • The largest surface on the page: the adiClub, adidas and Toca Boca World slabs and the Inclusion tile — the default band colour

  • The Superfan slab and the Quality value tile — a second full-band colour that alternates with Sky Blue down the page

  • The Play value tile, the kid card in the audience chooser and pink logo art — the site’s own --color-primary token

  • The Innovation value tile and the logo’s tongue — the warmest colour, used on one tile at a time, never on text

  • Wiggling app-icon tiles at the edges of the app slider and the adult card in the audience chooser — small doses only

Neutrals3

  • Page canvas, navigation background, the hero, the values and Bug Board sections and the footer

  • Highlight news cards, the audience chooser panel, pill labels and the Play trailer pill — a faint lavender white

  • Inter body copy, card dates, footer address and legal text, and labels on Daylight pills — a touch blacker than Midnight Mouth

Try a pairing

Pick any two colors from the palette to check whether text stays readable on top.

Aa

Paper on Midnight Mouth

18.98 : 1 contrast

Background
Text
  • Body textPasses AA 4.5
  • Large textPasses AA 3
  • StrictPasses AAA 7

More DESIGN.md files. Same web, different personalities.