---
version: alpha
name: "Bubble tea shop template by 8B"
description: "One-page site for a bubble tea bar: candy colours on white, navy condensed capitals, stacked cards and scalloped edges. Free HTML template by 8B, MIT."
colors:
  primary: "#02091d"
  secondary: "#596078"
  neutral: "#ffffff"
  surface: "#ffffff"
  on-surface: "#02091d"
  caption: "#596078"
  accent-blue: "#529dff"
  accent-orange: "#ff7a33"
  accent-green: "#53c690"
  accent-yellow: "#f6f07a"
  accent-lilac: "#e3a2f8"
typography:
  headline-display:
    fontFamily: Bricolage Grotesque
    fontSize: 8.5rem
    fontWeight: 800
    lineHeight: 0.86
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Radio Canada Big
    fontSize: 3.6rem
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Radio Canada Big
    fontSize: 2.15rem
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.035em
  body-lg:
    fontFamily: Radio Canada Big
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.01em
  body-md:
    fontFamily: Radio Canada Big
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Radio Canada Big
    fontSize: 0.9375rem
    fontWeight: 500
    lineHeight: 1.3
  button:
    fontFamily: Radio Canada Big
    fontSize: 1.0625rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.02em
  button-sm:
    fontFamily: Radio Canada Big
    fontSize: 1rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.025em
  label-chip:
    fontFamily: Radio Canada Big
    fontSize: 1rem
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.02em
rounded:
  field: 14px
  tile: 20px
  card: 24px
  panel: 32px
  pill: 999px
spacing:
  gutter: 3rem
  section: 9rem
  max-width: 80rem
  build-band: 4.25rem
  gap-sm: 1rem
  gap-md: 1.25rem
components:
  button-primary:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 0.85em 1.6em
    height: 3.25rem
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.pill}"
    padding: 0.8em 1.4em
    height: 3rem
  nav-pill:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.field}"
    padding: 0.55em 1em
    height: 2.75rem
  card-build-layer:
    backgroundColor: "{colors.accent-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
  card-faq:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.card}"
  chip:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.primary}"
    typography: "{typography.label-chip}"
    rounded: "{rounded.pill}"
    padding: 0.5em 1em
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.field}"
    padding: 0.7rem 1rem
    height: 3rem
---

## Overview

Chewsday is a one-page site for a bubble tea bar with a short signature menu, a build-your-own guide and a new limited drink every week. The one idea is a candy counter: five flat colours (blue, orange, green, yellow, lilac) take turns as the fill of cards, bubbles, drops and tiles, always against white and always with navy type. Corners are soft, edges are scalloped like a cup lid, and headings are loud condensed capitals. It should feel cheerful, quick and a little cheeky, written for young regulars and for office groups who order ten cups at once. The words in the demo are invented and are replaced by the owner.

## Colors

White is the ground and navy carries everything that must be read. The five accents are fills, never text colours, and each item gets one of them.

- **Ink (#02091d, primary):** all text, every border and outline, the dark footer panel and the fill that wipes into buttons on hover.
- **Slate (#596078, secondary, caption):** the grey-blue lede line under section headings.
- **White (#ffffff, neutral, surface):** page ground, FAQ cards, the order form, the secondary button, footer text.
- **Blue (#529dff):** the primary button, the house rules band, the first build card, first chat bubble, first drop and first footer tile, plus a pale tint behind the pearls section.
- **Orange (#ff7a33):** second build card, third ordering step, second chat bubble, second drop, Build nav pill.
- **Green (#53c690):** third build card, first ordering step, third bubble, third drop, Visit nav pill.
- **Yellow (#f6f07a):** the FAQ panel, fourth build card, the default chip fill, footer tile hover and one bump on the visit photo.
- **Lilac (#e3a2f8):** fifth build card, fourth bubble, fourth drop, Drops nav pill.

A rust red (#c8400c) is defined in the tokens but no element uses it; do not introduce it as an accent.

## Typography

Two faces carry the page. **Bricolage Grotesque** at weight 800, condensed to 75% width and set in uppercase, is the voice: every section heading, the nav wordmark, step numbers, the huge Pick, Shake and Sip words and the footer wordmark. It runs from about 3rem on phones to 8.5rem on wide screens, with line height 0.86 so lines nearly touch. **Radio Canada Big** is the working face for everything else, in weights 400 to 600: lede lines, drink names (500, tight negative tracking), prices, buttons (600), labels and FAQ questions. Sentence case everywhere except the display face. A third family, Playpen Sans, is loaded but no element uses it; leave it out of new work.

## Layout

Content sits in a centred column up to 80rem wide, with a fluid side gutter of 1rem to 3rem and section padding of 5rem to 9rem. The menu is a two-column grid whose even cups drop by several rem, the build section is a single column of five full-width cards, the pearls section is centred, and the visit section pairs details with the order form. The rules band runs edge to edge between two scalloped rows. Below 700px the menu, rules and chat columns collapse to one and the build bands shrink from 4.25rem to 3.25rem; the ritual steps, the FAQ panel and the visit columns stack below 800px, the drop cards go to two columns below 900px and the footer tiles to two below 600px. The nav pills stay visible at every width; there is no menu button.

## Elevation & Depth

Depth comes from stacking, not shadows. The build cards stick one under another with a band of each card left showing, the covered card shrinks slightly. The only shadow is a soft navy one under the floating nav bar (0 12px 32px at 14% opacity). Photo frames use a 3px white border on the build and chat photos.

## Shapes

Cards use 24px radius, the nav bar 20px, footer tiles 20px, the FAQ panel and footer panel 32px, form fields and nav pills 14px, buttons, chips and dates are pills. Chat bubbles have one tight corner (6px) at the tail. Scalloped edges are CSS shapes: the lower edge of each menu photo, the top and bottom of the pearls frame, the top and hem of the rules band and the hover fill of every button. Five empty bumps of alternating height round the bottom of the visit photo; below 800px only the first three show.

## Components

- **button-primary:** blue pill, navy 2px outline, 600 weight. On hover a navy fill with a scalloped top edge rises from below and the label turns white.
- **button-secondary:** the same pill on white, slightly smaller (1rem label, 1.5px outline).
- **nav-pill:** square-ish 14px pill with a colour outline; its hover fills with the same colour.
- **card-build-layer:** a full-width colour card with a numbered band, a line, four option rows ruled in navy and a bordered photo.
- **card-faq:** a white native details card with a round plus icon that turns 45 degrees when open.
- **chip:** pill with a navy outline and a rotated, offset placement; fills cycle through yellow, orange, green, lilac and white.
- **input-field:** white field, 1.5px navy border, 14px radius.

## Motion

GSAP with ScrollTrigger drives the scenes and Lenis gives smooth scrolling. The one idea is things arriving as physical objects: cards fly in, swing like hung signs, swell like bubbles. Most of it is tied to the scroll position, not played on a timer.

- **Opening:** CSS keyframes only. The heading rises and scales in; the where-line, lede and buttons fade up.
- **Menu:** each cup flies in from alternating sides with a 16 degree tilt (11 on phones) and straightens.
- **Build:** each card sticks under the previous one, grows from 84% scale, and the covered card recedes to 95.5%.
- **Pearls:** the scalloped frame grows from 55% scale while eight chips fly out from behind it.
- **Ordering steps and FAQ:** each card swings once from a tilt to rest with an elastic ease over 1.3 seconds.
- **Rules:** the blue band opens like a blind with the hem riding its edge, and each white card swings from a 10 degree tilt with a back-out ease.
- **Chat:** bubbles swell from the tail; replies slide in behind.
- **Drops:** the section is held while the rail slides sideways and the background turns blue, orange, green and lilac.
- **Visit:** the photo widens from an inset rounded card to full width and the bumps rise.
- **Footer:** the four tile links climb from below their row at different lags, tied to the scroll.

With reduced motion, the entrance and scroll animations and smooth scrolling are off and everything shows at rest. The nav bar still tucks away on scroll down and button fills still run.

## Do's and Don'ts

- Do give each repeated item one of the five accent fills and keep navy text and navy outlines on it.
- Do keep headings in the condensed uppercase display face and everything else in Radio Canada Big.
- Do keep scalloped edges, pill buttons and soft 24px cards.
- Do keep the 1.5px to 2px navy outlines that make flat fills read as stickers.
- Don't use the accents as text colours or add gradients, purple tones or a sixth accent.
- Don't add hard square cards, drop shadows on cards or stock icons.
- Don't add a second display face or a hamburger menu; the four nav pills stay visible.
- Don't add a sixth build card or fifth drop card without a colour rule for it.
- Don't add motion that is not tied to a section's own scene.