--- version: alpha name: "Museum template by 8B" description: "A one-page natural history museum site with engraved plates, teal and amber colour fields and hairline columns. Free HTML template by 8B, MIT." colors: primary: "#0d1f2b" secondary: "#5995a8" tertiary: "#eab12f" neutral: "#e9f2f4" surface: "#5995a8" on-surface: "#0d1f2b" surface-ice: "#e9f2f4" surface-night: "#0d1f2b" on-night: "#ffffff" accent-yellow: "#eab12f" accent-pale: "#f6d97c" accent-amber: "#c97f1c" white: "#ffffff" typography: headline-display: fontFamily: Gabarito fontSize: 96px fontWeight: 800 lineHeight: 0.84 letterSpacing: -0.01em headline-lg: fontFamily: Gabarito fontSize: 64px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.012em headline-md: fontFamily: Gabarito fontSize: 48px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.012em lead: fontFamily: Google Sans fontSize: 21.6px fontWeight: 500 lineHeight: 1.45 letterSpacing: -0.005em body-md: fontFamily: Google Sans fontSize: 17px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Google Sans fontSize: 15px fontWeight: 400 lineHeight: 1.5 label-md: fontFamily: Gabarito fontSize: 12px fontWeight: 600 lineHeight: 1.35 letterSpacing: 0.16em link: fontFamily: Gabarito fontSize: 13px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.12em button: fontFamily: Gabarito fontSize: 12px fontWeight: 600 lineHeight: 1.2 letterSpacing: 0.14em rounded: none: 0px field: 1.4rem full: 9999px spacing: gutter: 32px section-pad: 150px card-gap: 24px button-height: 56px field-height: 52px components: button-primary: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 25.6px 0 18.4px height: 56px button-primary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.white}" button-outline: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 25.6px 0 18.4px height: 56px button-outline-hover: backgroundColor: "{colors.accent-pale}" textColor: "{colors.primary}" nav-link: textColor: "{colors.primary}" typography: "{typography.label-md}" card-session: backgroundColor: "{colors.surface-ice}" textColor: "{colors.primary}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 20.8px specimen-label: backgroundColor: "{colors.surface-ice}" textColor: "{colors.primary}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 8px 20px input-field: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 12px 19.2px height: 52px --- # Wrenfield Museum of Natural History ## Overview Wrenfield is a template for a natural history museum with free halls, one paid exhibition, drawer tours, family sessions, evening events and membership. The idea is a printed specimen label made into a website: pale engraved plates, tracked small capitals, thin vertical rules that content hangs on, and fields of teal, ice, amber and deep ink. It suits a county museum or university collection that wants to look scholarly and warm at once. The feeling is a quiet gallery with one bright lens passing over the paper. All names, dates and prices are invented demo content. ## Colors The page uses seven colours, set as `--color-1` to `--color-7` in `:root`. - `secondary` and `surface` (#5995a8): the teal ground of the halls, learn and contact sections, the frame under the two lens photos, and the nav bar once it turns solid. - `white` (#ffffff): the huge uppercase words, text on ink blocks and the exhibition print sheet. - `primary`, `on-surface` and `surface-night` (#0d1f2b): body text, the nav, the menu overlay, and the ground of the exhibition, Lates, FAQ and footer. - `accent-yellow` and `tertiary` (#eab12f): the one accent. Filled buttons, short stroke bars, underlines that grow, FAQ plus marks and the row glow in Lates. - `accent-pale` (#f6d97c): the ground of the field section, and the fill that floods outline buttons and icon buttons on hover. - `accent-amber` (#c97f1c): the membership section, the colour layer that fills the whole opening and tints its plate, and the opening text panel on phones. - `neutral` and `surface-ice` (#e9f2f4): the collections and visit grounds, session cards, membership labels and the specimen label. ## Typography Two families load from Google Fonts. Gabarito (500 to 800) carries everything loud: hall names and the display words at 800, uppercase, very tight line height 0.84, tracking -0.01em; headings at 700 in sentence case; and every label, link and button at 600 in uppercase with wide tracking (0.12em to 0.16em). Google Sans (400 and 500) is the reading face: 17px body, 15px for card and table text, a 500-weight lead at about 21px. Display sizes are fitted to the word. Each big name carries `style="--len:N"`, the character count, and the CSS shrinks the size so long names still fit. Headings use `clamp()`: section headings run from about 30px to 67px, the opening h1 from 27px to 38px. ## Layout The page is full width with no max-width container. In the opening three hairlines run down the screen at 10.4%, 67.8% and 84.6% of the width (4.3%, 50% and 95.7% below 900px); further down, most sections start their content on the same 10.4% line, and the halls and contact grid draw their own column rules. Section padding is 13vh clamped between 88px and 150px; the side gutter is 2.2vw clamped between 16px and 32px; card gaps run 12px to 24px. Compositions change by section: a sticky plate with a text panel in the opening, a horizontal track of six halls, a two-column exhibition, alternating drawer rows, a four-card session row, dated event rows, four membership labels, a visit table and a four-column contact grid. At 1099px four-card rows become two columns. At 899px the halls, exhibition, drawers, field, Lates, visit and FAQ grids collapse to one column (session, membership and contact cards keep two columns until 599px), the hairlines move, the nav shrinks to a brand and icons with a menu button, and the opening text moves into an amber panel at the bottom. At 599px the contact grid, session cards and membership labels stack. ## Elevation & Depth There are no drop shadows. Depth comes from colour fields that change per section, thin rules, and multiply blending: plates are greyscale images with `mix-blend-mode: multiply`, so the paper colour shows through them. The opening shows one plate twice, as ink and under an amber layer. The exhibition plate is one photo filtered into three colour separations plus a true copy. A fixed nav bar gains a solid teal fill and a hairline after 40px of scroll. ## Shapes Cards, label tables, plates and photo frames are square. Roundness is reserved for controls: buttons, inputs and icon buttons are pills or circles, and the message textarea has a 1.4rem corner. Short yellow bars sit by headings and hall names, and hairlines divide rows. Hall plates are shown whole (`object-fit: contain`), never cropped; photos are cropped to fixed frames (4:3 session photos, 4:5 field photo, 3:2 membership plate, 3:2 drawer trays on phones). ## Components - `button-primary`: yellow pill with an ink 1px border, a small icon at the left, label in tracked caps. On hover a dark disc grows from the icon and the text turns white. - `button-outline`: transparent pill with a border at 45% of the text colour. On hover a pale yellow disc floods it. - `nav-link`: tracked caps; a 4px yellow bar grows under it on hover. - `card-session`: ice card, a greyscale photo above, a bold title, a tracked meta line and a link. - `specimen-label`: a definition list on ice with a thin rule under each row; it appears in the opening, the exhibition and the membership cards. - `input-field`: pill input with a tracked label above, border at 55% of the text colour. ## Motion The page loads GSAP 3.13 with ScrollTrigger and Lenis 1.3 from jsDelivr. The one idea: things move into register, like a plate being aligned on a table. Elements start offset, tilted or colour-shifted and settle straight as they cross the screen, mostly tied to scroll. - **Navigation**: the bar turns solid after 40px, hides when you scroll down past 120px and returns when you scroll up. The menu is a full-screen overlay. - **Opening**: on load the amber plate settles from a slight scale, and the panel items slide in from the right one after another; the yellow bar above the h1 and the label rules grow. Nothing else moves: the colour layer fills the whole stage, so its eight-second drift loop shows no visible change. - **Halls**: the section pins and six halls slide sideways. Each plate moves slower than its hall and each name faster, and each name bar grows. - **Exhibition**: three colour layers of one plate slide into register while the true image fades in; the two title lines close in from opposite sides. - **Collections**: each tray slides out of its drawer, alternating sides on desktop. - **Field**: a yellow lens opens and travels up the photo, headline bars grow, and two small glyphs rise at their own rates. - **Learn**: four cards start scattered and tilted and straighten into a row. - **Lates**: the photo goes from dark grey to colour, and each event row lights a yellow line as it arrives. - **Visit**: on desktop the photo narrows from full width to its column while the text slides in. - **Contact**: the four columns rise from a staircase into a level row. Bars ease with `power3.out`, scroll scenes are scrubbed and mostly linear (the drawer trays use `power1.out`), and hover fills use `cubic-bezier(.3,.7,.2,1)` over 0.45s to 0.55s. Reduced motion switches off Lenis, the pinned halls (they become a grid of two columns, one on phones), every scroll scene and the entrance and loop animations, so the page reads whole and still. Two things are not switched off: the nav still hides and shows on scroll and fades its solid background, and hover fills, the FAQ plus mark and the menu overlay fade keep their short transitions. ## Do's and Don'ts - Do keep one accent. Yellow is for bars, fills and highlights, never for large text. - Do keep Gabarito for loud words and labels, Google Sans for reading. Do not add a third face. - Do keep corners square on cards and photos; pills are for controls only. - Do set `--len` on any new display word so it fits. - Do keep plates greyscale with multiply blending, so colour comes from the section ground. - Don't add drop shadows, gradients, glass effects or stock icon sets. - Don't put paragraphs in uppercase; tracked caps are for labels and buttons. - Don't mix coloured grounds inside one section, and keep body text at 4.5:1 or better.