Pip & Pebble — Storefront Design Kit
Pip & Pebble · Storefront kit
{{ tb.check }}
{{ m.tag }}{{ m.text }}
{{ G.annOne.tag }}{{ G.annOne.text }}
{{ S.gNav.logoText }}
{{ S.gNav.megaAgeTitle }}
{{ S.gNav.megaCatTitle }}
{{ S.gNav.megaBenefitTitle }}
{{ S.gNav.megaPromoEyebrow }} {{ S.gNav.megaPromoTitle }}
{{ S.gSearch.trendingTitle }}
{{ S.gSearch.loadingText }}
{{ S.gSearch.categoriesTitle }}
{{ S.gSearch.productsTitle }}
{{ S.gSearch.emptyStateTitle }}

{{ SE.emptyText }}
Design system · v1.0

Playful Joy

Indigo for trust, sunshine orange for action, butter-yellow for warmth. Very round corners, chunky 3D buttons and springy motion — everything a parent can trust and a kid wants to tap.

Colour

{{ c.hex }}
{{ c.n }}{{ c.tk }}{{ c.use }}

Typography

{{ ty.n }}{{ ty.spec }}
{{ ty.sample }}

Buttons

Primary · default (live)
Primary · hover
Primary · pressed
Primary · disabled
Primary · loading
Secondary · default (live)
Secondary · hover
Secondary · disabled
Ghost · default (live)
Ghost · hover
Ghost · disabled
Icon · wiggle on hover

Inputs

Badges & chips

Sale -18% New Bestseller Sold out Ages 3–8 ASTM F963 EN71 Only 3 left Chip · on Chip · off

Shape, space & motion

{{ r.v }}
{{ sp.n }}

8px grid · spring easing cubic-bezier(.34,1.56,.64,1) · hover lifts 2–6px with a slight tilt · icons wiggle · all motion off under prefers-reduced-motion.

Product card states

{{ c.n }}
{{ S.homeHero.eyebrow }}

{{ S.homeHero.heading }}

{{ S.homeHero.subheading }}

Children playing with magnetic tiles {{ S.homeHero.stickerText }}
{{ S.homeHero.eyebrow }}

{{ S.homeHero.heading }}

{{ S.homeHero.subheading }}

Children playing

{{ S.homeTrust.heading }}

{{ b.title }}{{ b.text }}
{{ S.homeAge.eyebrow }}

{{ S.homeAge.heading }}

{{ S.homeAge.subheading }}
{{ AG.cur.label }} {{ AG.cur.name }} {{ AG.cur.blurb }} {{ sk.label }}
{{ S.homeAge.milestonesTitle }}
{{ S.homeFeatured.eyebrow }}

{{ S.homeFeatured.heading }}
{{ S.homeCats.eyebrow }}

{{ S.homeCats.heading }}

{{ S.homeDeals.eyebrow }}

{{ S.homeDeals.heading }}

{{ S.homeDeals.subheading }}

{{ S.homeDeals.endsInLabel }}
{{ CDN.h }}
{{ S.homeDeals.hoursLabel }}
{{ CDN.m }}
{{ S.homeDeals.minsLabel }}
{{ CDN.s }}
{{ S.homeDeals.secsLabel }}
{{ S.homeReviews.eyebrow }}

{{ S.homeReviews.heading }}

“{{ r.quote }}”
{{ r.name }}{{ r.role }}
{{ S.homeNews.eyebrow }}

{{ S.homeNews.heading }}

{{ S.homeNews.subheading }}

{{ S.homeNews.errorText }} {{ S.homeNews.privacyNote }}
{{ spin }}{{ S.homeNews.submittingLabel }}
{{ S.homeNews.successTitle }} {{ S.homeNews.successText }}
{{ S.homeNews.discountCode }}
{{ S.ageHeader.eyebrow }}

{{ S.ageHeader.heading }}

{{ S.ageHeader.subheading }}

{{ S.ageTiles.eyebrow }}

{{ S.ageTiles.heading }}

{{ S.ageTiles.subheading }}
{{ AG2.cur.label }}{{ AG2.cur.name }}{{ sk.label }}
{{ S.ageTiles.milestonesTitle }}

{{ S.ageTrust.heading }}

{{ b.title }}{{ b.text }}

{{ S.plpHeader.heading }}

{{ S.plpHeader.subheading }}
{{ S.collHero.eyebrow }}

{{ CH.name }}

{{ CH.desc }}

{{ CH.count }} {{ S.collHero.benefitsTitle }}
{{ b.label }}
{{ CH.name }}
{{ PL.count }}
{{ PL.copy.errorTitle }}
{{ PL.copy.emptyStateTitle }}{{ PL.copy.emptyStateText }}

{{ S.collTrust.heading }}

{{ b.title }}{{ b.text }}
{{ PDP.name }} {{ PDP.off }} {{ S.pdpMain.zoomHint }}
{{ S.pdpMain.ageLabel }}: {{ PDP.age }}{{ PDP.rating }} · {{ PDP.reviews }} {{ S.pdpMain.reviewsLabel }}

{{ PDP.name }}

{{ PDP.blurb }}

{{ PDP.price }}{{ PDP.was }}
{{ S.pdpMain.saleEndsLabel }}{{ PDP.cd.h }}:{{ PDP.cd.m }}:{{ PDP.cd.s }}
{{ S.pdpMain.buildsLabel }}
{{ b.label }}
{{ PDP.optName }}: {{ PDP.optSelName }}
{{ PDP.hint }}
{{ S.pdpMain.inStockLabel }} {{ PDP.lowText }} {{ S.pdpMain.outOfStockLabel }}
{{ S.pdpMain.qtyLabel }}{{ PDP.qty }}
{{ PDP.points }} {{ S.pdpMain.deliveryNote }} {{ S.pdpMain.giftNote }}
{{ S.pdpMain.certsTitle }}
{{ c.code }}{{ c.text }}

{{ PDP.blurb }}

{{ PDP.desc2 }}
{{ sp.k }}{{ sp.v }}

{{ S.pdpMain.safetyText }}

{{ S.pdpReviews.heading }}

{{ S.pdpReviews.thanksText }}
{{ S.pdpReviews.noReviewsTitle }}{{ S.pdpReviews.noReviewsText }}
{{ PDP.rating }}{{ PDP.basedOn }}
{{ d.star }}★{{ d.n }}
{{ r.initial }}{{ r.author }}{{ S.pdpReviews.verifiedLabel }} · {{ r.date }}

{{ r.text }}
{{ S.pdpRelated.eyebrow }}

{{ S.pdpRelated.heading }}

{{ S.giftHeader.heading }}

{{ S.giftHeader.subheading }}

{{ S.giftQuiz.eyebrow }}

{{ S.giftQuiz.heading }}

{{ S.giftQuiz.subheading }}

{{ QZ.stepText }}

{{ QZ.q }}

{{ S.giftQuiz.resultHeading }}

{{ S.giftQuiz.resultText }}

{{ x.label }}

{{ S.giftQuiz.noMatchText }}

{{ S.giftServices.heading }}

{{ b.title }}{{ b.text }}
{{ S.giftPicks.eyebrow }}

{{ S.giftPicks.heading }}

{{ S.safetyHeader.heading }}

{{ S.safetyHeader.subheading }}

{{ S.safetyCerts.eyebrow }}

{{ S.safetyCerts.heading }}

{{ c.code }}
{{ c.title }}{{ c.text }}

{{ S.safetyCerts.promiseTitle }}

  1. {{ st.n }}{{ st.title }}{{ st.text }}
{{ S.safetyFaq.eyebrow }}

{{ S.safetyFaq.heading }}

{{ q.answer }}

{{ S.safetyFaq.contactPrompt }}

{{ S.contactHeader.heading }}

{{ S.contactHeader.subheading }}

{{ S.contactMain.heading }}

{{ S.contactMain.topicLabel }}
{{ S.contactMain.successTitle }}{{ S.contactMain.successText }}
{{ c.title }}{{ c.text }}
Map of our Banani play shop
{{ S.coForm.guestNote }}

{{ S.coForm.addressTitle }}

{{ S.coForm.deliveryTitle }}

{{ S.coForm.giftTitle }}

{{ S.coForm.paymentTitle }}

{{ S.coForm.secureNote }}
{{ OS.confetti }}

{{ S.coSuccess.heading }}

{{ OS.sub }}

{{ S.coSuccess.orderNumberLabel }}{{ OS.num }}
{{ S.coSuccess.estimatedLabel }}{{ OS.eta }}
{{ S.successPicks.eyebrow }}

{{ S.successPicks.heading }}

{{ SP.heading }}

{{ SP.count }}
{{ S.searchMain.emptyStateTitle }}{{ S.searchMain.emptyStateText }}

{{ S.searchMain.suggestionsTitle }}

{{ S.acctMain.ordersTab }}

{{ S.acctMain.noOrdersTitle }}{{ S.acctMain.noOrdersText }}
{{ o.num }}{{ o.date }} · {{ o.total }}
{{ o.status }}
{{ t.name }}
{{ o.courier }} {{ o.ret }}
{{ S.acctMain.pointsTitle }}{{ AC.points }}
{{ AC.ptsText }}

{{ S.acctMain.kidsText }}

{{ k.name }}{{ k.age }}
A family unboxing toys{{ S.authMain.subheading }}

{{ AU.title }}

{{ S.authMain.errorText }}

{{ S.wishMain.heading }}

{{ S.wishMain.emptyTitle }}{{ S.wishMain.emptyText }}

{{ S.trackMain.heading }}

{{ S.trackMain.subheading }}

{{ S.trackMain.notFoundTitle }}{{ S.trackMain.notFoundText }}
{{ TR.num }} · {{ TR.status }}{{ S.trackMain.courierLabel }}: {{ TR.courier }}
  1. {{ st.label }}{{ st.date }}
{{ S.blogMain.eyebrow }}

{{ S.blogMain.heading }}
{{ BL.post.tag }}

{{ BL.post.title }}

{{ S.postMain.byLabel }} {{ BL.post.author }} · {{ BL.post.date }} · {{ BL.post.mins }}

{{ b.text }}

{{ S.postNews.eyebrow }}{{ S.postNews.heading }}{{ S.postNews.subheading }}
{{ S.postNews.successTitle }}{{ S.postNews.discountCode }}
{{ S.aboutMain.eyebrow }}

{{ S.aboutMain.heading }}

{{ pa.text }}

The Pip & Pebble founders
{{ v.title }}{{ v.text }}

{{ S.aboutCerts.heading }}

{{ b.title }}{{ b.text }}

{{ LG.title }}

{{ S.legalMain.lastUpdatedLabel }}: {{ LG.updated }}

{{ x.n }}. {{ x.h }}

{{ x.p }}

{{ S.nfMain.heading }}

{{ S.nfMain.subheading }}
{{ S.gNav.logoText }}
{{ S.gFooter.tagline }}

{{ S.gFooter.description }}

{{ c.title }}
{{ S.gFooter.certsLabel }}{{ c }}
{{ S.gFooter.payLabel }}
{{ S.gFooter.copyrightText }}
{{ S.gNav.logoText }}
{{ S.gNav.megaAgeTitle }}
{{ QV.name }}
{{ QV.age }}

{{ QV.name }}

{{ QV.rating }} · {{ QV.reviews }}

{{ QV.blurb }}

{{ QV.price }}{{ QV.was }}
{{ QV.optName }}
{{ QV.hint }}
{{ QV.qty }}
{{ tt.text }}