--- version: alpha name: "Lighting store template by 8B" description: "A one-page lighting shop and showroom site in light grey and ink with a single yellow used as light, set in light-weight Geist over hairline column rules. Free HTML template by 8B, MIT." colors: primary: "#121212" neutral: "#ececec" surface: "#ffffff" accent-light: "#ffd000" caption: "#555555" muted: "#a3a3a3" typography: headline-display: fontFamily: Geist fontSize: 96px fontWeight: 300 lineHeight: 0.98 letterSpacing: -0.03em headline-lg: fontFamily: Geist fontSize: 84px fontWeight: 300 lineHeight: 0.98 letterSpacing: -0.03em headline-list: fontFamily: Geist fontSize: 76px fontWeight: 300 lineHeight: 1.02 letterSpacing: -0.03em headline-md: fontFamily: Geist fontSize: 26px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.01em body-md: fontFamily: Geist fontSize: 16px fontWeight: 400 lineHeight: 1.55 label-sm: fontFamily: Geist fontSize: 13px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.01em button: fontFamily: Geist fontSize: 14px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0.01em wordmark-nav: fontFamily: Geist fontSize: 19px fontWeight: 700 lineHeight: 1 letterSpacing: 0.04em wordmark-footer: fontFamily: Geist fontSize: 580px fontWeight: 700 lineHeight: 0.78 letterSpacing: -0.045em rounded: none: 0px full: 9999px spacing: nav-height: 56px gutter: 52px gutter-phone: 20px section-y: 130px column-left: 34 column-middle: 38 column-right: 28 breakpoint: 900px components: nav-bar: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" height: "{spacing.nav-height}" padding: "{spacing.gutter}" nav-link: textColor: "{colors.primary}" typography: "{typography.label-sm}" button-ellipse: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.button}" height: 3.9em padding: 2.2em button-ellipse-hover: backgroundColor: "{colors.accent-light}" textColor: "{colors.primary}" link-on-dark: backgroundColor: transparent textColor: "{colors.surface}" typography: "{typography.body-md}" link-on-dark-hover: backgroundColor: "{colors.accent-light}" textColor: "{colors.primary}" maker-row: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.headline-list}" padding: "{spacing.gutter}" input-field: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.none}" padding: 10px light-bar: backgroundColor: "{colors.accent-light}" height: 6px width: 48px menu-overlay: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" --- # Glim, a lighting store template ## Overview Glim is a one-page site for a lamp shop and showroom that also draws lighting plans and repairs old lamps. The idea is that yellow is light, not decoration: the page is light grey and near black, and the single yellow appears only where something is lit, as a glow behind a photo, a strip beside a picture, a short bar over a loan day or a repair step's label, or a bar along the lamp list. Everything else is hairline rules, light-weight type and square photographs. Demo content, such as the Glasgow address, prices and workshop names, is invented. ## Colors - **Primary (#121212):** text, the hairline rules on the light sections, outlines, the dark first screen, the late-opening section, the footer and the full-screen menu overlay. - **Neutral (#ececec):** the page background, and the text colour of links when their ink underline fills on hover. - **Surface (#ffffff):** the top bar, the makers section background, and text on dark sections. - **Accent light (#ffd000):** the only accent. Glows, the strips beside photos, the lit bar of the lamp list, the rules of the makers rows, the repair line and the short bars of the repair steps and loan days, the hover fill of buttons and links on dark, and the footer wordmark. - **Caption (#555555):** notes, price lines, the product line under each workshop's city (the city itself is ink), unlit repair steps and the placeholder behind photos while they load. - **Muted (#a3a3a3):** body text on dark sections, the two rules of the first screen, the rings in the late-opening section and the footer text. ## Typography Geist is the only family, loaded as one variable file covering weights 200 to 800, so weight can change smoothly. Headings are Light (300) with tight tracking of -0.03em and a line height just under 1. Body copy is Regular at 16px. Buttons and links are Medium at 14px or inherited size. The nav wordmark is Bold, uppercase, with 0.04em tracking, while the footer wordmark is Bold, in sentence case, sized so the name fills the page width. Display sizes use clamp: the first-screen heading runs from 40px to 96px, section headings from 44px to 84px, workshop names from 34px to 76px. The tokens give the desktop maximum. Text is in sentence case; only the nav wordmark is uppercase. ## Layout The page is full width with no maximum content width. The side gutter is fluid, from 20px to 52px (about 3.4vw). The signature is a three column grid of roughly 34, 38 and 28 percent, split by one pixel ink rules. It returns in the first screen, the loan section, the repairs section and the footer. Other sections use a 34 and 66 split, heading on the left and content on the right, most with a top hairline, and vertical padding of about 64px to 130px. The nav bar is a fixed white strip 56px high with the wordmark, five links and a menu button that opens a full-screen ink overlay. Below 900px the five links are hidden, the section grids collapse to a single column, the lamp list keeps a small photo beside each row, the repair steps become two columns, and the gutter falls to about 20px. ## Elevation & Depth There are no shadows. Depth comes from colour fields and layering: a dark first screen against a light page, a white makers band, a dark late-opening section, and glowing yellow discs placed behind photographs and text. A pinned sideways track and a photo frame that stays beside the lamp list add layers sliding past each other. ## Shapes Corners are square: photos, fields and bars have no radius. Round shapes are reserved for light: the button is a pair of overlapping ellipses drawn with a one pixel outline (border-radius 50% on a wide box, so true ellipses, not pills), glows are circles, the late-opening photo is a circle cropped from the picture, with two thin rings around it. Each room column carries a drawn wavy line in ink. Yellow strips are rectangles that fade to transparent at the top. ## Components - **Nav bar and nav link:** white, 56px high, 13px links with an underline that fills on hover. - **Button (ellipse):** two offset outlined ellipses with a label; on hover they stretch vertically and a yellow glow fills the back one. - **Link on dark:** white text with a thin yellow underline that fills to a yellow block on hover, text turning ink. - **Maker row and lamp row:** a hairline on top, a large Light name and small notes. Workshop names thicken near the middle of the screen. - **Input field:** no box, only a one pixel ink line under the text, 17px type. - **Light bar:** a 48 by 6px yellow bar over each loan day; the repair steps carry a shorter 40 by 6px bar beside their step label. - **Menu overlay:** ink background, seven large white links with the yellow underline, address and phone at the bottom. ## Motion The page loads GSAP, ScrollTrigger and Lenis from jsDelivr. The one idea is that photos and bars start dim, grey or flat and switch on as you reach them, like lights being turned on. Lenis smooth scrolling runs on the whole page. - **Navigation:** the white bar slides up and away when scrolling down past 140px and returns when scrolling up, using a 0.45s ease. - **Opening:** the two rules draw down over about 1.1s, the heading lifts into view, the button opens from a flattened ellipse, the photo opens from below with a slight zoom, and the three service items lift in turn. A yellow pool behind the photo drifts in a loop of 7s. - **Rooms:** the section pins and the six room columns slide sideways. As each reaches the middle, its yellow strip grows, its photo goes from dim grey to colour and its wavy line draws. - **Collection:** on desktop one photo frame stays on the right and each next lamp photo rises into it as its row is read, while a yellow bar along the left edge of the list rises and drops with each row; on phones each row has its own small photo and bar. - **Plans, loan, FAQ:** headings rise, hairlines or yellow bars draw, and the plans and loan photos go from grey to colour. - **Makers:** each name grows from weight 300 to 700 as its row nears the middle, and its rule turns yellow and thickens. - **Repairs:** a yellow line sweeps down the photo, leaving a colour copy behind it, and the four steps light in turn. - **Late opening:** the round photo opens from a thin slit to a full circle while zooming out, the rings stretch and the two heading lines slide in from opposite sides. - **Contact and footer:** the yellow glow grows and brightens; the footer wordmark thickens from 200 to 700 and turns from grey to yellow. With reduced motion, Lenis is not created and the entrance animations, the scroll effects and the nav hide-on-scroll are all switched off, so the page reads in full and the bar stays visible. The pure CSS hover transitions are not switched off: buttons, links, the menu button and the FAQ plus icon still animate on hover or opening. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors listed in AGENTS.md so the scripts still find their elements. ## Do's and Don'ts - Do keep yellow for light only: glows, strips, bars and lit lines. Never use it for large flat backgrounds or body text. - Do keep headings in Geist Light with tight tracking, and let weight change only in the scroll effects. - Do separate columns with one pixel ink rules instead of boxes or cards. - Do keep photo corners square and use ellipses and circles only for light and buttons. - Do let photos switch on from grey to colour instead of fading or sliding. - Don't add shadows, gradients other than glows, rounded cards or a second typeface. - Don't claim a shop basket: every button goes to an anchor until the owner points it elsewhere.