--- version: alpha name: "Bowling alley template by 8B" description: "A loud one-page design for a bowling alley or entertainment venue: near-black ground, yellow, orange, lilac and sky-blue panels, condensed capitals, stamped and scribbled motion. Free HTML template by 8B, MIT." colors: primary: "#ffd23f" secondary: "#b9a2f5" tertiary: "#f28a2e" surface: "#15130c" surface-raised: "#211e15" outline: "#3d3828" on-surface: "#fffdf5" on-primary: "#15130c" accent-red: "#c8381f" sky: "#8ccbe6" wash-purple: "#8a55e0" wash-green: "#23a26b" wash-blue: "#3d7be0" typography: headline-display: fontFamily: Bricolage Grotesque fontSize: 150px fontWeight: 800 lineHeight: 0.9 letterSpacing: -0.005em headline-lg: fontFamily: Bricolage Grotesque fontSize: 86px fontWeight: 800 lineHeight: 0.9 letterSpacing: -0.005em headline-md: fontFamily: Bricolage Grotesque fontSize: 36px fontWeight: 800 lineHeight: 0.92 figure: fontFamily: Bricolage Grotesque fontSize: 30px fontWeight: 800 lineHeight: 1 body-md: fontFamily: Radio Canada Big fontSize: 16px fontWeight: 400 lineHeight: 1.5 lead: fontFamily: Radio Canada Big fontSize: 15px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.01em label-sm: fontFamily: Radio Canada Big fontSize: 12px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0.04em label-pill: fontFamily: Radio Canada Big fontSize: 11px fontWeight: 700 lineHeight: 1 letterSpacing: 0.05em button: fontFamily: Radio Canada Big fontSize: 13px fontWeight: 600 letterSpacing: 0.04em rounded: md: 14px xl: 40px full: 999px spacing: gap-tile: 12px gap-mosaic: 4px gutter: 44px gutter-bar: 12px section: 160px components: button-primary: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 24px height: 46px button-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 24px height: 46px button-outline: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 24px height: 46px pill: backgroundColor: "{colors.on-surface}" textColor: "{colors.surface}" typography: "{typography.label-pill}" rounded: "{rounded.full}" padding: 0 12px height: 26px tile: backgroundColor: "{colors.surface-raised}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 28px panel-yellow: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 44px leaderboard-row-first: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.figure}" rounded: "{rounded.md}" height: 64px input-field: textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 48px --- # Pinfall Lanes: Bowling alley template by 8B ## Overview A one-page design for a bowling alley or entertainment venue that sells an evening: lanes, a lane-side kitchen, a bar, leagues, a Friday glow night and party packages. The one idea is a night out in poster colours. The ground is near-black, and large rounded panels in yellow, sky blue, orange and lilac sit on it like signs in a bowling hall. It should feel noisy, friendly and a little silly. The demo venue and every figure in it are invented. ## Colors - **Yellow** `#ffd23f` is the main accent: the menu panel, the questions panel, the contact form, the Big birthdays panel, the top leaderboard row, the yellow buttons, the footer wordmark and links, and the focus ring. - **Near-black** `#15130c` is the page ground, the header bar, the default button fill, and the text colour on every yellow, orange and sky-blue surface. - **Cream** `#fffdf5` is text on the dark ground, the fill of the league pills and the text of the party price pills. - **Lilac** `#b9a2f5` marks the Lanes tile word, the Office socials panel, the Call tile and the glow heading. - **Orange** `#f28a2e` marks the Kitchen tile word, the Kids' parties panel and the Email tile, and warms the edge of the two balls. - **Sky blue** `#8ccbe6` is the ground of the beginners' hour and the Lane takeover panel. - **Red** `#c8381f` is used only for the hover sweep on buttons, the Book now stamp and the Bar tile word. - **Purple, green and blue** `#8a55e0`, `#23a26b`, `#3d7be0` are the colour bands behind the three league portraits; purple and blue also form the two glow pools. - **Raised surface** `#211e15` and **outline** `#3d3828` build the tiles, the leaderboard and the footer panel. ## Typography Bricolage Grotesque carries every display line: only weight 800 at 75% width loads, set in capitals with a line height of about 0.9. It gives the headings, bowler names, prices, ranks, scores, footer wordmark and footer links, and the stamp label. The hero heading scales from 58px on a phone to 150px on a wide screen; section headings run from 44px to 86px; item titles from 26px to 36px. The glow heading reaches 150px. Radio Canada Big is the working face. Body copy is 16px at weight 400. Lead lines are 15px, weight 500, uppercase. Labels and the table header are 12px, weight 600, uppercase with 0.04em tracking. Buttons are 13px, weight 600, uppercase. Pills are 11px at weight 700. Never set body copy in the condensed face. ## Layout The page is one column of sections with gaps of 88px to 160px. The side gutter is 20px on a phone and up to 44px on a desktop. A fixed header bar floats 12px from the edges. The first screen has a two-line heading on the left, a lead and button aligned right, and three tiles in a row; below 861px they stack. League portraits and the contact mosaic run edge to edge with a 4px gap; the menu, beginners' hour and questions are rounded panels inset by 12px. The menu panel keeps a round photo stage on the left; on a phone the stage becomes a small sticky disc under the header. The leaderboard has four columns on desktop and three on a phone, with the lane and day on a second line. The contact mosaic has four columns, then two below 861px and one below 481px. ## Elevation & Depth There are no box shadows. Depth comes from flat colour planes lying on the dark ground, tiles one step lighter than it, and a 1px outline on tiles and the leaderboard. League photos are greyscale and multiplied over a colour band, so the colour reads as a stage light. The only glow is a text shadow on the glow heading, in lilac and purple, which appears as the section darkens. ## Shapes Large panels use a 40px radius on wide screens, tiles and inputs 14px, buttons, pills and the header bar a full pill. Dish photos sit in a circle with a dashed ring 14px outside it. The two balls are CSS spheres with a radial gradient from the yellow. The Book now stamp is a scalloped red seal with a dashed inner ring and a cream label. Icons are thin outline strokes, 1.6px on the tiles and 1.8px on the contact tiles, with round caps. The two brush scribbles use an SVG displacement filter so the stroke looks hand-drawn. ## Components - **button-primary** is the near-black pill with yellow text, used on the beginners' hour and the form. **button-yellow** is the yellow pill used in the first screen, leagues, glow and parties. **button-outline** is the transparent pill with yellow text and border used for Gift cards in the header (hidden below 721px). All three fill with a red circle on hover where hover exists. - **pill** is the cream label with the league name; the party prices use the same pill inverted, near-black with cream text. - **tile** holds a big coloured word, an outline icon, a sentence and a fact line. - **panel-yellow** is the menu and questions surface. - **leaderboard-row-first** shows the leader in yellow. - **input-field** is a 48px field with a 14px radius and a thin translucent ink border, on the yellow form. ## Motion The page loads GSAP 3.13, ScrollTrigger and Lenis 1.3 from jsDelivr; Lenis smooths scrolling. The motion idea is stamp and slide: things land oversized, roll in or sort themselves. - **Entrances.** Headings lift out of a clip with a 2 degree tilt over 0.9s (power3.out). Tile words and the footer stamp land at 1.45 times size and turned, then press flat in 0.6s (back.out). The two brush scribbles draw in 1.1s, one stroke after another. Each plays once, with a delay of 0.08s times its position in the group. - **First screen.** The lead and button also lift in on load through a 0.7s CSS keyframe. - **Leagues.** Six colour bands per card slide sideways through the portrait, scrubbed with scroll, one card behind the last, settling on purple, green and blue. - **Menu.** The round stage stays in view with the burger photo in it. The fries, shake and cocktail photos roll in from the left edge, turning about 200 degrees, as the second, third and fourth menu groups scroll up, each landing on top. - **Glow.** One custom property, `--gl-night`, runs from 0 to 1 while the section scrolls in. The ground goes from yellow to black, the text lightens, the heading glows, two pools fade in, and the photo regains its colour. - **Leaderboard.** Rows begin in the order given by their `data-day` and slide into rank order with a small sideways nudge. - **Parties.** The section is held while the row of panels travels left. - **Questions.** Two balls roll in from opposite edges. - **Footer.** The wordmark is split into letters that stand up one after another. With reduced motion on, Lenis, the entrance effects and every scroll scene are switched off, and the page reads in full: the glow section stays in its dark state, the leaderboard shows rank order and the party panels sit in a grid. The four dish photos are stacked in one disc, so only the top one, the cocktail, shows. The header bar still hides on downward scroll, and hover fills still run. ## Do's and Don'ts - Do keep the near-black ground and let the panels carry the colour; one loud colour per panel. - Do set display lines in the condensed capitals and keep body copy in the working face. - Do keep buttons as pills with the red hover sweep. - Do keep photos of people in the greyscale and colour-band treatment. - Do set `--len` on the footer wordmark to the new name's character count. - Don't add drop shadows, gradients across whole panels, or glass effects. - Don't add a second display face or lowercase headings. - Don't use red as a panel colour; it belongs to hover, the stamp and one word. - Don't change the glow section's colours by hand; recolour them through the variables so the night value still drives them. - Don't put real people's names on the leaderboard or captain cards without permission.