--- version: alpha name: "Art gallery template by 8B" description: "A late-opening art gallery or kunsthalle, ruled white cells against near-black night screens with one coral glow. Free HTML template by 8B, MIT." colors: primary: "#101014" on-primary: "#ffffff" neutral: "#ffffff" secondary: "#5a5b64" tertiary: "#f0654a" accent-dawn: "#c6ddf7" caption-night: "#a9abb6" typography: headline-display: fontFamily: Pliant fontSize: 92px fontWeight: 230 lineHeight: 1 letterSpacing: -0.03em headline-row: fontFamily: Pliant fontSize: 34px fontWeight: 280 lineHeight: 1.08 letterSpacing: -0.02em headline-card: fontFamily: Pliant fontSize: 22px fontWeight: 600 lineHeight: 1.15 letterSpacing: -0.01em rail: fontFamily: Pliant fontSize: 96px fontWeight: 230 lineHeight: 1 body-md: fontFamily: Host Grotesk fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Host Grotesk fontSize: 14px fontWeight: 400 lineHeight: 1.55 label-md: fontFamily: Host Grotesk fontSize: 12px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.09em button: fontFamily: Host Grotesk fontSize: 12px fontWeight: 600 lineHeight: 1 letterSpacing: 0.1em input: fontFamily: Host Grotesk fontSize: 17px fontWeight: 400 lineHeight: 1.4 rounded: none: 0px arch: 999px full: 9999px spacing: gutter: 37px gutter-phone: 18px rail-column: 515px card-padding-y: 30px card-padding-x: 28px card-gap: 22px button-height: 50px nav-height: 72px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0 24px height: 50px button-primary-hover: backgroundColor: "{colors.tertiary}" textColor: "{colors.primary}" button-on-dark: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 0 24px height: 50px button-disc: backgroundColor: "{colors.accent-dawn}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" height: 130px card-pass: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 30px 28px card-pass-night: backgroundColor: "{colors.tertiary}" textColor: "{colors.primary}" rounded: "{rounded.none}" padding: 30px 28px card-pass-patron: backgroundColor: "{colors.accent-dawn}" textColor: "{colors.primary}" rounded: "{rounded.none}" padding: 30px 28px input-field: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.input}" rounded: "{rounded.none}" padding: 10px 0 height: 48px photo-arch: rounded: "{rounded.arch}" --- # Nocturna: art gallery template ## Overview Nocturna is a one-page site for an art gallery or kunsthalle that opens after dark: a season programme, four rooms, resident artists, a midnight screening, passes and a visit form. The one idea is a night shift in a ruled ledger. White cells divided by hairlines hold the facts, dark screens hold the art, and a single coral glow marks where the eye should go. It is for venues that sell evenings, not objects, and for owners who want a page that feels like a late opening: quiet, precise, a little theatrical. All names, dates and prices in the demo are invented. ## Colors Six values, set as `--color-1` to `--color-6` in `:root`. Sections alternate between white and near black, with one light-blue section. - **Primary (#101014):** near black. Text and hairlines on white sections, the background of the dark night screens and the footer, and the fill of the main buttons. - **On-primary and neutral (#ffffff):** the page ground of light sections, text on dark screens, the plain pass card and the white button used on dark. - **Secondary (#5a5b64):** grey for secondary body text and captions on light sections. - **Tertiary (#f0654a):** coral. The only warm colour: the glow, the small dot, the room lamp, the relay line, button hover fills and the Night Pass card. - **Accent-dawn (#c6ddf7):** pale blue. The journal section, the disc behind the contact form, the round pass button and the Patron card. - **Caption-night (#a9abb6):** light grey for 14px secondary text on dark screens, the menu overlay and the footer: room captions, the screening synopsis, the footer columns. It reads well on near black (about 8:1) but fails on white (about 2.3:1), so keep it off the light sections. ## Typography Two families, loaded from Google Fonts as variable fonts. - **Pliant** sets headings and the vertical rails. It runs from weight 200 to 900 at 110% width. Display headings pair a light line (weight 230) with a heavy line (weight 760), so every title has two voices. Row titles use 280, card and cell titles 600. Size is fluid: section headings are clamp(40px, 5.4vw, 92px), about 78px at 1440px wide; the opening h1 (up to 108px) and the contact heading (up to 110px) run larger. The rails are uppercase, set vertically and rotated, with a heavy part at weight 860; their size comes from `--len` so the phrase fills the column, about 80px to 100px on a 1440 by 900 screen and 28px to 30px on phones. - **Host Grotesk** sets everything else, weights 400 to 600. Body is 16px at 1.6, notes 14px. Labels, buttons and field captions are 12px uppercase at weight 600 with 0.09 to 0.1em tracking. Headings use tight negative tracking; only small uppercase text is tracked out. ## Layout The page is built on a hairline grid, not a centred container. There is no max width: columns are set in viewport units. A left column of 35.75vw (about 515px at 1440px) carries a label, a heading or a vertical rail, and the content sits to its right. Gutters are 2.6vw, about 37px on desktop. Section heads have 14svh of space above them. The programme, artists and passes read as ruled rows or cards. The screening is a nine-cell credits grid, and the relay is a row of eight equal cells. The top bar is 72px and covers only the right two thirds of the screen. Under 900px the grid collapses to one column, the side rail narrows to 44px, gutters become 18px, the top bar is 56px, the bar links are hidden and Menu holds the full list of links. The eight relay cells stack as 64px rows. ## Elevation & Depth There are no shadows and no blur. Depth comes from flat colour fields, hairlines, overlap and a coral radial glow. Arch photos rise over each other as you scroll, dark veils sit over the rooms, and a fixed white bar floats over the page with a one pixel rule. Keep it flat. ## Shapes Corners are square: buttons, cards and fields use no radius. The two exceptions are the arch, a photo crop with a fully round top (`999px 999px 0 0`), and circles, such as the round pass button and the dawn disc. Fields are underlined only, with a one pixel bottom rule. Stars, discs, the glow and the dot are CSS and SVG, not images; recolour them through the colour variables. ## Components - **button-primary:** 50px high, 24px side padding, square, uppercase label. On hover a coral fill wipes in from the right and the text turns near black. **button-on-dark** is the white version for dark screens. - **button-disc:** a round pale-blue button, 104px to 140px wide (128px on phones), whose near-black fill opens from the right edge on hover. - **card-pass:** three pass cards share one structure: 30px by 28px padding, 22px gap, a price row closed by a hairline, a list and a button. White, coral and pale blue set the tiers apart. - **input-field:** a bare underline, 48px minimum height, 17px text, with a small uppercase label above. - **photo-arch:** the arch crop used for the programme photos, the artist portraits and the journal feature photo. ## Motion The page loads GSAP 3.13 with ScrollTrigger and Lenis 1.3 for smooth scrolling. The motion idea is a lamp moving through a dark building: scrolling reveals, thickens and sweeps rather than slides things in. - **Nav:** the bar hides when you scroll down past half a screen and returns on scroll up. Menu opens a dark overlay of links. - **Opening:** the heading lines, text and three fact cells rise in on load. The glow drifts and breathes and the five stars turn slowly in a loop. - **Programme:** each row's photo rises into its arch as the row reaches the reading line, and on desktop a coral dot slides down the rule. - **Rooms:** the section is pinned for 360svh. Rooms start under dark veils, a coral lamp moves between them and each veil lifts as it arrives. - **Artists:** the font weight itself is animated. A light first name thickens while the heavy surname thins, then they trade back, and the portrait slides along the row. - **Screening:** pinned for 280svh. The still opens from the middle cell to the full screen, the other cells leave through the edges and the title moves onto the picture. - **Relay:** a coral line sweeps across eight cells and each fills with night as it passes. - **Pass:** the three cards start stacked and turned, then fan into a row. - **Contact:** the dawn disc grows and rises behind the form. - **Headings:** other headings rise from a clip mask, with an expo ease over about one second. Most scroll effects are scrubbed to the scroll position with a short smoothing lag. With reduced motion on, the entrance and scroll animations and smooth scrolling are switched off, the pins are not applied, and the page reads in full. The nav bar still hides on scroll down, and hover transitions and the FAQ plus sign still animate. ## Do's and Don'ts - Do keep every section heading as a light line plus a heavy line of the same family. - Do keep corners square; the arch and circles are the only curves. - Do use coral sparingly, as a glow, dot, lamp and hover fill. - Do separate content with one pixel hairlines and alternate white and near-black screens. - Do keep uppercase, tracked Host Grotesk for labels and buttons. - Don't add shadows, blur, gradients other than the coral glow and lamp and the dark fade under the screening still, or rounded cards. - Don't add a third typeface or a second warm accent. - Don't centre the content in a boxed container; keep the left column and ruled cells. - Don't use caption grey on white or pale blue, or for anything larger than a small note. - Don't change the counts the scenes rely on: four rooms, eight relay cities, three pass cards, and one programme photo per programme row.