---
version: alpha
name: "Board game cafe template by 8B"
description: "A board game cafe and games library site in navy, sky blue, amber and pink quarter-circle tiles with a very wide uppercase display face. Free HTML template by 8B, MIT."
colors:
  primary: "#23264a"
  secondary: "#05a6f7"
  tertiary: "#ffab03"
  accent-pink: "#ff74a6"
  neutral: "#e6ebf1"
  surface: "#e6ebf1"
  on-surface: "#23264a"
  on-primary: "#ffffff"
  field: "#ffffff"
typography:
  headline-display:
    fontFamily: TikTok Sans
    fontSize: 14rem
    fontWeight: "900"
    lineHeight: 0.82
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: TikTok Sans
    fontSize: 3.75rem
    fontWeight: "900"
    lineHeight: 0.96
    letterSpacing: -0.005em
  headline-md:
    fontFamily: TikTok Sans
    fontSize: 1.625rem
    fontWeight: "800"
    lineHeight: 1
  label-echo:
    fontFamily: TikTok Sans
    fontSize: 1.75rem
    fontWeight: "900"
    lineHeight: 0.86
    letterSpacing: 0.01em
  body-lg:
    fontFamily: Onest
    fontSize: 1.375rem
    fontWeight: "500"
    lineHeight: 1.4
  body-md:
    fontFamily: Onest
    fontSize: 1.0625rem
    fontWeight: "400"
    lineHeight: 1.55
  label-md:
    fontFamily: Onest
    fontSize: 0.9375rem
    fontWeight: "600"
    lineHeight: 1.35
    letterSpacing: 0.01em
  button:
    fontFamily: TikTok Sans
    fontSize: 0.9375rem
    fontWeight: "800"
    lineHeight: 1
    letterSpacing: 0.02em
rounded:
  none: 0px
  corner: 1.5em
  pill: 999px
spacing:
  gutter: 2.25rem
  gutter-phone: 1rem
  section: 6rem
  section-phone: 4.5rem
  rule: 2px
  control-height: 3rem
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.corner}"
    padding: 0.8rem 1.5rem
    height: "{spacing.control-height}"
  button-primary-hover:
    backgroundColor: "{colors.accent-pink}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.corner}"
    padding: 0.8rem 1.5rem
    height: "{spacing.control-height}"
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  price-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.headline-md}"
    rounded: "{rounded.pill}"
    padding: 1.25rem 2.5rem
  card-shelf:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 1.75rem 2.25rem
  menu-row:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    padding: 0.45rem 0
  input-field:
    backgroundColor: "{colors.field}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.corner}"
    padding: 0.7rem 1rem
    height: "{spacing.control-height}"
---

# Quarter Turn: board game cafe design system

## Overview

Quarter Turn is the site of a board game cafe and games library: a flat table fee, shelves of games, guides who teach, a week of nights, a kitchen and a long table to hire. The one idea is the quarter turn. Everything is built from a square cut by a quarter circle, a tile that looks as if it could be rotated into place like a game piece. Four loud colours sit side by side as slabs, one per section, and a very wide uppercase face does the shouting. The feeling is warm, playful and organised, the way a well-run game shelf looks.

## Colors

Four hues carry the page and two neutrals support them.

- **Navy `#23264a` (primary):** all text on light grounds, the primary button, the library, long table and visit grounds, the first screen's price bars, form borders, the two-pixel rules, and the Monday and Friday tiles.
- **Sky blue `#05a6f7` (secondary):** the week ground, the first library card, the marker of an open question, the tile beside the guides photo, the corner tiles of two menu groups and the line above each hours row.
- **Amber `#ffab03` (tertiary):** the first screen ground, the loyalty card section, the third library card, the secondary button and the Tuesday and Saturday tiles.
- **Pink `#ff74a6` (accent-pink):** the kitchen ground, the fill that sweeps across a button on hover, the second library card, the guide step pillars, the Wednesday and Sunday tiles and the pink arcs in the visit field.
- **Pale grey `#e6ebf1` (surface, neutral):** the page ground and the guides, prototype night and questions sections, the fourth library card, the Thursday tile, the form panel and the footer.
- **White `#ffffff` (on-primary, field):** text on navy and the fill of the form inputs.

Use one hue per section ground and let neighbouring slabs differ. Text on a saturated tile is always navy, except on navy itself, where it is white.

## Typography

**TikTok Sans** is the display face. Weights 700 to 900 load, with a width axis that the page sets to 125 percent for headings, buttons and labels, and to 150 percent for the long table heading. It is always uppercase here. Headings use weight 900 with tight line height (0.82 to 0.96) and a slightly negative tracking. The hero heading runs from about 2.25rem on a phone to 4.5rem on a wide screen; section headings reach 3.75rem. The long table heading and the footer name are sized from the character count in their `--len` value, up to 14rem and 9rem.

**Onest** is the reading face, weights 400 to 700: paragraphs at regular, lead paragraphs at medium, times, notes and form labels at semibold. It stays in sentence case.

Section labels are set in the display face at 1.75rem and carry a sliced echo underneath, two cut copies of the same text that slice in on scroll for most labels. Labels never wrap, so keep them short. Only the long table heading and the footer name are sized from `--len`; keep it equal to their character count.

## Layout

The page is full width with no centred container. A side gutter of 2.25rem on wide screens (1rem on phones, fluid between) holds the content, and each section is a slab of one ground with 6rem of vertical padding, 4.5rem at 860 pixels and below. Content splits into asymmetric columns: about 3:8 for the library heading and its board, 5:7 for the guides, 4:8 for the kitchen and the questions, 5:7 for the visit details and its form. The library board is a two-by-two of cards, the menu a three-column grid that mixes photos and groups, and the week a four-column board of seven day tiles and one booking cell. Below 861 pixels the columns collapse to one, the week to two, and the bar links give way to a menu button with a full-screen overlay.

## Elevation & Depth

There are no shadows, gradients or blurs. Depth comes from flat colour fields that touch, from navy tiles against saturated ones, and from sections that stay pinned while cards turn over them. Two-pixel navy rules separate list rows. The only layered effect is the sweep of pink across a button on hover.

## Shapes

The signature is one rounded corner on a square: a quarter circle at full radius for tiles and photos, set by a corner value (top-left, top-right, bottom-left or bottom-right). Buttons, form inputs, the form panel and the loyalty card share the same device in miniature: a 1.5em radius on the top-right corner and three square ones. Pillars beside the guide steps and the prototype slip have a large rounded top-right corner. Discs, long pills and arcs appear in photos, the three price bars and the visit field of sixteen arc tiles. The shapes are CSS, not images, so they recolour through the colour variables. Never round all four corners of a card.

## Components

- **button-primary:** navy, white text, display face at 0.9375rem, three rem tall. On hover the corner swaps from top-right to bottom-right and pink sweeps in from the lower left.
- **button-secondary:** the same, in amber with navy text, used on dark grounds.
- **nav-link:** semibold body face with a two-pixel underline that fills to a highlight on hover.
- **price-bar:** the three pill-shaped offers on the first screen, a bold title over a one-line note.
- **card-shelf:** a library card with a coloured ground, a photo in the card's top-right corner, rounded at its bottom-left, a name, a note and five games divided by two-pixel rules, each with players and length.
- **menu-row:** an item and its price on one line, divided by a rule, in four groups on alternating navy and pale grey tiles.
- **input-field:** white, two-pixel navy border, top-right corner rounded, three rem tall.

## Motion

The page loads GSAP with ScrollTrigger and Lenis for smooth scrolling. The one motion idea is the quarter turn: things swing, slide or grow into place around a corner.

- **Bar:** hides when you scroll down and returns on scroll up, with a 0.45 second slide.
- **First screen:** on load the copy rises into place and the three price bars open from a small pill, then their text fades in.
- **Library:** on tall desktop windows the section is pinned and the four cards swing a quarter turn into place one after another; on phones each swings in as it arrives.
- **Guides, kitchen, prototype night, questions:** labels slice in, groups and steps slide in, corner tiles swing.
- **Week:** pinned; seven tiles start shuffled around an empty cell and slide into order.
- **Long table:** the heading widens from 75 to 150 percent and the photo grows from a disc into a long pill.
- **Loyalty card:** ten cells fill one after another as you scroll: quarter shapes grow from their square corner, discs from the centre, arches from the bottom.
- **Visit:** sixteen arc tiles turn into a checkerboard.

With reduced motion the entrance and scroll animations and smooth scrolling are off and everything reads in place. Hover fills and the bar's hide on scroll keep running.

## Do's and Don'ts

- Do keep each section on one saturated ground and change the ground at every section.
- Do use navy for all text on light and saturated grounds, and white only on navy.
- Do keep uppercase, wide TikTok Sans for headings, labels and buttons, and Onest for reading.
- Do build new shapes from one quarter-circle corner on a square.
- Do pair every new scene with a count check, and keep the shelf, week and loyalty counts.
- Don't add shadows, gradients, glass or rounded cards with four soft corners.
- Don't add a fifth hue or a second display face.
- Don't set body paragraphs in the display face or in uppercase.