--- version: alpha name: "Nonprofit template by 8B" description: "A one-page volunteering network site: white ground, folder-tab cards in six saturated cause colours and handwritten signatures. Free HTML template by 8B, MIT." colors: primary: "#121212" on-primary: "#ffffff" surface: "#ffffff" on-surface: "#121212" caption: "#5c5c5c" hairline: "#e4e4e4" accent-yellow: "#f3c03e" cause-food: "#ff6a21" cause-gardens: "#187a44" cause-reading: "#3a96e0" cause-company: "#a6dcb4" cause-river: "#0d5c4c" typography: headline-display: fontFamily: Host Grotesk fontSize: 64px fontWeight: 700 lineHeight: 1.04 letterSpacing: -0.035em headline-quote: fontFamily: Host Grotesk fontSize: 31px fontWeight: 500 lineHeight: 1.28 letterSpacing: -0.022em numeral: fontFamily: Host Grotesk fontSize: 58px fontWeight: 300 lineHeight: 1 letterSpacing: -0.04em title: fontFamily: Host Grotesk fontSize: 22px fontWeight: 600 lineHeight: 1.22 letterSpacing: -0.015em body-lg: fontFamily: Host Grotesk fontSize: 21px fontWeight: 400 lineHeight: 1.45 letterSpacing: -0.008em body-md: fontFamily: Host Grotesk fontSize: 16px fontWeight: 400 lineHeight: 1.55 label: fontFamily: Host Grotesk fontSize: 13px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0.01em button: fontFamily: Host Grotesk fontSize: 16px fontWeight: 500 lineHeight: 1 letterSpacing: -0.005em signature: fontFamily: Playwrite US Trad fontSize: 18px fontWeight: 400 lineHeight: 1.5 rounded: md: 12px lg: 18px full: 999px spacing: gutter: 60px section: 150px card-gap: 16px max-width: 1280px nav-height: 84px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.full}" height: 52px padding: 26px button-primary-hover: backgroundColor: "{colors.accent-yellow}" textColor: "{colors.primary}" button-outline: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.full}" height: 48px padding: 30px input-field: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" typography: "{typography.body-md}" rounded: "{rounded.md}" height: 54px padding: 18px choice-pill: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.full}" height: 46px padding: 21px choice-pill-checked: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" badge-cause: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.full}" height: 26px padding: 11px folder-card-food: backgroundColor: "{colors.cause-food}" textColor: "{colors.primary}" rounded: "{rounded.lg}" padding: 26px folder-card-river: backgroundColor: "{colors.cause-river}" textColor: "{colors.on-primary}" rounded: "{rounded.lg}" padding: 26px --- # Spare Hour, a nonprofit website template ## Overview Spare Hour is the demo name of a Glasgow volunteering network, and the page is a template for any charity, volunteer centre or community group that lists open hours, takes sign-ups and asks for gifts. The one idea is the folder: every opportunity, cause and photo sits in a card with a notched tab, and each of the six causes owns one saturated colour. Against a white ground the colours feel like paper files on a desk. The mood is busy, local and friendly, never solemn. Demo names, figures, addresses and quotes are invented and meant to be replaced. ## Colors - **Ink, `#121212`:** headings, body text, buttons, and the ground of the Saturday story and the footer. - **White, `#ffffff`:** the page ground, the step cards, input fields and badges, and text on dark grounds. - **Yellow, `#f3c03e`:** the opening screen and the giving block, the Repairs colour, the fill that sweeps up on button hover and the highlighter stroke behind handwritten names. - **Grey, `#5c5c5c`:** lead paragraphs, answers and other secondary text; it passes 4.5:1 on white. - **Hairline, `#e4e4e4`:** rules between rows, the line under the scrolled nav bar and quotation marks. - **Orange `#ff6a21`, green `#187a44`, blue `#3a96e0`, pale green `#a6dcb4`, deep teal `#0d5c4c`:** Food, Gardens, Reading, Company and River. The pale green also tints the sign-up thank-you note and the groups photo ground. Teal is also the ground of the neighbourhoods section, which is why river names stay white there. Text on green and teal cards turns white; on the other cause colours it stays ink. ## Typography **Host Grotesk** is the only text face, a variable grotesque loaded from 300 to 800. Headings run at 700 with tight tracking (-0.035em) and size down with the viewport: the display size ranges from 38px to 64px, the sign-up heading goes up to 92px. Step numbers are set light (300) and large, up to 58px. Card titles are 600, body copy 400, labels 500 at 13px. The footer wordmark is 800 weight, and its size is calculated from the name's length through the `--len` property. **Playwrite US Trad** is a handwriting face used only for the three volunteer signatures under the quotes, at regular weight. Never use it for headings. ## Layout Content sits in a 1280px container with a side gutter that grows from 16px on phones to 60px. Sections are spaced by a padding between 88px and 150px. Most sections are a two-column split, for example 4 to 7 for the open hours and the questions, 5 to 6 for groups, and collapse to one column below 1024px or 900px. Rows of cards stand at stepped heights. The six cause cards dip towards the middle (100%, 88%, 76%, 76%, 88%, 100%), while the five sign-up portraits peak there (64%, 82%, 100%, 82%, 64%). Five blocks change ground: yellow for the opening and the giving block, black for the Saturday story and the footer, teal for the neighbourhoods. The neighbourhood names are a wrapping line of pills sized like headlines. On phones the nav links collapse into a full-screen yellow menu, causes become two columns, folders and gift cards stack, and in the sideways Saturday strip each frame is 76% of the screen wide. ## Elevation & Depth There are no shadows beyond a one pixel line under the scrolled nav bar. Depth comes from colour fields, overlapping folders in the drawer (each scaled slightly smaller than the one in front) and the stepped card heights. Do not add drop shadows or glass blur. ## Shapes Cards are 18px rounded rectangles; most have a notched top edge cut with a CSS `clip-path` shape with the tab at one of two positions, plus a wide-tab variant for the open-hour folders. The gift cards are plain rounded boxes. Buttons, badges, choice pills and neighbourhood names are full pills; inputs use a 12px radius. Photos fill their card and never have their own border. ## Components - **Primary button:** ink pill, white 16px label, 52px tall. On hover a yellow disc grows from the bottom edge and the label turns ink. - **Outline button:** transparent pill with a 1.5px ink border and a 15px label, 48px tall, filling with ink on hover. It appears as Sign up in the nav. - **Input field:** white, 1.5px grey-ink border, 12px radius, 54px tall. - **Choice pill:** an outlined pill for amounts and free times; checked, it fills ink. - **Badge:** small white pill with a 12.5px semibold label for the cause name and gift amount. - **Folder card:** a cause-coloured tab card holding the neighbourhood on the tab, a badge, a title, three facts (when, length, places) and a link. ## Motion The page loads GSAP, ScrollTrigger and Lenis, which smooths scrolling page-wide. The idea is paper in motion: cards slide, stack and deal like a hand of papers. - **Opening:** on load the heading, lead and button slide up by a third of a line, and the three step cards rise 110px with a short stagger. - **Open hours:** a drawer. The six folders stack with a small scale step, the section holds still for about three screens of scrolling, and each step lifts the front folder out, tilts it three degrees and slides it behind the others. The intro column stays in view beside it on wide screens. - **Causes:** cards rise 90 to 210px once, the outer ones first and the middle pair last, from furthest below. - **Saturday:** a held full-screen scene in which six frames travel sideways while you scroll down; the notch of each photo leans with the scroll speed. - **Voices and groups:** photos rise 80px while zooming from 116% to 100%; names and the phrase Post an hour get a yellow stroke drawn in over 0.8 seconds. - **Neighbourhoods:** the thirty pills start transparent and faded, then colour in as they pass the lower part of the screen, with a 70ms stagger along a row. - **Giving and sign-up:** the three gift cards deal out from the centre with a tilt; the five portraits rise from below, the outer ones first and the centre one last. With reduced motion on, entrance and scroll animations and smooth scrolling are switched off: the folders show as a plain grid, frames as a grid and pills in full colour. The nav bar still hides on scroll and hover transitions still run. ## Do's and Don'ts - Do give each cause one colour and use it on its folder, card and pill; a new cause needs a new colour variable. - Do keep the handwriting face for signatures only. - Do keep ink-on-white text at 4.5:1 or better; check any new colour behind small labels. - Do keep the folder tabs and stepped heights; they are the signature. - Don't add shadows, gradients or glass effects. - Don't use rounded corners other than 12px, 18px and pills. - Don't introduce a seventh saturated colour beside the six cause colours. - Don't set section headings lighter than 700; only the large step numbers are light. - Don't add a second motion style; cards should keep sliding, stacking and dealing.