---
version: alpha
name: "Bakery template by 8B"
description: "A bright, sticker-and-tray design for a pre-order neighbourhood bakery: heavy grotesque headlines, coloured card panels and handwritten notes on white. Free HTML template by 8B, MIT."
colors:
  primary: "#e0007a"
  secondary: "#0e0b16"
  tertiary: "#3b308f"
  neutral: "#ffffff"
  surface: "#ffffff"
  on-surface: "#0e0b16"
  accent-sunflower: "#ffd24a"
  accent-butter: "#faed8f"
  accent-orange: "#f9a220"
  accent-fuchsia: "#fd48f2"
  accent-ice: "#a6f6f8"
  accent-cyan: "#1ce8ed"
  accent-blush: "#ffdbfd"
  accent-lavender: "#a58bf0"
  wine: "#670a2e"
  midnight: "#1b1545"
typography:
  headline-display:
    fontFamily: Bricolage Grotesque
    fontSize: 96px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 80px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Bricolage Grotesque
    fontSize: 54px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.035em
  title-card:
    fontFamily: Bricolage Grotesque
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1
    letterSpacing: -0.015em
  body-lg:
    fontFamily: Host Grotesk
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.45
  body-md:
    fontFamily: Host Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.45
  note-hand:
    fontFamily: Playpen Sans
    fontSize: 19px
    fontWeight: 500
    lineHeight: 1.18
  button:
    fontFamily: Bricolage Grotesque
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1
  label-sm:
    fontFamily: Bricolage Grotesque
    fontSize: 12.5px
    fontWeight: 700
    lineHeight: 1.1
rounded:
  sm: 10px
  md: 18px
  lg: 52px
  full: 9999px
spacing:
  panel-gap: 12px
  panel-padding: 64px
  tray-gap: 16px
  card-padding: 10px
  nav-inset: 14px
  max-tray: 1180px
  max-text: 760px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 15px 20px
    height: 46px
  button-primary-lid:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    width: 48px
  button-secondary:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.secondary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  nav-pill:
    backgroundColor: "{colors.accent-butter}"
    textColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    padding: 10px 15px
  card-bake:
    backgroundColor: "{colors.accent-sunflower}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.card-padding}"
  badge-cyan:
    backgroundColor: "{colors.accent-cyan}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 5px 9px
  badge-dark:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 5px 9px
  sticker-burst:
    backgroundColor: "{colors.accent-orange}"
    textColor: "{colors.secondary}"
    size: 92px
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.sm}"
    padding: 14px 16px
---

# Okapi Bakehouse design system

## Overview

Okapi is the look of a neighbourhood bakery that sells a monthly box of six bakes by pre-order. The one idea is a stack of loud colour panels on a white page, each holding tilted cards, starburst stickers and a handwritten note, like a bakery counter covered in labels. Friendly, a little cheeky and very legible: heavy headlines, flat colour, no photo filters. It suits a bakery, cafe or cake shop that wants to feel hand-made and cheerful. The shop name and every price are invented demo content.

## Colors

The page is white; colour comes in large flat fields, one per section.

- **Primary, magenta (#e0007a):** the main button label and lid cover, the favicon, the morning shift times.
- **Secondary, ink (#0e0b16):** body text, the face under the button lids, dark badges, field borders, the cake card.
- **Neutral and surface, white (#ffffff):** page ground, photo frames, fields, chips, footer text.
- **Accent sunflower (#ffd24a):** the logo tab, the favourites panel, the order form, yellow cards and the footer wordmark.
- **Accent butter (#faed8f):** the nav pills, the reasons panel and the photo frames in the favourites panel.
- **Accent orange (#f9a220):** starbursts, the secondary button and the sun's rim.
- **Accent fuchsia (#fd48f2):** the oven list panel, the phone menu overlay, the first review ribbon and the striped band behind the tray.
- **Accent ice (#a6f6f8):** the opening panel and the FAQ blobs.
- **Accent cyan (#1ce8ed):** link underlines and fills, cyan badges, the gift panel and the second review ribbon.
- **Accent blush (#ffdbfd):** the pre-order steps panel, the cake frame fill and the pale end of the oven list fade.
- **Tertiary, violet (#3b308f):** the footer ground, handwritten notes, the dot print and the stripes.
- **Accent lavender (#a58bf0):** lavender cards in the tray, the steps fan and the reasons.
- **Wine (#670a2e):** the ring and mark of the reasons section and the text of the second review ribbon.
- **Midnight (#1b1545):** the starting ground of the morning shift section.

## Typography

Three open source Google Fonts families.

- **Bricolage Grotesque** carries headings, the wordmark, the oven list, reasons, quotes, buttons and badges. Headings are weight 800, tight (-0.035em), mostly at 0.9 line height. The hero heading scales up to 96px (40px on a phone); section headings run from about 30px to 92px. Buttons use 700, nav pills 600 at 15px. Text is sentence case, except the 11px tracked capitals of "Bakehouse" beside the wordmark.
- **Host Grotesk** is the reading face: 17px regular at 1.45 line height, 18px for the hero lead, 16px in fields, 14.5px on cards.
- **Playpen Sans** at weight 500 is the handwritten voice: short notes beside headings (mostly violet), the step labels, reviewer names, the two cake quotes and the sleeve note, often rotated a few degrees.

Do not add a fourth family; a highlighted phrase sits on a solid chip.

## Layout

A column of full-width rounded panels, each with its own colour, separated by a 12px white gap. Panel padding is fluid, from 20px on a phone to 64px on a wide screen. Content sits in centred blocks 740px to 1200px wide (tray 1180px, FAQ 740px). The tray overlaps the bottom of the white print card above it by 110 to 150px, so the cards seem pulled up.

At 1100px and below the tray goes from six columns to three, and to two under 760px. Under 900px a menu button opens a full-screen fuchsia overlay with 44px links, the step cards stack in one column of at most 420px, and the morning shift column stops being sticky.

## Elevation & Depth

Depth comes from colour fields, tilt and overlap more than from shadow. Cards and photo frames are rotated one to four degrees, as if dropped on a table. The one shadow is long and soft (0 22px 40px -22px, ink at 55%) under cards and photo frames. A striped fuchsia and violet band covers the lower part of the tray.

## Shapes

Section panels use a large radius that scales from 28px to 52px. Cards and photo frames use 18px, with photos inside cropped to 4:5 (4:3 in the steps) at 10 to 12px. Buttons, fields and lids use 10px. Badges and pills are fully round, icon buttons are circles. Starbursts are a 12-point star clip, and review quotes are separated by a small four-point star. Stripes run at 118 degrees.

## Components

- **button-primary:** a magenta label and a square lid 3px apart; on hover the lid's magenta cover flips open to show the ink face and the arrow moves right.
- **button-secondary:** the same pattern, smaller, in orange.
- **nav-pill:** a pale yellow pill that fills with cyan from the bottom on hover. The logo is a sunflower tab with the wordmark at 28px.
- **card-bake:** 10px padding, a photo, a 24px title, a 14.5px line, tag badges and a price, each card on a different ground.
- **badge-cyan and badge-dark:** 12.5px bold pills for tags.
- **sticker-burst:** an orange starburst carrying a year or a notice.
- **input-field:** white, 2px ink border, 10px corners; focus shows a 3px magenta outline.

## Motion

The page loads GSAP, ScrollTrigger and SplitText, plus Lenis for smooth scrolling. The idea: things dealt, dropped and stamped onto the counter with a bounce. Entrances use back and elastic easings; the larger scenes are scrubbed to the scroll.

- **Opening:** on load the heading, text, button and note rise in one after another, and the six bake cards jump up from below in turn and land tilted (CSS keyframes).
- **Oven list:** the line nearest the screen's middle is full width, heavy and dark; the others narrow, thin and fade to pale pink.
- **Steps:** on wide screens the four cards are dealt out from a stack; on phones they slide in from alternating sides.
- **Favourites:** photo cards drop in with an elastic bounce and year stickers stamp on, turned and large.
- **Morning shift:** the ground runs from midnight to sunflower while the sun disc climbs and grows.
- **Reasons:** six stickers fly from the round mark to their places, and the ring of text turns with the scroll.
- **Reviews:** two tilted ribbons open like scissors and each row loops sideways, pausing off screen, on hover and on focus.
- **Cakes:** a pink field widens from the cake card to the whole frame while the quotes and the platter photo slide out.
- **Gift:** the card slides up out of its sleeve and turns to its resting tilt while the photo drifts up.
- **Headings, notes, photos:** headings and the footer wordmark pop in letter by letter, notes write themselves in, the counter photo tumbles in.

With reduced motion the entrances, scrubbed scenes, the review loop and Lenis are switched off and the page reads in full; the nav bar still slides away on scroll down and hover transitions remain. Keep the ids, `data-8b-section`, `data-8b-motion` and the classes AGENTS.md lists.

## Do's and Don'ts

- Do keep a white page with one saturated field per section and the 12px gap.
- Do tilt cards and stickers a few degrees, and keep the soft long shadow.
- Do set headings in Bricolage Grotesque 800 with tight tracking, in sentence case.
- Do keep handwritten notes short and in Playpen Sans.
- Do give the primary action the magenta label with the flipping lid.
- Don't add soft gradients, glass blur or a dark theme; flat colour is the style.
- Don't square off the corners or use thin hairline borders.
- Don't use stock icons or emoji; bursts are CSS and SVG.
- Keep the Design: 8B footer link unless the site owner asks to remove it.