---
version: alpha
name: "Pharmacy template by 8B"
description: "Pharmacy website: pastel paper folders with slanted tabs on a grey ground, heavy black bars and a rounded display sans. Free HTML template by 8B, MIT."
colors:
  primary: "#131313"
  secondary: "#575757"
  neutral: "#c9c9c7"
  surface: "#ffffff"
  on-surface: "#131313"
  pastel-blue: "#d4e3f3"
  pastel-pink: "#f6d4dc"
  pastel-green: "#d1e8d9"
  pastel-yellow: "#fbefc4"
typography:
  wordmark:
    fontFamily: Gabarito
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: 0.2em
  headline-display:
    fontFamily: Gabarito
    fontSize: 104px
    fontWeight: 500
    lineHeight: 0.96
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.025em
  headline-md:
    fontFamily: Gabarito
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.02em
  body-md:
    fontFamily: Geist
    fontSize: 16.5px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Geist
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.38
    letterSpacing: 0.005em
  label-sm:
    fontFamily: Geist
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.06em
  button:
    fontFamily: Gabarito
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.005em
rounded:
  none: 0px
  full: 9999px
spacing:
  page-margin: 124px
  folder-frame: 16px
  tab-height: 36px
  folder-gap: 112px
  section-gap: 76px
  photo-notch: 14px
  bar: 4px
  rule: 1.5px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    height: 48px
    padding: 0px 36px 0px 22px
  button-primary-hover:
    backgroundColor: "{colors.pastel-blue}"
    textColor: "{colors.primary}"
  nav-tab:
    backgroundColor: "{colors.pastel-pink}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    height: "{spacing.tab-height}"
  card-sheet:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.none}"
    padding: 52px
  menu-row:
    backgroundColor: "{colors.pastel-green}"
    textColor: "{colors.primary}"
    typography: "{typography.headline-display}"
    rounded: "{rounded.none}"
    height: 118px
  menu-row-open:
    backgroundColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.pastel-blue}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    height: 46px
    padding: 10px 12px
  icon-button:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 40px
  status-note:
    backgroundColor: "{colors.pastel-green}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    padding: 12px 14px
---

# Hale, a pharmacy template

## Overview

Hale is an independent pharmacy that does more than dispense: weekly medicine packs, a walk-in clinic, jabs, a small shop and a bike round. The one idea is a filing cabinet. Every part of the page is a paper folder filed under a slanted tab, and the six tabs step across the header the way index tabs would. The pastel folders stand on a flat grey ground and are cut by heavy black bars. The feeling is calm, orderly and kind. It suits a neighbourhood practice, not a chain.

## Colors

A neutral grey ground, black ink and four pastels that sort the page into parts.

- **Ink (#131313, primary):** text, the 4px bars, table lines, the seal bar, the route fill and the default button.
- **Slate (#575757, secondary):** the questions and contact folders and the Visit tab; text on it is white.
- **Ground (#c9c9c7, neutral):** the page background, the header bar, empty photo frames, the portrait frame.
- **Paper (#ffffff, surface):** every sheet, the first header tab, the question cards and text on the slate folders.
- **Pastel blue (#d4e3f3):** the weekly packs folder, the bedtime row, form fields, the default button fill on hover and the Repeats tab.
- **Pastel pink (#f6d4dc):** clinic and vaccination folders, the midday row, the Clinic tab.
- **Pastel green (#d1e8d9):** shop and delivery folders, the evening row, shop rows and the thank-you note.
- **Pastel yellow (#fbefc4):** people and story folders, the morning row, the form button fill and the People tab.

A pastel names a part of the pharmacy. Pastels are grounds, never text.

## Typography

Two families from Google Fonts, both loaded as variable files from 400 to 600.

- **Gabarito** is the voice: rounded, friendly, a little retro. It sets the wordmark (weight 400, tracked 0.2em), every heading, the big Walk in line, shop and person names, numbers in the pack grid, links, tabs and buttons (weight 500). Large sizes are tight, from -0.02em to -0.035em.
- **Geist** is the working text: body copy, captions, table labels and form fields at 400 to 600. Small labels are uppercase, 11px, weight 600, tracked 0.06em.

The sizes use clamp(). The display level runs from 42px on a phone to 104px; the clinic line and shop names are capped lower, at 100px and 68px. The page title is a modest 30px to 48px, with section headings 24px to 34px: the page is built on big names and small headings, not a huge hero.

## Layout

There is no max width. Every folder sits inside a side margin of 8.4vw, between 16px and 124px (about 31px on a 375px phone, 121px at 1440px), with a 8px to 16px coloured frame around its white sheet. Folders are stacked in one column with 112px above a new one at most; related folders share a colour and sit flush.

Inside, sheets split into two columns: packs (intro and week grid), clinic (sheet and a column of four conditions), people, story, contact. The header is fixed: the wordmark with a caption centred, two quick links at the right and a strip of six tabs below. Four folders (clinic, shop, people, questions) carry their own tab above the top edge, at the position of their part in the strip; the folders that follow them share the colour without a tab. The footer ends with a huge tracked HALE line.

At 860px and below the columns collapse to one, the vaccination table turns into stacked rows, and the delivery stops get wider (76vw) in the sideways track, or stack in one column with reduced motion. At 760px the header tab labels shrink to 10.5px and the Find us link is hidden.

## Elevation & Depth

There are no shadows, blur or gradients. Depth is made by layering flat shapes: a white sheet inside a coloured folder, a tab standing up from its edge, a fixed grey header over the scroll, a delivery stage that holds still while the stops pass. Black bars, 4px at the top and bottom of every sheet and 2px down its sides, define edges.

## Shapes

Corners are square. The only curves are the round icon buttons (36px to 40px) with a 1.6px outline, and the native radio buttons. Everything else is cut with straight diagonals:

- Tabs and buttons have one slanted right edge (buttons 14px, tabs 9px to 16px).
- Photos have a notched top edge: the line steps down 14px on a diagonal about a third of the way across.
- Rules are 4px for bars, 1.5px for table lines, 6px for the route and 7px for the seal bar.
- Form fields have a flat 2px black bottom line and no side borders.

## Components

- **button-primary:** black block with one slanted end, white Gabarito label, 48px tall. On hover the folder's own colour fills from below and the label turns black. In the form the fill is yellow.
- **nav-tab:** a 36px slanted tab in the colour of its part, Gabarito 500 at 11px to 14.5px (10.5px on phones), black text (white on slate). The tab for the section in view is raised; hover raises any tab.
- **card-sheet:** the white sheet with the black bars, padded 22px to 58px.
- **menu-row:** the shop shelf button, tinted green, a vertical rule at each end; open it turns white and shows its round arrow icon.
- **input-field:** pale blue, square, black underline, 16px Geist.
- **icon-button:** a circle with an arrow, 40px on the shelves and 36px on the questions; it fills black on hover, and the question arrow turns when it opens.
- **status-note:** the green thank-you line after the form.
- Text links: Gabarito 16px, 1.5px underline, a 4px bar on hover.

## Motion

The page loads GSAP, ScrollTrigger and Lenis (smooth scrolling, lerp 0.1, anchor jumps offset by the header height). One idea: things are filed into place. Bars draw, photos open from their tab, and rows slide into line.

- **Weekly packs:** on load the intro lifts in with a clip-reveal (0.9s) in three steps, the bars draw, the week grid fades. Then a black seal bar runs down the grid once, and each row of pockets fills as it passes.
- **Walk-in clinic:** scrubbed with the scroll, a white marker steps down the four conditions while the matching photo wipes down over the last.
- **Vaccinations, story, contact:** the sheet's bars draw from the left and the photo opens from its notch as they enter, once.
- **Shop:** the four rows deal down from a stacked pad with a small tilt; pressing a row opens its panel and closes the others.
- **Bike delivery:** the stage is held under the header while the five stops slide sideways and the route bar fills.
- **People:** the three portrait slats widen in turn as the cards beside them are ruled off.
- **Questions:** the coloured tabs slide in from the left edge of their rows.

With reduced motion, Lenis and every scroll or entrance animation are off. The delivery stops become a plain grid and the page reads in full, with the clinic showing only its first photo. Hover transitions are not switched off: the tab raise, the button fill, the link bar, shop row colour and the question arrow turn still run, and the header marks the section in view from a scroll listener. The header never hides on scroll.

## Do's and Don'ts

- Do keep one pastel per part of the pharmacy and the same pastel on its tab.
- Do keep corners square; use slanted edges and the notched photo top for shape.
- Do keep Gabarito for names and headings and Geist for text. Don't add a third family.
- Do use 4px bars to close every sheet.
- Don't add shadows, gradients, glass or purple accents.
- Don't make cards rounded, or set pastel colours as text.
- Don't add stock icon sets; the few icons are small inline SVGs (a four-point star on the quick links, the arrows in the round buttons) and the photos show real people and places.
- Don't crop photos square; keep the notched top edge.
- Keep the Design: 8B footer link.