--- version: alpha name: "Coffee roaster template by 8B" description: "One-page coffee roastery and counter site in a printed-ticket look: cream paper, indigo ink, rust stamps and hairline rules. Free HTML template by 8B, MIT." colors: primary: "#41339a" secondary: "#a2481b" surface: "#fce9da" on-surface: "#41339a" on-primary: "#fce9da" on-secondary: "#fce9da" typography: headline-display: fontFamily: Brygada 1918 fontSize: 86.4px fontWeight: 500 lineHeight: 0.94 letterSpacing: 0.005em headline-lg: fontFamily: Brygada 1918 fontSize: 76.8px fontWeight: 500 lineHeight: 0.94 letterSpacing: 0.005em headline-md: fontFamily: Brygada 1918 fontSize: 30.4px fontWeight: 500 lineHeight: 0.94 letterSpacing: 0.005em title-md: fontFamily: Brygada 1918 fontSize: 21.6px fontWeight: 500 lineHeight: 1.3 body-md: fontFamily: Radio Canada Big fontSize: 16px fontWeight: 400 lineHeight: 1.55 label-kicker: fontFamily: Radio Canada Big fontSize: 13px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.16em label-md: fontFamily: Radio Canada Big fontSize: 13px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.1em price: fontFamily: Radio Canada Big fontSize: 24px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0.07em button: fontFamily: Radio Canada Big fontSize: 15px fontWeight: 500 lineHeight: 1.1 letterSpacing: 0.06em wordmark: fontFamily: Instrument Sans fontSize: 38.4px fontWeight: 700 lineHeight: 0.9 letterSpacing: 0.01em rounded: none: 0px full: 9999px spacing: hairline: 1.5px rail: 220px bar: 68px gutter: 56px section-gap: 120px components: button-primary: backgroundColor: transparent textColor: "{colors.secondary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 9px 16px 8px height: 44px button-on-ink: backgroundColor: transparent textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 9px 16px 8px height: 44px icon-button: backgroundColor: transparent textColor: "{colors.primary}" typography: "{typography.label-md}" rounded: "{rounded.full}" height: 44px nav-link: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.label-md}" drink-row: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.title-md}" padding: 14px 0 11px bean-row: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.body-md}" padding: 32px 56px 35px stamp-word: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.wordmark}" rounded: "{rounded.none}" --- # Coffee roaster template by 8B ## Overview A small roastery with a counter, drawn as paper that has been through a print shop. Every section is a ruled ticket: hairlines divide it into cells, kicker labels sit above big serif capitals, and round rubber stamps carry a single word. The idea is that the coffee is dated, numbered and handled by two people, so the page looks stamped by hand. It suits micro-roasters, cafes that sell their own beans and small food makers with weekly batches. The feeling is warm, exact and a little old-fashioned, never glossy. ## Colors Three colours do all the work, and the page never adds a fourth. - **Indigo `#41339a` (primary, on-surface)**: text and hairlines on cream, the ground of the three first-screen panels, the drinks board and the visit section, and the fill of the bag and Menu icons on hover. - **Cream `#fce9da` (surface, on-primary)**: the paper ground of the page, plus the text and rules on indigo and rust, and the hover fill of the light buttons. - **Rust `#a2481b` (secondary)**: kicker labels, outlined buttons, the refill figures, the ground of the roast-days and cupping sections, the current coffee name and the current rail link. Sections alternate cream, indigo and rust, so a long scroll reads as a stack of different papers. ## Typography - **Brygada 1918**, a serif loaded at weights 400 to 600 and used at 500. It sets uppercase display headings and coffee, farm and owner names with a line height of 0.94 and a slight positive tracking. At 500 it also sets drink names, ticket values, FAQ questions, tasting dates and the text that runs round each stamp. Heading sizes use `clamp()`: from about 42px on a phone to 77px on a wide screen, and up to 86px for the first-screen headline. - **Radio Canada Big**, loaded at 400 to 700, for body text at 400, uppercase tracked labels and buttons at 500, and prices and step titles at 700. - **Instrument Sans**, condensed (stretch 75%) at 700, only for the wordmark, the ticket heading and the words inside stamps. Labels are always uppercase with wide tracking; body text is sentence case. Do not add a fourth face. ## Layout Sections run full width with no centred container. Cells are separated by 1.5px indigo (or cream, on dark grounds) rules rather than gaps. Side padding is `clamp(18px, 4.5vw, 56px)` and large sections open with up to 120px of space above them. From 1024px a rail 220px wide is fixed to the left edge with seven links and a roast-day note, and the page shifts right by the same amount; a 68px bar with wordmark, bag, phone and, on narrower screens, a Menu button stays at the top. Below 1024px the rail becomes a full-width list opened by the Menu button, two- and three-column sections stack, the round bean frame shrinks to a narrow column beside the list, and the sticky roast ticket pins under the bar. ## Elevation & Depth There are no shadows. Depth comes from colour fields that change from section to section, from sticky layers (the round bean frame and the roast ticket stay in view while the list moves past them), and from offset outlines: the bean frame carries a 12px outline gap and the ticket a 7px one, which reads like a die-cut border. ## Shapes Corners are square: buttons, panels and photos have no radius, apart from the pill-shaped bag and Menu buttons. Circles are the exception and the signature: the round bean frame, the tin and its lid, the tasting photo, and the seven ring stamps with a word in a ruled box at the centre. The shop-window photo starts as a rounded shape and ends as a square. ## Components - **button-primary**: transparent with a 1.5px rust border and rust text; on hover a rust fill rises from the bottom in 0.45s. **button-on-ink** is the cream version for indigo grounds. - **icon-button**: pill buttons for the bag and Menu; a circle of indigo rises from the bottom edge on hover. - **nav-link**: small uppercase label with an underline that draws; the current section turns rust and bold. - **drink-row** and **bean-row**: ruled rows with a name, a note and a bold price. - **stamp-word**: the boxed word inside each stamp, in the condensed face. - The batch ticket, tasting dates, FAQ items and the visit list reuse the same rules and kicker labels. ## Motion The page loads GSAP 3.13 and ScrollTrigger from jsDelivr, and Lenis for smooth scrolling. The one idea is things being stamped, stacked and turned as the ticket is filled in. - **First screen**: the three indigo panels fill from the bottom, one after another (from the left on phones), then the headline and ticket lines rise. - **Headings**: each three-line lockup rises line by line, 0.85s with a 0.12s stagger, once. - **Rules**: farm rows and FAQ items draw their clip from the left in 0.9s. - **Stamps**: the tasting and visit stamps drop in from 2.2 times their size, turned, in 0.55s. - **Beans**: the photos in the sticky round frame turn 360 degrees over the list, and each next photo opens from a circle as its row nears the middle. - **Roast days**: each step presses its stamp onto the ticket cell as it passes. - **Counter**: drink rows fan down from the first row. - **Refills**: the lid rolls along the baseline. - **Owners**: the photo slides together from four slats (three on narrow screens). - **Visit**: the window photo turns upright and opens into a square. With reduced motion on, the load-in, scroll animations and smooth scrolling are switched off; hover fills and the FAQ plus sign still move. ## Do's and Don'ts - Do keep to cream, indigo and rust; recolour only through the three CSS variables. - Do keep corners square and rules 1.5px. - Do keep headings as three-line lockups with a small kicker above and below. - Do keep stamps to one short word so it stays inside the ring. - Don't add shadows, gradients or rounded cards. - Don't add a second display face or lowercase tracked labels. - Don't add scroll effects that the page does not already have. - Don't remove the Design: 8B footer link unless the site owner asks.