--- version: alpha name: "Toy store template by 8B" description: "Independent toy shop website in candy yellow, pink, lime and cobalt on white, with notched cards, tilted pills and a self-solving photo puzzle; Free HTML template by 8B, MIT." colors: primary: "#2d47c6" secondary: "#f7aacb" tertiary: "#a9c34c" neutral: "#ffffff" surface: "#ffffff" on-surface: "#24201c" accent-yellow: "#fde77d" accent-orange: "#f48a3a" blush: "#fbdde9" typography: headline-display: fontFamily: Gabarito fontSize: 80px fontWeight: 700 lineHeight: 0.98 letterSpacing: -0.03em headline-hero: fontFamily: Gabarito fontSize: 60px fontWeight: 700 lineHeight: 0.98 letterSpacing: -0.03em headline-md: fontFamily: Gabarito fontSize: 32px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.02em body-lead: fontFamily: Gabarito fontSize: 23px fontWeight: 500 lineHeight: 1.35 letterSpacing: -0.005em body-md: fontFamily: Gabarito fontSize: 18px fontWeight: 400 lineHeight: 1.5 label-md: fontFamily: Gabarito fontSize: 15px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0.01em verdict: fontFamily: Playpen Sans fontSize: 18px fontWeight: 500 lineHeight: 1.35 button: fontFamily: Gabarito fontSize: 26px fontWeight: 700 lineHeight: 1.3 letterSpacing: -0.01em button-sm: fontFamily: Gabarito fontSize: 18px fontWeight: 600 lineHeight: 1.3 rounded: md: 14px lg: 28px full: 999px spacing: gutter: 14px page-margin: 56px section: 160px max-width: 1320px field-height: 52px components: button-primary: backgroundColor: "{colors.secondary}" textColor: "{colors.on-surface}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 13px 39px button-secondary: backgroundColor: "{colors.primary}" textColor: "{colors.neutral}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 10px 25px button-menu: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 0 16px height: 48px badge-orange: backgroundColor: "{colors.accent-orange}" textColor: "{colors.on-surface}" typography: "{typography.label-md}" rounded: "{rounded.full}" padding: 6px 15px card-notched: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 14px card-surface: backgroundColor: "{colors.blush}" textColor: "{colors.on-surface}" typography: "{typography.body-lead}" rounded: "{rounded.lg}" padding: 68px input-field: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 13px 17px height: 52px --- # Toy store template by 8B ## Overview This is a one-page website for an independent toy shop that does more than sell: it repairs teddy bears, runs free Saturday workshops, takes outgrown toys in a swap box and keeps birthday lists. The one idea is that the shop is run by children's questions. Shelves are sorted by what a kid wants to find out, and the services sit on bright, rounded cards a child could point at. It is built for owners who want warmth and play without cartoon clutter. The feeling is a well-lit shop floor: flat candy colour on white, small tilts, nothing glossy. ## Colors Five candy grounds sit on a white page with warm near-black text. - **Primary, cobalt (#2d47c6):** the interactive colour. It fills the Start a list, Get directions and Send it buttons, one badge style, every wavy ribbon, the fourth shutter on the shopfront photo and the keyboard focus ring. - **Secondary, pink (#f7aacb):** the default pill button (Plan a visit), the gifts card and the address card, some badges and card grounds, the second shutter, the lens ring and the border of an open question. - **Tertiary, lime (#a9c34c):** the opening text card, some badges and card grounds, the third shutter, and the date tab of a workshop the rolling ball has not reached yet. - **Accent yellow (#fde77d):** the opening hours card, the contact card, one ground of the tester and workshop cards, the plus discs in the questions and the first shutter. - **Accent orange (#f48a3a):** badges, the age and date tabs, and the ball on the workshop ribbon. It is the smallest area, used for tabs and tags. - **Blush (#fbdde9):** the repair card, one ground of the tester and workshop cards, photo placeholders, the outlines of the logo pill, the link bar and closed questions, the footer rule and the fill of an open question. - **Surface and neutral (#ffffff):** page ground, form fields, the number discs in the gift steps and text on cobalt. - **On-surface (#24201c):** text on every light ground and field borders. Body text needs 4.5:1 contrast on its ground. ## Typography **Gabarito** carries almost everything: bold 700 for headings and the large button, 500 for leads, 600 for small labels, pills and the smaller buttons, 400 for body text. Headings are tight, with negative tracking and a line height just under 1. The display size is the upper end of a clamp from 38px to 80px; the opening heading runs 36px to 60px (30px on phones); body text is 16px to 18px. Headings and labels are in sentence case, with no uppercase labels; the logo and footer wordmark are lowercase. **Playpen Sans** is the hand-drawn accent. It sets the logo, the footer wordmark (700), the testers' quoted verdicts (500, 15px to 18px) and the one-line note under the repair prices (500, up to 21px). Do not use it for body paragraphs. ## Layout Content sits in a column up to 1320px wide, inset by a gutter that runs from 16px to 56px. Sections are separated by top padding of 88px to 160px, and cards sit 8px to 18px apart. The opening is a text card beside a framed 3 by 3 photo board. Shelves form a grid of 3, then 2, then 1 column below 900px and 520px; with scripts and motion they become one pinned row. The five tester cards form a five-column grid, two columns on phones. Repair, gifts and address cards pair a coloured field with photos. Below 900px the navigation links fold into a Menu pill that opens a full-screen overlay, and two-column sections stack. ## Elevation & Depth Depth is made by flat colour layers, not blur. The one soft shadow (0 26px 44px -24px at 60% ink) is used twice: under the ninth puzzle tile while it drops in, gone when the tile is home, and under the round magnifying lens in the swap box. Buttons carry a thin inset edge along the bottom (inset 0 -0.2em 0 at 16% ink). Large starburst shapes are clipped by the cards they sit in, which adds layers without blur. ## Shapes Large cards use a 28px radius at desktop (18px minimum), inner photos and fields 14px, and every button, pill and badge is a full pill. The signature shape is the notched card: one top-right corner is cut away and a coloured tab, holding an age or a date, sits in the gap with an even 6px to 8px margin. It is drawn with a clip-path shape; browsers without it show a whole rounded card with the tab inside. Pills are rotated a few degrees in alternating directions. Starburst polygons and wavy ribbons are drawn as inline SVG. ## Components - **button-primary:** the pink pill with 26px bold text, used for the single main call to action. The label rolls up and a copy rises from below on hover, on devices that hover. - **button-secondary:** the cobalt pill with white 18px text for secondary actions such as Start a list and Send it. - **button-menu:** a white pill with a 2px ink border and an icon that turns on hover; it opens the phone overlay. - **badge-orange:** a small pill for categories, prices, rules and contact labels. Other badge variants swap the ground to lime, pink or cobalt, keep the same shape and text. - **card-notched:** testers and workshops. Alternate the ground between yellow, pink, lime and blush. - **card-surface:** a large rounded field with a heading, a lead and pills, such as the repair counter. - **input-field:** white, 2px ink border, 52px high, labelled above. ## Motion The page loads GSAP, ScrollTrigger and MotionPathPlugin, plus Lenis for smooth scrolling. The one motion idea is play: things are scrambled, scattered or covered and then settle into order as you scroll. - **Opening:** the text card and board rise on load. The screen is held for about 170svh while a scrambled board slides back in 12 moves (10 on phones) and the ninth tile drops into the last hole. - **Shelves:** pinned while the six blocks travel left; photos lean with the scroll speed and swing upright when it slows. - **Testers:** five cards start as one fanned stack and are dealt out to their places. - **Repairs:** the heading slides in, five tags drop in tilted and bounce once, and the starburst turns with the scroll. - **Workshops:** an orange ball follows the ribbon; each session keeps a lime tab and a smaller, tilted photo until the ball arrives. - **Swap box:** a round lens visits each note's spot on the photo in turn, the second and third notes fade in as it arrives, and the ribbon draws itself. - **Gifts, address, contact, footer:** a large burst shrinks into a sticker, four shutters retract from the shopfront, four pills settle into a list, and the ribbon draws itself. With reduced motion, the entrance and scroll animations and smooth scrolling are switched off: the board is shown solved and nothing is held. The navigation bar still hides on scroll, and hover transitions still run. ## Do's and Don'ts - Do keep cards flat: one candy colour per card, white page, no gradients. - Do keep corners soft: 28px cards, pill buttons, and one notch per card at the top right. - Do set pills and tabs at small alternating tilts, never more than a few degrees. - Do keep Playpen Sans for the logo, wordmark, quoted verdicts and the repair note only. - Do put dark ink text on the candy grounds and white text only on cobalt. - Don't add drop shadows to cards, or a second display typeface. - Don't use uppercase tracked labels or square corners. - Don't add a seventh candy colour; use the existing roles. - Don't scatter more than one tilted element in a row of equals, or the page turns noisy. - Don't add motion that hides content at reading size; keep every section readable with reduced motion.