---
version: alpha
name: "Korean barbecue restaurant template by 8B"
description: "Korean barbecue restaurant one-pager on white, pale grey, charcoal and black grounds, with thin column rules, square corners and one hot red that marks the heat. Free HTML template by 8B, MIT."
colors:
  primary: "#0b0b0b"
  secondary: "#626262"
  tertiary: "#f2364b"
  neutral: "#f1f1f1"
  surface: "#ffffff"
  charcoal: "#1a1a1a"
  caption-on-dark: "#9c9c9c"
typography:
  headline-display:
    fontFamily: Asta Sans
    fontSize: 300px
    fontWeight: 600
    lineHeight: 0.86
    letterSpacing: -0.065em
  headline-lg:
    fontFamily: Asta Sans
    fontSize: 104px
    fontWeight: 600
    lineHeight: 0.9
    letterSpacing: -0.065em
  headline-statement:
    fontFamily: Asta Sans
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.045em
  headline-md:
    fontFamily: Asta Sans
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.04
    letterSpacing: -0.045em
  body-md:
    fontFamily: Asta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.01em
  body-sm:
    fontFamily: Asta Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: -0.005em
  label-caps:
    fontFamily: Asta Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0em
  button:
    fontFamily: Asta Sans
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0em
  script:
    fontFamily: Playwrite US Trad
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
rounded:
  none: 0px
  sm: 3px
spacing:
  gutter: 40px
  max-width: 1600px
  columns: 3
  nav-height: 48px
  section-padding: 150px
  head-gap: 96px
  text-inset: 16px
  side-column-padding: 40px
  room-gap: 128px
  night-grid-gap: 4px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: "0 60px 0 24px"
    height: 56px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
  button-light:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: "0 60px 0 24px"
    height: 56px
  text-link:
    textColor: "{colors.primary}"
    typography: "{typography.label-caps}"
    padding: "0 0 3px"
  tag-cut:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "5px 9px 6px"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    padding: "6px 0 12px"
    height: 44px
  card-set:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "28px 24px 24px"
  card-set-hot:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "28px 24px 24px"
---

# Hwaro

## Overview

Hwaro is a one-page website for a Korean charcoal barbecue where guests grill at their own table. The one idea is heat as the only colour: black, white and two greys ruled into three columns by hairlines, and one hot red for whatever burns. One tight sans carries English and Hangul. It suits a table-grill restaurant whose guests want to know what they will cook and where they will sit. The feeling is smoky, crisp and sure. The restaurant, people and prices are invented.

## Colors

Seven custom properties, `--color-1` to `--color-7`; rules are mixes of them.

- **Primary (#0b0b0b):** ink: text on light grounds, black buttons, the Most booked badge, night, footer and menu grounds, the guide's dark card, night caption boxes. At 9% it draws the light rules.
- **Surface (#ffffff):** the top bar, grill, guest and question grounds, set cards, the submit button, text on dark. At 12% it draws the dark rules.
- **Neutral (#f1f1f1):** opening, grilling guide, banchan and set menu grounds.
- **Charcoal (#1a1a1a):** rooms, history and booking grounds; most photo frames.
- **Tertiary (#f2364b):** the only accent: nav badge, index marker, night times, lit step numbers, burning words, the most booked card, history rule, field corners, hovers, footer handwriting. 3.9:1 on white, so on light grounds only a fill or a mark.
- **Secondary (#626262):** small text on light grounds (roles, notes, unlit steps, set labels). 6.1:1 on white.
- **Caption on dark (#9c9c9c):** small text on dark grounds (intros, captions, form labels, footer headings). 6.3:1 on charcoal.

## Typography

**Asta Sans** loads from Google Fonts' servers as a variable face, weights 400 to 700, in slices that include Korean, with size-adjusted Arial fallbacks. One family keeps the Hangul in the English voice: 600 for titles, labels and buttons, 500 for statements and Hangul, 400 for text. **Playwrite US Trad**, a handwriting face at 400, appears once: the tilted red line across the foot of the footer wordmark (`script`, 26px to 62px).

- `headline-display`: the two titles that fill the grid on one line and the footer wordmark, sized by their character count (`--len`), about 300px at 1440px.
- `headline-lg`: section h2s, 50px to 104px, each with a Hangul subtitle below (14px to 18px, weight 500, 66% of the text colour).
- `headline-statement`: the h1, guest quotes and banchan statement, 27px to 54px.
- `headline-md`: h3s and set prices, 26px to 40px; questions and dish names use it smaller.
- `body-md` is 16px, `body-sm` 14px.
- `label-caps` and `button`: 12px uppercase, no added tracking.

Headings are sentence case at -0.065em or -0.045em; uppercase is only for labels and buttons.

## Layout

One three-column grid inside `.l-wrap`: the window less a 20px to 40px gutter, at most 1600px, centred. `.l-rules` draws it on every section: hairlines at the edges and thirds, kept on phones.

- Sections take 96px to 150px of vertical padding; text in the right two thirds starts 16px from a rule.
- Grill, guide, guests, questions and booking keep a side column in the first third and content in the other two; the grill and guide sides and the guest portrait stick under the 48px bar.
- Opening: a light screen, the h1 across the grid over a photo, the text column and a lower photo, one per third.
- Room photos span the grid at 2:1; the night is a 3 by 3 grid with 4px gaps; the guide a 2 by 2 grid read clockwise.

At 860px the bar keeps logo and menu button and grill, guide and sets take one column; at 760px most other sections stack, the guest portrait narrows to a 32% column and room photos turn 4:5.

## Elevation & Depth

No shadows. Depth comes from grounds alternating pale grey, white, charcoal and black, from sticky columns, and from the rooms: behind each photo a window-wide copy, blurred 44px and saturated at 50% opacity, glows past its edges.

## Shapes

- Square corners everywhere but cut tags, step number boxes, check boxes and input focus outlines (3px, `--radius-1`). No pills; the menu buttons' red hover grows as a circle until it fills the square.
- 1px hairlines for rules, dividers and field underlines.
- Drawn in CSS: the logo mark (ink bars with a red end), a red triangle in each field's corner, red squares on the history rule, check boxes and plus marks.
- Crops: 4:5 greyscale and 3:4 in the opening, 3:2 grill, 2:1 rooms, 3:4 portraits.

## Components

- **button-primary:** ink, 56px tall, label left, plus right. On hover three red columns rise from the foot, middle first (0.5s), and the label turns ink.
- **button-light:** the same in white, for the form's submit.
- **text-link:** a 1px underline; on hover a 2px red line draws from the left (0.45s).
- **tag-cut:** 13px at weight 500, a 1px border at 24% of the text colour.
- **input-field:** no box, 17px white text over a 22% white underline, a grey uppercase label, the red corner, a 2px red focus outline.
- **card-set:** white: label, title, price, checked items and a black button at the foot.
- **card-set-hot:** red, its grey texts turned ink, with a black Most booked badge. The nav badge is red with ink text.

## Motion

GSAP 3.13.0, ScrollTrigger and Lenis 1.3.4 (lerp 0.085), from jsDelivr. The idea is burning: red passes through words on their way to ink, and red fields rise from the foot.

- **Ember** (`data-8b-motion="ember"`, guest quotes and banchan statement): words burn from ash grey through `--ember-hot` to `--ember-ink`, one by one with the scroll.
- **Navigation:** the bar slides away (0.5s) once you scroll down past 160px, back on scroll up.
- **Opening:** on load the covers label, h1 and text lift 18px and fade in (0.9s) and the h1 burns once (about 1.8s). Photos open upward from their foot (1.1s), settling from 1.2 scale; banchan photos (`rise`) too.
- **Grill:** right photos slide out from over the left ones; a red index marker follows the group in view.
- **Rooms, banchan, sets, questions:** headings drift in from the right (`drift`); room photos widen from the middle column to the grid as their glow brightens.
- **Night:** pinned, the 21:00 cell shrinks from full screen into the middle as the other eight close in.
- **Guide:** pinned, the dark card travels clockwise, turning the step under it light on dark.
- **Guests:** each next portrait wipes up over the last.
- **History:** pinned, the years slide left as the red rule fills.
- **Sets:** the most booked card fills red from its foot, its boxes checking one by one.
- **Booking:** the title's three column slices slide together into one line.

Hovers ease on cubic-bezier(0.6, 0, 0.2, 1) or (0.7, 0, 0.2, 1), entrances on cubic-bezier(0.2, 0.7, 0.1, 1). Reduced motion switches off Lenis, the entrances and the scroll animations; the page reads in full, the hot card red. The bar still hides and hovers work. Keep `--len` true to each line, nine night cells with `.nt-cell--main` in the middle, four steps and one `.ss-card--hot`.

## Do's and Don'ts

- Do keep red the only colour, never running text on a light ground.
- Do keep the three columns and their hairlines on every section.
- Do keep corners square, with 3px only on tags, step numbers, check boxes and fields.
- Don't add rounded cards, pills, shadows, gradients or stock icons.
- Don't add a second sans or a serif; the handwriting stays on the footer line.
- Do keep 12px uppercase labels and tight sentence-case headings with their Hangul subtitles.
- Do keep the motion about heat; don't add unrelated parallax.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.