---
version: alpha
name: "Burger restaurant template by 8B"
description: "One-page site for a burger bar or casual diner: acid lime, deep green and black with check paper, pill buttons under hard green shadows and scalloped stickers. Free HTML template by 8B, MIT."
colors:
  primary: "#12801f"
  secondary: "#0b3a17"
  tertiary: "#e2382a"
  neutral: "#d7f36b"
  surface: "#ffffff"
  on-surface: "#131510"
  lime: "#d7f36b"
  ink: "#131510"
  forest: "#0b3a17"
  green: "#12801f"
  sticker-red: "#e2382a"
typography:
  headline-display:
    fontFamily: Bricolage Grotesque
    fontSize: 124px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -0.012em
  headline-lg:
    fontFamily: Bricolage Grotesque
    fontSize: 92px
    fontWeight: 800
    lineHeight: 0.94
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Bricolage Grotesque
    fontSize: 36px
    fontWeight: 800
    lineHeight: 1
  price:
    fontFamily: Besley
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
  quote:
    fontFamily: Besley
    fontSize: 27px
    fontWeight: 700
    lineHeight: 1.25
  body-lg:
    fontFamily: Asta Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
  body-md:
    fontFamily: Asta Sans
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Asta Sans
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Asta Sans
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0.12em
  button:
    fontFamily: Asta Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.1
rounded:
  field: 14px
  card: 22px
  photo: 26px
  full: 999px
spacing:
  gutter: 64px
  section-padding: 140px
  nav-height: 76px
  rule-weight: 1.5px
  shadow-small: 3px
  shadow-large: 6px
  quote-board-max: 1060px
components:
  button-primary:
    backgroundColor: "{colors.green}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "6px 7px 6px 26px"
    height: 54px
  button-icon:
    backgroundColor: "{colors.green}"
    textColor: "{colors.surface}"
    rounded: "{rounded.full}"
    height: 46px
  nav-bar:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.ink}"
    height: 76px
  text-link:
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: "0 0 9px"
  menu-cell-lime:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.ink}"
    padding: "32px"
  menu-cell-green:
    backgroundColor: "{colors.forest}"
    textColor: "{colors.surface}"
    padding: "32px"
  card-quote:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.quote}"
    rounded: "{rounded.card}"
    padding: "26px 28px 24px"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.field}"
    padding: "12px 16px"
    height: 50px
  badge-sticker:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    height: 156px
---

# Dilly's

## Overview

Dilly's is a one-page website for a smash-burger bar or casual diner that wants to be loud and friendly. The one idea is check paper and stickers: bands of acid lime, white, black and deep green take turns down the page, a heavy condensed grotesque shouts the headings, and a bold serif prices the food. It suits a counter-service place with a short menu and group bookings. The feeling is noisy, warm and slightly cheeky. The bar and its prices are invented.

## Colors

Six custom properties, `--color-1` to `--color-6`. Primary and secondary below are the green pair; neutral and surface are the page grounds.

- **Lime (#d7f36b, neutral):** the navigation bar, the first, third and fifth menu cells, the pickles, house rules and booking grounds, headings and numerals on dark bands, the footer's check strip and column heads.
- **Ink (#131510, on-surface):** text, the 1.5px rules between rows, the griddle and nights bands, the footer, the black band that crosses the house rules, form borders.
- **Green (#12801f, primary):** filled buttons, round icon buttons, the plus icons on the questions. White text on it passes contrast.
- **Forest (#0b3a17, secondary):** the opening's text panel, every second menu cell, the quotes band, the hard shadows under buttons, cards and stickers.
- **White (#ffffff, surface):** the menu, room and questions grounds, sticker faces, quote cards, form fields, text on dark bands.
- **Sticker red (#e2382a, tertiary):** only the 10px diamond above the label on each sticker. Never a fill.

## Typography

**Bricolage Grotesque** at weight 800 and 75% width is the shout: section headings, burger and method names, question text, sticker labels, the huge day names and house rules. **Besley** is the voice of money and mouth: prices, step numbers and pickle names in bold upright, the wordmark in the bar and the footer and the customer quotes in bold italic. **Asta Sans** does the plain work: text at 400, buttons at 700, nav links at 500, and 13px uppercase labels at 700 with 0.12em tracking.

- `headline-display` sets the day names (56px to 124px) and the house rules (44px to 116px); `headline-lg` (44px to 92px) the section headings. All scale with the viewport width.
- `price` is 24px to 30px, `quote` 22px to 27px, `body-lg` 17px to 20px.

## Layout

Sections are full-bleed bands with a side gutter of 20px to 64px and vertical padding of 84px to 140px. Several open with a two-column head: heading left, a short paragraph right.

- Opening: one screen, 100% of the viewport height and at least 600px. A photo fills the left half and a forest panel holds the h1, text, three facts and two actions on the right.
- Menu: a two-column board of six square copy cells and six square photo cells, rows alternating sides, then a two-column list of six sides.
- Griddle: five columns of moves under a photo strip. Pickles: photo and list in two columns, the photo sticky. Room: a photo column beside three stories.
- Questions: sticky heading on the left. Quotes: two staggered columns, 1060px at most. Booking: photo left, facts and form right.

At 899px the grids become one column and the bar folds into a menu button; the opening and quotes change again at 767px, putting the forest panel above the photo.

## Elevation & Depth

Depth is made by hard offset shadows with no blur, all in forest: 3px by 4px under buttons, round buttons and the question icons, and 6px by 8px under quote cards, the booking form and the pickles photo. Each sticker has a forest copy offset behind its white face. Sticky photo columns add more.

## Shapes

- Buttons and icons are pills and circles (999px, 50%); form fields have 14px corners, quote cards 22px, the pickles and nights photos 26px. Menu photos stay square; room photos have square corners on desktop and 22px corners on phones.
- Stickers are a scalloped star shape cut in CSS, white with a forest copy behind, 150px to 156px wide on desktop and 116px to 122px on phones.
- Check paper is made of `conic-gradient`: the footer strip's 28px cells, the underline on links, and the mask that reveals photos.
- Small rotated squares are bullets (9px) and the red sticker diamond (10px).

## Components

- **button-primary:** green pill, 54px tall, white label and a ringed arrow circle. It carries a forest shadow; on hover it slides 3px by 4px onto the shadow and the arrow moves 3px. In the opening the shadow is lime.
- **button-icon:** 46px green circle with a white icon (map pin, phone, menu). On hover it turns ink with a lime icon.
- **nav-bar:** lime, 76px tall (64px on phones), a 1.5px ink line below, the italic wordmark in the centre.
- **text-link:** 16px at 700 with a dotted check underline that shifts on hover; nav and footer links draw theirs in.
- **menu-cell-lime and menu-cell-green:** square cells with a name, a note and a price pinned to the foot, ink text on lime, or white text with a lime name and price on forest.
- **card-quote:** white, 2px ink border, 22px corners, 6px by 8px shadow; the second and fifth are lime.
- **input-field:** white, 2px ink border, 14px corners, 50px minimum height, a green focus outline.
- **badge-sticker:** the scalloped sticker with a red diamond above two or three short lines.

## Motion

GSAP 3.13.0, ScrollTrigger and Lenis 1.3.27 (lerp 0.1) from jsDelivr. The idea is things thrown onto a table: headings slam, stickers stamp, photos arrive through checks, quotes land.

- **slam** (`data-8b-motion="slam"`): the heading drops 48px, stretched, squashes to 93% and rebounds. **stamp:** the sticker lands from 1.7 scale and a -26 degree turn with an overshoot, 0.6s. **checks:** a photo is revealed by a check mask in two 0.5s beats. All fire once when the element is 82% to 85% down the screen.
- **Navigation:** the bar slides away after about 24px of downward scroll and returns on upward scroll.
- **Opening:** on load the photo zooms in and the text rises in turn, then the photo drifts slowly in a CSS loop that pauses off screen.
- **Menu:** each cell slides in from the side as it rises to 52% of the screen, alternating by row, while its photo settles from a zoom.
- **Griddle:** on screens 900px wide and 640px tall the stage is held for 150% of the viewport height; the photo flattens from a squeeze, then the heading and the five moves arrive.
- **Room:** on desktop the photo column is held while three photos replace each other through checks; a seam draws down.
- **Rules:** a black band holds the screen's middle and re-colours the rule inside it.
- **Quotes:** six cards settle from displaced, tilted starts. **Footer:** the check strip slides sideways.

With reduced motion on, the entrance and scroll animations and smooth scrolling are switched off and the page reads in full; the bar's hide-on-scroll and hover transitions keep running.

## Do's and Don'ts

- Do keep the prices in Besley and the headings in condensed Bricolage; do not add a fourth face.
- Do put a hard forest shadow under filled buttons and cards, with no blur.
- Do keep red to the sticker diamond; do not use it for buttons, text or alerts.
- Do keep corners pill-round on actions and 14px to 26px on boxes.
- Do keep sticker, check and strip shapes as CSS; do not swap them for icon packs or clip art.
- Don't add gradients, glass blur or stock illustrations.
- Don't animate with a shared scroll script on top: use slam, stamp or checks, and keep them one-shot.
- Don't put lime text on white: it fails contrast. Lime is for ink and forest grounds, or a ground itself.