---
version: alpha
name: "Arcade bar template by 8B"
description: "One-page website for an arcade bar or game venue: cream ground, charcoal blocks and pink, blue and yellow photo frames with notched tabs. Free HTML template by 8B, MIT."
colors:
  primary: "#211e1c"
  secondary: "#5a544f"
  tertiary: "#f5a8c6"
  neutral: "#fefaed"
  surface: "#fefaed"
  surface-white: "#ffffff"
  on-surface: "#211e1c"
  accent-pink: "#f5a8c6"
  accent-blue: "#a9c1ff"
  accent-yellow: "#f5e63d"
  caption: "#5a544f"
  on-dark-muted: "#d3ccc0"
typography:
  headline-display:
    fontFamily: Roboto Serif
    fontSize: 84px
    fontWeight: 300
    lineHeight: 0.98
    letterSpacing: -0.012em
  headline-lg:
    fontFamily: Roboto Serif
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.01em
  headline-quote:
    fontFamily: Roboto Serif
    fontSize: 58px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.008em
  headline-md:
    fontFamily: Roboto Serif
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.005em
  body-md:
    fontFamily: Savate
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Savate
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  button:
    fontFamily: Savate
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
  input:
    fontFamily: Savate
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
  wordmark:
    fontFamily: Climate Crisis
    fontSize: 21px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.01em
rounded:
  sm: 6px
  md: 14px
  lg: 20px
  full: 999px
spacing:
  gutter: 20px
  gutter-phone: 12px
  frame-pad: 6px
  panel-gap: 24px
  row-gap: 8px
  max-width: 1240px
  button-height: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: 48px
  button-secondary:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: 48px
  button-pink:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0 24px
    height: 48px
  photo-frame:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 6px
  event-row:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.lg}"
    padding: 8px
  board-row:
    backgroundColor: "{colors.surface-white}"
    textColor: "{colors.primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.md}"
    padding: 8px 22px 8px 14px
    height: 64px
  badge-league:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 10px 20px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.input}"
    rounded: "{rounded.md}"
    padding: 12px 18px
    height: 50px
---

# Quarter Moon: arcade bar template

## Overview

Quarter Moon is a one-page site for an arcade bar or game venue that runs weekly events, a league and private hire. The idea is a games room turned into a scrapbook: a calm cream page, big rounded charcoal blocks, and photos held in thick colour frames whose title tabs are notched into the frame like a ticket stub. It is playful without neon, pixel fonts or glow. The feeling is friendly and a little cheeky, made for people choosing a night out. All names, prices, scores and addresses in the demo are invented.

## Colors

- **Primary (#211e1c):** warm charcoal. Text, the dark first-screen panel, the league board, the ways-to-play card, the footer card, main buttons, charcoal photo frames and the focus outline.
- **Neutral / surface (#fefaed):** cream. The page and the sticky bar, text on charcoal blocks, text on main buttons and the ground of form fields.
- **Accent-pink (#f5a8c6):** pink photo frames, the Insert coin wall, the league badge, the first O disc of the wordmark, button hover fills and the event row hover.
- **Accent-blue (#a9c1ff):** blue photo frames, the full-screen menu overlay, the owners' panel, the visit info panel, the newsletter block and the second O disc.
- **Accent-yellow (#f5e63d):** yellow photo frames, the round menu button, the champion row of the board, the prices on the dark card and the focus outline on dark blocks.
- **Secondary / caption (#5a544f):** intros, small labels, game names and form status lines on light grounds.
- **On-dark-muted (#d3ccc0):** secondary text on charcoal: the first-screen intro, option text, the board note, footer headings and the base line.
- **Surface-white (#ffffff):** white photo frames, event rows, board rows, the booking form, the newsletter input, small prints and second-style buttons.

Body text on the cream and blue grounds needs 4.5:1 contrast.

## Typography

Three families, each with one job.

- **Roboto Serif** in a condensed width (font-stretch 62%) for headings, tab titles, board initials and scores, and quotes. Weight 300 for large headings and quotes, 400 for tab titles and smaller headings. Sizes are fluid: the first-screen heading runs from 42px on a phone up to 84px, section headings from 40px to 72px, quotes from 30px to 58px, tab titles from 24px to 34px.
- **Savate** for body text (17px, line height 1.5), small labels (14px, weight 500, a little tracking) and buttons and links (16px, weight 600 on buttons).
- **Climate Crisis** for the wordmark only: one heavy weight, all capitals, tight line height. The bar uses 21px; the footer wordmark fills the width, sized from the character count in `--len`.

No italic, no second display face, no tracked capitals other than the wordmark.

## Layout

The page is a cream ground with large blocks. A charcoal panel with the heading, intro and two actions opens the page directly under a sticky bar. Sections then alternate two-column splits (the league copy beside its board, the hire options beside a photo, the visit details beside a photo) with full-width rows (the Insert coin wall, the quote frame, the sideways menu). Content widths stop at 1040 to 1280px; the gutter is 20px, and 12px on phones.

Below 900px the two-column splits of the events, owners, league, hire, visit and footer blocks become one column and the header links give way to a round menu button that opens a full-screen blue overlay. Below 768px the first panel's heading and intro stack, the price options stack, the floor cards turn portrait (4 by 5), padding shrinks and the menu cards widen to 76% of the screen.

## Elevation & Depth

Depth comes from colour blocks, overlap and frames rather than shadows. Photo frames are 6px thick, and tabs cut into them so the image looks tucked behind a label. The floor cards pile on top of each other. The only shadow is soft and low (0 18px 40px, charcoal at 45%, pulled in by 12px); it lifts the small white prints in the owners' block and the league section, and the champion row of the board while it climbs.

## Shapes

Everything is rounded, in three sizes: 20px for frames and blocks, 14px for the photo inside a frame, board rows and form fields, and a full pill for buttons, the badge and the wordmark discs. Small white prints use 6px with a 3px photo. Title tabs have a 16px bottom corner and two concave notches drawn with radial gradients in the frame colour. The league badge and the prints are tilted a few degrees. Photos are cropped to fill (cover); the quote photo is greyscale and darkened.

## Components

- **Buttons:** the main button is charcoal with cream text; the secondary is white; the pink one sits on dark cards; a blue one is in the bar. All are 48px high pills with a 24px side padding (22px on the blue one), and on hover a pink or charcoal fill slides in from both sides in two halves.
- **Photo frame:** a 6px colour frame with a notched tab at the top, bottom or corner. Colours rotate through pink, yellow, blue, white and charcoal.
- **Event row:** a white card with a 150px thumbnail, a date line and a title; it turns pink on hover.
- **Board row:** a white row with a round rank, initials, game name and score; the first row is yellow.
- **League badge:** a tilted pink pill on the board's corner.
- **Input field:** 50px high, a 1.5px charcoal border, 14px corners and a cream ground.

## Motion

The page loads GSAP 3.13.0 with ScrollTrigger and SplitText, plus Lenis 1.3.27 for smooth scrolling. The one idea is things that stack, sort and slide: cards pile, a board re-sorts, rows slide, a menu travels sideways.

- **Load:** the heading, intro and buttons of the first panel rise in over 0.9 seconds, 0.1 seconds apart.
- **Floor:** the four cards stick one under another, each shrinking to 90% and dimming as the next covers it, while three coloured bands drift sideways behind them.
- **Events, quote, hire, contact:** tabs drop in over 0.8 seconds and rows slide in from alternating sides over 0.9 seconds, once, when they pass 88% of the screen height.
- **Owners:** the portrait settles from a 1.24 times zoom and three prints fan out from a pile.
- **League:** the champion row climbs past the others until the six rows read in rank order and the first turns yellow.
- **Ways to play:** the Insert coin rows drift in opposite directions and rest while the card is centred.
- **Menu:** the section holds the screen while the six cards travel left.
- **Reviews:** each quote lights up word by word as it rises.
- **Footer:** the two O discs roll in from beyond the right edge.

With reduced motion on, Lenis, the entrance animations and every scroll animation are off, and the menu becomes a plain sideways scroller. Button fill hovers and the bar hiding on scroll down still work.

## Do's and Don'ts

- Do keep the cream ground and the charcoal blocks; let the three accent colours appear only in frames, fills and the wordmark discs.
- Do put a notched tab on every framed photo and keep frames 6px thick.
- Do keep the heading serif condensed and light, and the wordmark the only heavy display type.
- Do give each new block 20px corners and each button a full pill.
- Do keep the board's rows in rank order in the source; the animation sorts them.
- Don't add neon glows, dark gradients, pixel fonts or scanline effects.
- Don't add drop shadows to frames or cards; keep the one soft shadow for the prints.
- Don't use square corners, outlined cards or a fourth accent colour.
- Don't replace the rail of Insert coin rows with a single static banner; change the one phrase instead.