--- version: alpha name: "Movie theater template by 8B" description: "One-page site for an independent cinema, film club or small screening venue: near-black ground, white, mint and lavender tiles, film-edge perforations and tilted greyscale photo windows. Free HTML template by 8B, MIT." colors: primary: "#121214" secondary: "#a9a9b3" tertiary: "#b8a4f7" neutral: "#ffffff" surface: "#121214" surface-light: "#ffffff" surface-frame: "#222226" on-surface: "#ffffff" on-light: "#121214" accent-lavender: "#b8a4f7" accent-mint: "#8cf2e6" caption-dark: "#a9a9b3" caption-light: "#55555e" typography: headline-display: fontFamily: TikTok Sans fontSize: 70px fontWeight: 500 lineHeight: 0.98 letterSpacing: -0.03em headline-price: fontFamily: TikTok Sans fontSize: 120px fontWeight: 500 lineHeight: 0.9 letterSpacing: -0.05em headline-md: fontFamily: TikTok Sans fontSize: 23px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.01em body-lg: fontFamily: Host Grotesk fontSize: 21px fontWeight: 500 lineHeight: 1.38 body-md: fontFamily: Host Grotesk fontSize: 17px fontWeight: 400 lineHeight: 1.55 caption: fontFamily: Host Grotesk fontSize: 14px fontWeight: 500 lineHeight: 1.45 label-caps: fontFamily: TikTok Sans fontSize: 15px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.04em button: fontFamily: Host Grotesk fontSize: 16px fontWeight: 600 lineHeight: 1.1 wordmark: fontFamily: TikTok Sans fontSize: 19px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.02em rounded: xs: 12px sm: 14px md: 22px lg: 30px full: 999px spacing: gutter: 44px gutter-phone: 16px section: 150px tile-gap: 12px nav-height: 64px button-height: 50px components: button-primary: backgroundColor: "{colors.accent-lavender}" textColor: "{colors.on-light}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 26px height: 50px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 24px height: 48px nav-bar: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-light}" typography: "{typography.wordmark}" rounded: "{rounded.md}" height: 64px tile-white: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-light}" typography: "{typography.body-md}" rounded: "{rounded.md}" tile-mint: backgroundColor: "{colors.accent-mint}" textColor: "{colors.on-light}" typography: "{typography.body-md}" rounded: "{rounded.md}" tile-lavender: backgroundColor: "{colors.accent-lavender}" textColor: "{colors.on-light}" typography: "{typography.body-md}" rounded: "{rounded.md}" tile-dark: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" tag-pill: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.label-caps}" rounded: "{rounded.full}" padding: 8px 22px input-field: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-light}" rounded: "{rounded.sm}" padding: 12px 16px --- # Halide: movie theater template ## Overview Halide is a one-page site for a two-screen independent cinema that also runs a bar and a membership. The idea is a dark auditorium with a lit programme: a near-black page, tiles in white, mint and lavender that read like tickets and cue cards, punched perforation strips borrowed from film edges, and photos in rounded windows turned slightly in perspective. All photos are greyscale, so colour comes only from the interface. It suits arthouse cinemas, film clubs and venues with a timetable. Films, prices, names and addresses in the demo are invented. ## Colors - **Primary / surface (#121214):** the page ground, text on white, mint and lavender tiles, the label on the lavender buttons, the phone menu ground, the fill of dark buttons and the shutter flash over the booth frames. - **Neutral / surface-light (#ffffff):** the floating nav bar, white tiles, question tiles, text on the dark ground, the visit section after it brightens and the programme day that is lit. - **Tertiary / accent-lavender (#b8a4f7):** main buttons, the Book a seat tile, the second programmer, the membership stub, the visit form, one season panel, the focus outline, the hover tint on programme rows and the marker on an open question. - **Accent-mint (#8cf2e6):** the doors tile on the first screen, the first programmer, the questions heading tile and one season panel. - **Surface-frame (#222226):** the booth gate frame, perforation strips in the rooms section and the footer, and the colour behind a photo while it loads. - **Secondary / caption-dark (#a9a9b3):** secondary text on the dark ground, such as intro lines, room descriptions, show notes and the footer address. - **Caption-light (#55555e):** secondary text on white, mint and lavender tiles, and question answers. Body text must keep 4.5:1 contrast on its tile. ## Typography **TikTok Sans** carries the display voice, at weights 500 and 600 in its expanded width. It sets section headings and the film title (a clamp from 32px to 70px, tight at -0.03em), tile titles at 23px, uppercase tracked pills and labels, the nav wordmark and the big membership price (up to 120px). **Host Grotesk** (variable, 400 to 600) sets running text, intro lines, captions and button labels. Headings are sentence case and the section headings break onto two lines by hand. Only the small labels are uppercase. ## Layout The page is fluid, with no maximum width. Side padding is about 44px on desktop (two clamped spacing tokens) and 16px under 760px. Sections have 84 to 150px of vertical padding. Content is built from tiles with a 12px gap: three tiles under the film window on the first screen, six day tiles beside a sticky photo, two room columns, two programmer tiles over six notes in three columns, a ticket made of a sheet and a stub. The tiles stack at 760px. The nav is a floating white bar, 64px high (56px on phones), with a menu overlay on phones. ## Elevation & Depth There are no box shadows. Depth comes from perspective: photo windows sit in a 1100px perspective (1200px for the programme screen) and are turned on the vertical axis by 8 to 20 degrees; the first-screen and visit photos face the viewer flat. One bar photo overlaps the other by about 18% and carries a 6px outline in the ground colour. Sticky elements and a tile that lights up add layers. Dark tiles use a 1.5px outline at about 34% white instead of a lift. ## Shapes Corners come in four sizes: 30px for the first-screen photo and the booth gate, 22px for tiles and windows, 14px for form fields and 12px for programme rows, with full pills for buttons, tags and menu rows. Portraits are circles. Punched holes make the film-edge strips: horizontal runs of rounded holes (72 by 24px on desktop) and vertical runs (24 by 54px), smaller on phones. The nav wordmark has a small star mark that turns a quarter turn on hover. The open-question marker is a 34 by 14px pill that rotates and turns lavender. ## Components - **button-primary:** lavender pill, 50px high, semibold 16px dark label. On hover a skewed near-black band wipes across it in 0.5 seconds and the label turns white. - **button-secondary:** near-black pill with a 1.5px near-black border, 48px high, used on light tiles. On hover a white band wipes in and the label turns dark. - **nav-bar:** white 22px-radius bar with the wordmark, three links and the primary button. - **tile-white, tile-mint, tile-lavender, tile-dark:** the four tile grounds. Dark tiles carry the thin outline. - **tag-pill:** outlined pill rows with uppercase labels separated by slashes, used for formats, room facts and footer links. - **input-field:** white field, 1.5px near-black border, 14px radius, 16px regular text. ## Motion The page loads GSAP 3.13 with ScrollTrigger and Lenis 1.3 for smooth scrolling. The one idea is the projection booth: scroll turns photos in perspective, steps film frames behind a shutter flash and tears a ticket along a perforation. - **Opening:** on load the heading block rises 26px, the photo window opens from 90% scale and the three tiles rise one after another from 0.2 seconds. - **Programme:** the photo screen is sticky beside the list; each day lights white as it reaches the reading line and its still wipes in from the right edge. - **Booth:** the section is held for 190% of a viewport while four frames step through the gate in three moves, with a shutter flash and jumping sprocket columns. - **Rooms and bar:** photos turn from 58 degrees to their resting tilt, and menu rows and fact pills rise 70px one after another (0.09 second stagger). - **Picks:** six notes start as a tilted pile and are dealt out. - **Membership:** the stub pulls off the sheet and settles at a slight angle. - **Seasons:** the section is held while four panels slide sideways, each photo turning from a steep angle to its resting tilt as its panel arrives. - **Visit:** the ground fades from near-black to white and the photo window turns square on. Reduced motion switches off the entrance and scroll animations and smooth scrolling; photos stay tilted. The nav hide-on-scroll and hover fills keep running. ## Do's and Don'ts - Do keep the page dark until the visit section; do not make the other sections white-grounded. - Do keep photos greyscale through the CSS filter, and use colour only for tiles and buttons. - Do keep lavender for actions and mint for markers, one tile family each. - Do keep the perforation strips and the tilted windows as the signature devices. - Don't add shadows, gradients or a second display face. - Don't use sharp corners; keep the 22px tile radius and pills for buttons. - Don't set body text on a tile in the light grey of the dark ground. - Don't add drawn film clichés such as clapperboards or popcorn icons. - Keep headings in the expanded face.