--- version: alpha name: "Dance studio template by 8B" description: "Bold uppercase grotesque type, pale blue, red and yellow shapes and hand-drawn loops for a dance studio or class-based school with a timetable and passes. Free HTML template by 8B, MIT." colors: primary: "#15161c" secondary: "#575c6b" tertiary: "#d03e33" neutral: "#f4f5f7" surface: "#ffffff" on-surface: "#15161c" accent-yellow: "#f7d02c" pale-blue: "#cfe0ea" deep-blue: "#19437f" ink-navy: "#1e1f36" typography: headline-display: fontFamily: Host Grotesk fontSize: 120px fontWeight: 400 lineHeight: 0.96 letterSpacing: -0.03em headline-lg: fontFamily: Host Grotesk fontSize: 96px fontWeight: 400 lineHeight: 0.96 letterSpacing: -0.03em headline-md: fontFamily: Host Grotesk fontSize: 80px fontWeight: 400 lineHeight: 0.96 letterSpacing: -0.03em headline-sm: fontFamily: Host Grotesk fontSize: 28px fontWeight: 700 lineHeight: 1.06 letterSpacing: -0.02em body-lg: fontFamily: Host Grotesk fontSize: 21px fontWeight: 400 lineHeight: 1.42 letterSpacing: -0.005em body-md: fontFamily: Host Grotesk fontSize: 17px fontWeight: 400 lineHeight: 1.55 body-sm: fontFamily: Host Grotesk fontSize: 15px fontWeight: 400 lineHeight: 1.5 label-md: fontFamily: Host Grotesk fontSize: 12.5px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.08em label-sm: fontFamily: Host Grotesk fontSize: 11.5px fontWeight: 600 lineHeight: 1 letterSpacing: 0.06em button: fontFamily: Host Grotesk fontSize: 15px fontWeight: 500 lineHeight: 1 rounded: none: 0px sm: 4px full: 999px spacing: gutter: 48px section: 176px max-width: 1440px indent: 256px grid-gap: 24px day-gap: 10px components: button-primary: backgroundColor: "{colors.ink-navy}" textColor: "{colors.surface}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 0 24px height: 48px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.button}" rounded: "{rounded.sm}" padding: 0 20px height: 44px nav-link: textColor: "{colors.primary}" typography: "{typography.label-md}" card-class: backgroundColor: "{colors.tertiary}" textColor: "{colors.surface}" rounded: "{rounded.none}" padding: 16px height: 168px card-pass: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.on-surface}" rounded: "{rounded.none}" padding: 28px height: 460px badge: backgroundColor: transparent textColor: "{colors.on-surface}" typography: "{typography.label-sm}" rounded: "{rounded.full}" padding: 0 11px height: 26px input-field: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.sm}" padding: 12px height: 50px --- # Twirl: dance studio template by 8B ## Overview Twirl is a one-page site for a dance studio or any class-based school that sells a free first class and then a pass. The idea is a floor with people on it: pale blue circles, red and yellow plus signs, photos cropped into discs and hand-drawn loops that circle the words that matter. Type is huge, uppercase and tight, so the page feels loud and welcoming, not corporate. It is written for adult beginners, who need to see the timetable, the teachers and the prices within a few scrolls. The mood is playful but organised: every section has one clear job. ## Colors - **primary `#15161c`**: text, rules, form border, icon buttons, the black showcase and footer sections. - **secondary `#575c6b`**: grey lead paragraphs and small notes under headings. - **tertiary `#d03e33`**: red for the hand-drawn loops, the walking dot, step numbers, four timetable cards, two teacher blocks and the Ten classes pass. - **neutral `#f4f5f7`**: the page background and the solid header once you scroll. - **surface `#ffffff`**: the timetable and pricing sections, white cards, the form and text on dark grounds. - **accent-yellow `#f7d02c`**: plus shapes, the showcase bars, the thank-you line, two timetable cards, the First class pass and the fill on white button hover. - **pale-blue `#cfe0ea`**: the first-screen band, the full-screen menu, the styles circle, the large discs behind the quotes and the booking heading, and the fill on primary button hover. - **deep-blue `#19437f`**: three timetable cards, the showcase info card, a teacher block and the Unlimited pass, always with white text. - **ink-navy `#1e1f36`**: the background of the main buttons. Use red and yellow as shapes and fills, not as text colours. Body text stays dark on light grounds. ## Typography Host Grotesk is the only family, one variable file from weight 400 to 700. Display headings are weight 400, uppercase, line height 0.96 and tracking -0.03em; they scale with the viewport (the tokens give the desktop maximum, from 80px for the opening heading to 120px for the largest section headings). Teacher names, step titles and quote names are weight 700 at up to 28px or a little more. Prices reuse the display style at up to 92px. Labels are 12.5px, weight 500, uppercase with 0.08em tracking. Body text is 17px at weight 400. Badges are 11.5px uppercase at weight 600. The wordmark in the header is 24px bold uppercase, and the footer repeats it at full width. ## Layout Content sits in a 1440px wrap with a gutter of 20px on phones that grows to 48px. Sections are separated by 96px to 176px of padding. Most section headings are indented by 17.8 percent of the screen width, which leaves a calm margin on the left and gives the first-class path, the timetable and the passes room. The timetable is seven equal columns with a 10px gap, four columns below 1100px and one column on phones. Teachers sit in five columns with staggered top margins, passes in four columns, then two, then one. Below 900px the header collapses to a menu button, headings drop to about 12 to 13 percent of the screen width, and the styles photos become a sticky strip above the list. ## Elevation & Depth There are no shadows. Depth comes from flat colour fields stacked behind photos: coloured blocks behind teacher portraits, discs behind the quotes and the booking heading, and cards that overlap while the passes fan out. Section grounds alternate between light grey, white, pale blue and black. ## Shapes Corners are 4px on buttons and fields and fully square on timetable cards, pass cards and surfaces. Photos use the pill radius to become circles, half circles and arches. The opening portraits sit on a circle with white borders and are turned grey so the coloured tiles behind them show. Hand-drawn loops and the first-class path are inline SVG, stroked 1.6 to 2.6px, and plus signs are clipped squares. ## Components - **button-primary**: navy fill, white 15px label, 48px high. On hover a pale blue circle grows from the left and the label turns dark. - **button-secondary**: white fill, 44px high, a yellow circle grows from the left on hover. - **nav-link**: small uppercase label that draws a 1.5px underline on hover. - **card-class**: a timetable card in red, blue, pale blue, yellow or white (white has a 1.5px dark border), with time, style, level and teacher. - **card-pass**: a tall pass card in yellow, white, red or deep blue with a very large display-style price that gets a loop on the word Free. - **badge**: an outlined pill used for how long a student has danced. - **input-field**: white, dark 1.5px border, 50px high; labels above are uppercase. ## Motion The page loads GSAP 3.13, ScrollTrigger and MotionPath from jsDelivr, plus Lenis for smooth scrolling. The one motion idea is things moving on a floor: shapes spin, photos swing in, a dot walks a path. - **Header**: becomes solid after a few pixels, slides away after about 24px of scrolling down and returns on scrolling up. - **Opening**: on load the text slides up in turn, a thin ring draws itself over 1.3 seconds and the eight portraits spread from a tight fan onto the circle. - **Styles**: scrubbed. As each name crosses the middle, its photo moves to the centre of the line-up, then returns, while a red loop draws and erases. - **First class**: scrubbed. A path draws while a red dot follows it and each step number fills in on arrival; on phones a straight line replaces the path. - **Timetable, footer and questions**: the children step in once, 0.125s apart, with a small overshoot. Yellow plus shapes, and the large disc behind the quotes, spin in from a turned, small state as you scroll. - **Teachers**: the block behind each photo turns a full circle as its card rises. - **Showcase**: pinned; the photo row slides sideways while photos bob and the bars pulse. - **Quotes and passes**: loops draw once; the four passes spread from a fanned stack. - **Booking**: a pale disc rolls in from the right and a yellow plus spins down. With reduced motion, Lenis, the entrance animations and all scroll scenes are switched off and the showcase becomes a plain grid. Hover fills, the header sliding away and the FAQ icon turn still run. ## Do's and Don'ts - Do keep Host Grotesk as the only family and keep headings uppercase and tight. - Do use red, yellow and pale blue as flat shapes, discs and card fills, one idea per section. - Do circle one phrase per section with a hand-drawn loop, never more. - Do keep timetable and pass cards square and photos in circles or arches. - Do keep the eight portraits, the six style photos and the ids and data-8b attributes that the scripts read. - Don't add shadows, gradients or glass effects. - Don't round buttons beyond 4px or add stock icon sets. - Don't set text in red or yellow on white. - Don't add a second display face or lowercase headings. - Don't remove the Design: 8B footer link unless the site owner asks.