--- version: alpha name: "Landscaping template by 8B" description: "Landscape gardening one-pager in lime, forest-green and sage panels with notched corners, a screen-high garden photo opening and big quiet type. Free HTML template by 8B, MIT." colors: primary: "#141713" secondary: "#1f3d2c" tertiary: "#eef48b" neutral: "#e5eae2" surface: "#ffffff" on-surface: "#141713" caption: "#525a50" accent-terracotta: "#d57d4f" winter-mist: "#dce7ed" typography: headline-display: fontFamily: Host Grotesk fontSize: 66px fontWeight: 400 lineHeight: 1.02 letterSpacing: -0.038em headline-lg: fontFamily: Host Grotesk fontSize: 58px fontWeight: 400 lineHeight: 1.04 letterSpacing: -0.032em headline-sentence: fontFamily: Host Grotesk fontSize: 58px fontWeight: 400 lineHeight: 1.12 letterSpacing: -0.03em headline-md: fontFamily: Host Grotesk fontSize: 27px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.018em body-lg: fontFamily: Host Grotesk fontSize: 21px fontWeight: 400 lineHeight: 1.42 letterSpacing: -0.008em body-md: fontFamily: Host Grotesk fontSize: 17px fontWeight: 400 lineHeight: 1.55 label-md: fontFamily: Host Grotesk fontSize: 14px fontWeight: 500 lineHeight: 1.35 button: fontFamily: Host Grotesk fontSize: 16px fontWeight: 500 lineHeight: 1 wordmark: fontFamily: Host Grotesk fontSize: 31px fontWeight: 750 lineHeight: 1 letterSpacing: -0.05em rounded: panel: 22px field: 15px full: 999px spacing: gutter: 18px section-padding: 168px nav-height: 64px tab-height: 104px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.surface}" typography: "{typography.button}" rounded: "{rounded.full}" padding: 0 26px height: 52px button-primary-hover: backgroundColor: "{colors.tertiary}" textColor: "{colors.primary}" button-secondary: backgroundColor: transparent textColor: "{colors.primary}" rounded: "{rounded.full}" padding: 0 18px 0 14px height: 42px nav-bar: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.wordmark}" rounded: "{rounded.panel}" height: 64px panel-lime: backgroundColor: "{colors.tertiary}" textColor: "{colors.primary}" typography: "{typography.headline-lg}" rounded: "{rounded.panel}" panel-forest: backgroundColor: "{colors.secondary}" textColor: "{colors.surface}" typography: "{typography.headline-sentence}" rounded: "{rounded.panel}" panel-sage: backgroundColor: "{colors.neutral}" textColor: "{colors.primary}" typography: "{typography.headline-display}" rounded: "{rounded.panel}" input-field: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.field}" padding: 12px 16px height: 50px --- ## Overview Loam is a one-page site for a landscape gardening firm that designs, builds, plants and looks after gardens. The one idea is a garden seen as a set of cut-out plots: most panels are rounded with a notch bitten out of a corner, and a small tab sits in the notch to carry a label, a fact list or contact details. The opening is a screen-high garden photo with a lime statement panel set into its lower-left notch, panels in lime, forest green and sage follow, and the type is large, regular weight and quiet. It suits owners who sell a garden as design, build and years of seasonal visits. ## Colors Three greens do the structural work, ink and white frame them, and two seasonal colours appear once each. - **Primary (#141713):** body text, filled buttons, dashed rules and field borders, the fourth principle band and the footer panel. - **Secondary / forest (#1f3d2c):** the second principle band, the wildlife sentence panel, the summer panel, the third quote card, and the ground behind photos while they load. - **Tertiary / lime (#eef48b):** the opening statement panel, the first principle band, the contact panel, the first quote card, the spring panel, the phone menu overlay, the fill that sweeps across buttons on hover and the footer wordmark. - **Neutral / sage (#e5eae2):** the third principle band, the second quote card, the thin outline of the navigation bar and the ground behind thumbnails. - **Surface (#ffffff):** the page, the navigation bar, form fields and text on forest and ink panels. - **Caption (#525a50):** the questions lead, captions, fact labels, place names and the answers in the questions list. - **Accent terracotta (#d57d4f):** the autumn panel only. - **Winter mist (#dce7ed):** the winter panel only. Do not use terracotta or winter mist outside their season panels. ## Typography One family, **Host Grotesk**, loaded as a variable face for weights 300 to 800. - **Display and headings:** regular weight 400 with tight negative tracking. `headline-display` sets the principle titles, from 32px on a phone to 66px on wide screens; season names and the contact title use the same settings, enlarged further (up to 108px and 92px). `headline-lg` (32px to 58px) sets section headings; the opening statement uses it at a smaller 28px to 46px. `headline-sentence` (30px to 58px) sets the long wildlife sentence. - **Subheads:** `headline-md`, medium weight, 21px to 27px, for step names, material names, garden names and questions. - **Body:** 17px regular on desktop, 16px on phones. `body-lg` (18px to 21px) is the lead beside each section heading. - **Labels:** 14px medium, used for tabs, fact labels and months. No uppercase and no letter-spaced caps. - **Wordmark:** weight 750 at 31px in the bar; in the footer it is sized by the number of its characters so it fills the panel width. ## Layout The page is full width with no max-width container. A gutter of 10px to 18px surrounds the panels, so they read as plots on a lawn. Sections are spaced by a padding that grows from 88px to 168px. Most sections after the opening start with a heading and a lead in a seven to five column grid, indented from the gutter by 3.4vw; the questions turn it into five to seven, and the wildlife and contact panels carry their headings inside. The opening is one plot filling the first screen under the bar, with a photo and a lime statement panel in its lower-left notch. Principles stack four bands, materials are dashed-ruled rows, and the contact panel holds a six-column form grid. A garden panel is 70svh high, between 460px and 640px, with 150px or more between panels. Below 860px the navigation collapses to a Menu button with a full-screen overlay, two-column splits become one column and the quotes stack. At 700px and below, body text drops to 16px and notches get smaller. ## Elevation & Depth There are no shadows. Depth comes from overlap and clipping. Panels pass over one another: principle bands are pulled up over the band before, garden panels stack with the covered one shrinking and darkening under a near-black shade of 45% opacity, and quote cards start as a pile. Tabs in the notches sit on the page ground, so a panel looks cut rather than raised. The navigation bar is white with a sage outline. ## Shapes Panels are rounded by one radius that scales from 14px to 22px. Corner notches are drawn with CSS clip-path and custom properties, and the notch corners are rounded to the same radius, so a notch that grows or closes never folds. Buttons, pills and photo pills are fully round (999px); thumbnails use 80% of the panel radius and form fields 70% of it. Rules are 1.5px dashed lines: between material rows, between questions, above aftercare tasks and around form fields. ## Components - **button-primary:** a 52px ink pill, 26px side padding, white 16px medium label. On hover a lime layer grows from one corner and the label turns ink. - **button-secondary:** a 42px pill with a 15px medium label, a 1.5px dashed border and a small circled arrow; on hover it turns solid and fills with ink, and the label goes lime. - **nav-bar:** a fixed 64px white bar (56px on phones) with the 750-weight wordmark, three links and a button. - **panel-lime, panel-forest, panel-sage:** the three coloured panels, each with a notch and tab. - **input-field:** 50px high, 1.5px dashed ink border, white fill; focus turns the border solid. - **Text links:** medium weight with a dashed underline that fills solid on hover. ## Motion The page loads GSAP 3.13 with ScrollTrigger and SplitText, and Lenis for smooth scrolling (lerp 0.09), all from jsDelivr. The one motion idea is that plots change shape and position as you scroll, tied to the scrollbar. - **Opening:** on load the whole block lifts in and the three headline lines rise into place; the photo drifts sideways and back, nine seconds each way, pausing when the section leaves the screen. - **Headings:** section headings rise line by line from a mask (0.9s, power3.out) as they come into view. - **Principles:** from the second band, each starts pulled up and tilted 1.6 degrees and settles as it scrolls in. - **Services:** a sticky board of four photo beds, in a stage 430svh tall (400svh on phones), moves its seams through five states, giving each bed the largest share in turn, and ends as an even two by two plot (an even stack of four on phones). - **Wildlife:** the sentence splits into words that go from 20% to full opacity while four photo pills open from their centre. - **Gardens:** the first two panels are held in place while the next slides over; the covered one shrinks to 93% and darkens. - **Materials:** thumbnails open from the upper-left corner once. - **Seasons:** the section is pinned and four panels travel sideways while the ground turns through lime, forest, terracotta and pale blue-grey. - **Quotes:** the three cards deal out from one pile. - **Contact:** the title thins from weight 720 to 400, and on wide screens the notch opens and the tab slides in. The white navigation bar hides after 24px of downward scroll once past the top 80px, and returns on upward scroll. With reduced motion on, smooth scrolling, entrance effects and scroll scenes are switched off and the page reads as a plain layout; the bar's hide and show and hover fills keep running. ## Do's and Don'ts - Do build sections as rounded panels with one notched corner and a tab; keep the corner radius shared. - Do keep terracotta and pale blue-grey for autumn and winter only. - Do set headings at regular weight with tight negative tracking and keep body text at 17px. - Do use dashed 1.5px rules for lists and fields. - Do keep the wordmark at weight 750 and set its length value to the new name's character count. - Don't add shadows, gradients or glass blur. - Don't add a second typeface, uppercase labels or letter-spaced caps. - Don't use stock icons; markers are drawn circles and chevrons.