---
version: alpha
name: "Farm delivery template by 8B"
description: "A bright one-page look for an organic veg box or farm delivery scheme: soft lime, near-black and white, square cards, pill buttons and a six-armed asterisk. Free HTML template by 8B, MIT."
colors:
  primary: "#131512"
  secondary: "#5c6257"
  tertiary: "#c9e36b"
  neutral: "#ffffff"
  on-dark-muted: "#c4c7be"
typography:
  headline-display:
    fontFamily: Host Grotesk
    fontSize: 84px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Host Grotesk
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.035em
  headline-md:
    fontFamily: Host Grotesk
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
  title:
    fontFamily: Host Grotesk
    fontSize: 30px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  lead:
    fontFamily: Host Grotesk
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: -0.01em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.5
  label-sm:
    fontFamily: Host Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  nav-link:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
  button:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1
  field:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
rounded:
  none: 0px
  full: 999px
spacing:
  gutter: 56px
  section-y: 160px
  section-y-min: 84px
  card-gap: 32px
  grid-gap: 20px
  card-pad-lime: 32px
  card-pad-dark: 44px
components:
  button-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 10px 15px 10px 18px
    height: 40px
  button-lime:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 10px 15px 10px 18px
    height: 40px
  button-lime-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
  nav-link:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
  input-field:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.field}"
    rounded: "{rounded.full}"
    padding: 10px 18px
    height: 44px
  card-lime:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: "{spacing.card-pad-lime}"
  card-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.none}"
    padding: "{spacing.card-pad-dark}"
  choice-card-selected:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.none}"
    padding: 16px 16px 18px
  choice-pill:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.full}"
    padding: 8px 16px 8px 12px
    height: 40px
---

# Farm delivery template by 8B (Furrow)

## Overview

This is the look of a veg box scheme that wants to feel like a person with a van, not a supermarket. One soft lime does most of the work: it carries the top bar, whole sections and the cards that hold the actions. Near-black and white keep it readable, and real field photographs add the rustic part, so the interface can stay plain. Headings are large, light and tightly set; buttons are friendly pills with a small turning star. The demo business is invented. The design suits a farm, a market garden or a local producer that delivers by postcode.

## Colors

- **Primary (#131512):** a green-tinged near-black for text, rules, the dark buttons, the grower and returns panels, the recipes and footer grounds, and a selected choice.
- **Secondary (#5c6257):** a muted olive grey for secondary text on white: leads, farm lines in the box rows, notes, times, recipe meta, answers and the field placeholder.
- **Tertiary (#c9e36b):** the lime. The top bar and menu overlay, the growers and promises grounds, the opening card, the box builder and the contact card are lime, and so are the footer button, the footer wordmark and the star on near-black buttons.
- **Neutral (#ffffff):** the box, prices and questions grounds, the day and recipe cards, the promises asterisk, and text on near-black. The day section also uses a pale tint of lime and white as its first ground.
- **On dark muted (#c4c7be):** secondary text and rules on dark panels, footer headings and small print, and the resting colour of the dot grids.

The only other colours are mixes of these: the day section background is interpolated from lime to the near-black in four steps.

## Typography

Host Grotesk is the only family, loaded as a variable face for weights 400 to 700, with an Arial fallback sized to match. It is a friendly grotesque with short, open forms that suit a food brand.

- **Headings** are regular weight with negative tracking: 72px for section headings and up to 84px for the opening statement, falling to about 34px on phones.
- **Card titles and links** use weight 500 (card titles 30px); grower names (48px) and the vegetable names in the box rows (up to 56px) stay at regular weight.
- **Labels** are 13px at 500, in sentence case and never uppercase.
- **Body** is 17px at line height 1.5, falling to 15px.
- **Buttons** are 14px at 600; the nav logo and footer wordmark are the only bold (700) text.

## Layout

Sections are full-width blocks that change ground one after another: photo, white, lime, a pale tint, near-black, lime, white, near-black, white, photo with a lime card. There is no maximum page width; content sits inside a gutter of 20px to 56px, and sections take 84px to 160px of vertical padding.

Most section heads are two columns, heading left and a short lead right, aligned at the bottom. Lists are rows or cards, and rows are ruled by 1px near-black lines. At 900px the links collapse into a menu overlay; at 860px and 760px two-column sections stack, the recipes drop to two columns at 1000px and one at 540px, and the growers cards put the photo above the text.

## Elevation & Depth

No shadow is rendered: a shadow variable is declared in the CSS but no element uses it. Depth comes from overlap. Grower cards stack like crates, the covered one shrinking and darkening under a near-black shade. A sticky photo ground sits behind the opening statement. In the contact section a lime sheet contracts into a card above a full-bleed photo.

## Shapes

Corners are square on every card, panel, photo and choice tile. Curves are reserved for actions: pill buttons, pill fields and pill choices at 999px, and circular 44px icon buttons for the menu. Photos are cropped by the layout: 3:2 thumbnails in the box rows, 4:3 on the day steps when they sit in a grid (in the pinned track the photo fills the card's height), 4:5 on recipes (4:3 on phones).

The asterisk is the signature shape: three bars crossing at 60 degrees on every button, and six arms, each 34 units thick, as the large promises mark. Dot grids are round dots masked into crescent phases.

## Components

- **Dark button:** near-black pill with white label and a lime star; the star turns 60 degrees on hover. Used in the bar, opening, builder and contact.
- **Lime button:** the footer call to action; it turns white on hover.
- **Nav link:** 14px text with an underline that draws in from the left on hover.
- **Input field:** white pill with a 1.5px near-black border.
- **Lime card and dark card:** square panels that hold the opening copy, the builder and the contact card (lime), and the growers and returns text (near-black).
- **Choice card and choice pill:** outlined tiles for size, frequency and extras; the checked one fills near-black.

## Motion

The page loads GSAP with ScrollTrigger and SplitText, and Lenis for smooth scrolling. One idea runs through it: the page reveals its subject in order, a row of vegetables, a stack of growers, a day of delivery, six promises, and each reveal is tied to scroll.

- **Opening:** on load the heading and the lime card rise (1s), and the photo settles from a slight zoom; nothing is scroll-driven here.
- **Headings** rise line by line from a mask, alternating 36px left and right. **Rules** draw across at 1.1s. **Dot grids** fill column by column as they cross the screen.
- **Box:** the list tips back 60 degrees (48 on phones) and swings flat, while each photo reveals upward.
- **Growers:** cards stick 84px from the top; the covered card scales to 92 percent, lifts 26px and darkens.
- **Day:** pinned for the track's overflow; five steps move sideways while the ground changes from a pale lime tint through lime to near-black.
- **Promises:** the asterisk turns from minus 60 to plus 60 degrees; each arm grows as its promise approaches the middle, and unread promises dim to 30 percent.
- **Recipes:** four fanned cards are dealt into the grid. **Contact:** the lime sheet shrinks into the card and the photo settles.
- **Hover:** buttons rotate their star with an overshoot ease of 0.6s.

With reduced motion on, Lenis, the entrance animations and every scroll scene are skipped and the page reads in full. The nav bar still hides on scroll, and hover transitions still run.

## Do's and Don'ts

- Do keep one accent: lime. Recolour through the `--color-1` to `--color-5` variables, not by adding colours.
- Do keep corners square on cards and photos, and pills only on actions.
- Do keep headings regular weight with tight tracking; do not bold them.
- Do keep the asterisk as the single mark, and keep the number of promises equal to its six arms.
- Do show real photographs of fields, crates and people at work.
- Don't add shadows, gradients or glass effects.
- Don't add a second typeface or uppercase labels.
- Don't round the cards, or fill photos with a colour overlay.
- Don't add scroll effects the page does not already use, such as parallax or counters.
- Don't set the footer wordmark without updating its `--len` to the name's letter count.