--- version: alpha name: "Ice cream shop template by 8B" description: "A sticker-style one-page design for an ice cream parlour or dessert shop: lemon ground, bright fills, ink outlines and hard shadows. Free HTML template by 8B, MIT." colors: primary: "#1d1c1c" secondary: "#fd74fd" tertiary: "#83f582" neutral: "#fff48d" surface: "#ffffff" on-surface: "#1d1c1c" accent-cyan: "#7af7f7" accent-coral: "#ff6a8d" accent-peach: "#ffb38a" accent-violet: "#b06cf8" typography: headline-display: fontFamily: Gabarito fontSize: 104px fontWeight: 900 lineHeight: 0.88 letterSpacing: -0.035em headline-section: fontFamily: Gabarito fontSize: 100px fontWeight: 900 lineHeight: 1.02 letterSpacing: -0.035em headline-card: fontFamily: Gabarito fontSize: 32px fontWeight: 900 lineHeight: 0.95 letterSpacing: -0.02em logo: fontFamily: Gabarito fontSize: 28px fontWeight: 900 lineHeight: 1 letterSpacing: -0.04em price: fontFamily: Gabarito fontSize: 30px fontWeight: 900 lineHeight: 1 letterSpacing: -0.02em body-md: fontFamily: Google Sans fontSize: 17px fontWeight: 400 lineHeight: 1.5 label-lg: fontFamily: Google Sans fontSize: 17px fontWeight: 500 lineHeight: 1.3 label-md: fontFamily: Google Sans fontSize: 14px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.01em badge: fontFamily: Google Sans fontSize: 13px fontWeight: 600 lineHeight: 1.2 rounded: sm: 10px field: 14px md: 18px xl: 40px full: 999px spacing: gutter: 56px section: 190px control-height: 56px field-height: 52px card-gap: 44px max-width: 1400px components: button-primary: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.label-lg}" rounded: "{rounded.full}" height: "{spacing.control-height}" padding: 7px 7px 7px 24px button-dark: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" typography: "{typography.label-lg}" rounded: "{rounded.full}" height: "{spacing.control-height}" padding: 0 28px nav-pill: backgroundColor: "{colors.neutral}" textColor: "{colors.on-surface}" typography: "{typography.label-lg}" rounded: "{rounded.full}" height: "{spacing.control-height}" card-surface: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" badge-tag: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.badge}" rounded: "{rounded.full}" height: 30px padding: 3px 12px price-pill: backgroundColor: "{colors.tertiary}" textColor: "{colors.on-surface}" typography: "{typography.price}" rounded: "{rounded.full}" padding: 7px 18px 9px highlight-box: backgroundColor: "{colors.tertiary}" textColor: "{colors.on-surface}" rounded: "{rounded.sm}" padding: 0 0.1em input-field: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.field}" height: "{spacing.field-height}" padding: 13px 16px --- # Ice cream shop template by 8B ## Overview This is a one-page design for a small ice cream parlour, gelateria or dessert shop that changes its menu often and also sells workshops and a monthly subscription. The one idea is the sticker: every box, photo, button and tag is a flat shape with a 1.5px ink outline, most with a hard shadow, stuck onto a lemon page and tilted a degree or two. The feeling is warm, noisy and a little silly, the look of a hand-lettered freezer door. It is meant for an owner who wants customers to smile before they read a price. ## Colors - **Ink, #1d1c1c** (`primary`): all text, every 1.5px outline, every hard shadow and the dark button. - **Lemon, #fff48d** (`neutral`): the page ground, the first screen, the logo pill, the opening-hours pill, the plan price pills and the icon circles in buttons. - **White, #ffffff** (`surface`): cards, the link bar, buttons, form fields, badges and the first review ribbon. - **Pink, #fd74fd** (`secondary`): the wipe on button hover, the second highlight style, the second question card, the second review ribbon and the shadow under the dark button. - **Green, #83f582** (`tertiary`): the first highlight style, the first question card, odd price pills, link hover fill, the dots between reviews and the start of two gradients. - **Cyan, #7af7f7** (`accent-cyan`): the third highlight style, the third question card, even price pills and the middle of two gradients. - **Coral, #ff6a8d** (`accent-coral`): the start of the phone menu overlay and the visit section gradients, both running through peach to lemon. - **Peach, #ffb38a** (`accent-peach`): the middle of those gradients and the start of the peach-to-pink card fill. - **Violet, #b06cf8** (`accent-violet`): the end of the green-cyan card fill and of the Pint Club sheet. Lemon and white carry most of the page; the large exceptions are the coral-peach-lemon visit section, the cyan-green-violet Pint Club sheet and the pink second review ribbon. Otherwise pink, green and cyan are fills for highlights, pills and the three question cards. ## Typography Gabarito at weight 900 is the only display face. It is set uppercase with tight negative tracking and a line height of 0.88 to 1.02, so lines of a headline nearly touch. It carries headings, flavour names, prices, step numbers, opening times and the lowercase logo with its full stop. Section headings run from about 40px on phones to a desktop maximum between 96px and 136px; the table lists the typical values. Google Sans does the reading: 400 for body text at 16 to 18px, 500 for buttons and links, 600 for badges and small labels. Never set body text in the display face, and never lower the display weight. ## Layout Content sits in a wide frame with a gutter of 16px on phones growing to 56px, and sections are padded by 96px to 190px above and below. Wide blocks stop at 1180px or 1400px. Sections alternate between a sticky heading beside a pile of cards, centred statements, one tall priced sheet, a three-card plan row and a two-column visit block. At 960px and below the link bar and the hours pill are replaced by a Menu button that opens a full-screen overlay; at 900px two-column sections stack; at 760px and 560px the steps and rows reduce to one column. Photo chips sit inside sentences at the height of the lettering. ## Elevation & Depth Depth is drawn, not blurred. Shadows are offsets with no blur: 4px for buttons, price pills and step numbers (tags have none), 8px for cards, the plan cards and photos, 1px when a button is pressed. Overlap does the rest: photos overlap sheet edges, plan cards stack on the middle card, and tilts of 1 to 7 degrees make boxes look dropped on the page. Do not add soft shadows or glass. ## Shapes Corners are generous and consistent: pills (999px) for buttons, tags and prices, 18px for cards, photos and sheets, 10px for highlight boxes, 14px for fields, 40px for the club sheet and the review ribbons (full pills once the ribbons start running), circles for icon buttons and step numbers. Photos are cropped to rectangles with the same outline and shadow as the cards. Dashed 1.5px lines separate the cells of the workshop ticket; solid 1.5px lines separate list rows. ## Components - **button-primary**: white pill with the label on the left and a lemon circle holding an arrow on the right; hover wipes it pink from the left and presses it down 3px. - **button-dark**: ink pill with white text and a pink hard shadow, used for plans and the form. - **nav-pill**: lemon logo pill at the top and, at the bottom, a lemon hours pill, a white link bar and the order button. - **card-surface**: white box, three variants of fill (white, green to violet, peach to pink). - **badge-tag**: small white pill for diet and freshness tags. - **price-pill**: green or cyan pill in the display face. - **highlight-box**: a marker-style box around one phrase in a headline. - **input-field**: white field with the same outline; it gains a hard shadow on focus. ## Motion The page loads GSAP, ScrollTrigger and SplitText from jsDelivr, and Lenis for smooth scrolling. The one motion idea is things being dealt, stuck and squashed like physical stickers. - Opening: on load the lead line, headline, paragraph and buttons settle into place one after another; the photo chip pops. - Flavours: five cards are pinned in one pile while the heading stays put on desktop; each card slides up with a tilt, for about three screens of scroll. - Morning: chips pop and steps stick on once. - Questions: the highlighted phrase expands into the coloured card and the answer rises in. - Prices, school ticket, visit: elements stick on with a short overshoot, 0.75s. - Neighbours: two photos fly in from the sides, bump and settle. - School: the title fills word by word from 16% opacity. - Club: three plan cards fan out from a stack. - Reviews: two ribbons start crossed and settle to a slight tilt as you scroll, while running sideways at 46 and 52 seconds a loop, paused on hover, focus and off screen. - Footer: the wordmark letters stretch up in turn. With reduced motion on, the entrance and scroll animations and smooth scrolling are switched off: the flavours show as a tilted column, the reviews as wrapped rows and the question cards fully coloured. The link bar still hides on scroll and buttons still respond to hover. ## Do's and Don'ts - Do keep the 1.5px ink outline and the blur-free shadow on every box. - Do keep pink, green and cyan as small fills and the page ground lemon or white. - Do tilt cards by a degree or two, never more than a few degrees except on photos. - Do keep uppercase Gabarito 900 for headings and prices only. - Don't add soft shadows, gradients on text, thin hairline borders or a third typeface. - Don't round the corners differently from the scale above. - Don't replace the photo chips with icons or emoji. - Don't put body paragraphs on the saturated fills in small sizes; keep ink on every fill.