---
version: alpha
name: "Podiatrist template by 8B"
description: "Podiatry clinic website: rounded pale lime and green tiles in a deep green frame, a condensed serif and round photo discs. Free HTML template by 8B, MIT."
colors:
  primary: "#0e3a1e"
  secondary: "#157a3d"
  tertiary: "#23c45f"
  neutral: "#b8ec80"
  surface: "#f2f8e8"
  on-surface: "#0e3a1e"
  lime: "#eef68e"
  light-green: "#b8ec80"
  bright-green: "#23c45f"
  mid-green: "#157a3d"
typography:
  headline-display:
    fontFamily: Roboto Serif
    fontSize: 76px
    fontWeight: 400
    lineHeight: 0.92
    letterSpacing: -0.01em
  headline-lg:
    fontFamily: Roboto Serif
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.005em
  numeral:
    fontFamily: Roboto Serif
    fontSize: 64px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Roboto Serif
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.1
  wordmark:
    fontFamily: Roboto Serif
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
  body-md:
    fontFamily: Asta Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Asta Sans
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  button:
    fontFamily: Asta Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1
rounded:
  sm: 8px
  field: 10px
  md: 12px
  frame: 16px
  full: 9999px
spacing:
  gap: 4px
  page-margin: 34px
  tile-padding: 64px
  actions-gap: 12px
  steps-max-width: 1120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 50px
  button-primary-label:
    backgroundColor: "{colors.bright-green}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0px 24px
  button-primary-hover:
    backgroundColor: "{colors.light-green}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    height: 50px
    padding: 0px 26px
  tile-lime:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 28px
  tile-pale:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 28px
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.field}"
    height: 48px
    padding: 12px 16px
  faq-mark:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    size: 42px
  tag-pill:
    backgroundColor: "{colors.mid-green}"
    textColor: "{colors.lime}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 6px 14px
---

# Footnote Podiatry, a podiatrist template

## Overview

Footnote Podiatry is a clinic for feet: nail surgery, heel pain, a gait lab, custom insoles and home visits. The one idea is a tiled board. Every part of the page is a rounded tile, and the tiles are separated by thin gaps of the deep green that frames the whole page. Pale, lime and light green tiles alternate, and round photo discs and bright green buttons add friendliness. The feeling is calm, clean and plain-spoken, like a clinic that explains everything before it touches a foot. It suits a small practice with a price list.

## Colors

Lime, a pale tint and light green do the sorting; one bright green is kept for buttons.

- **Deep green (#0e3a1e, primary):** text everywhere outside the home visit tile, the frame and the 4px gaps between tiles, button rims, borders, price row rules and the FAQ marks.
- **Pale (#f2f8e8, surface):** pale tiles (opening, price list, stories, team cards, FAQ rows), the navigation bar, form fields and the lower end of the page background.
- **Lime (#eef68e):** lime tiles (trust notes, first visit, condition rows, insole intro, price note, contact details, footer), the phone menu sheet and the focus fill inside form fields.
- **Light green (#b8ec80, neutral):** the conditions stage, the team and FAQ heading tiles, the wash across each first-visit card, photo-disc fills, hover fills on buttons and the top of the page background.
- **Bright green (#23c45f, tertiary):** the fill of the label pill in every filled button and the arrow on its dark cap, nothing else.
- **Mid green (#157a3d, secondary):** step numerals, the Day labels in the insole stages and the whole home visit tile, where text turns lime.

## Typography

Two families, both from Google Fonts.

- **Roboto Serif** is the voice: weight 400 only, squeezed to 62% width, so the serif looks tall and calm. Section headings are uppercase at 38px on a phone and 76px on a wide screen. The opening statement, prices, card titles and patient quotes are sentence case at smaller sizes. The logo and footer wordmark use the italic.
- **Asta Sans** carries body text at 400, small labels at 500, and buttons and form labels at 600.

Sizes use clamp(): the h2 level runs from 38px to 76px, the opening statement from 28px to 52px, step numerals from 44px to 64px and condition names up to 68px. Line heights are tight for headings (0.92 to 1.1) and 1.55 for body.

## Layout

The page sits in one deep green frame with a 16px radius and 4px padding, inside a body margin that grows from 8px to 34px. Tiles are 12px rounded and stack with 4px gaps. Most sections split into two columns: 4/8 (prices, FAQ), 5/7 (insoles, the conditions stage and list), 7/5 (contact, home visit), with the first-visit grid capped at 1120px. The opening is one tile with the statement and two round photos beside it, then three lime trust notes. The navigation bar is sticky, with six links and a booking button.

At 960px and below the navigation links give way to a round menu button that opens a full-screen lime sheet. At 860px and below the columns collapse to one and the condition photos become a sticky strip 36% of the screen tall above the rows.

## Elevation & Depth

There are no blurs and one shadow: a 4px ring in deep green around the navigation bar and the phone photo strip. Depth comes from the gaps, from a sticky nav over scrolling tiles, from the held photo stage in the conditions section and from the soft green gradient behind the frame.

## Shapes

Corners are rounded everywhere. Tiles are 12px, photos inside cards 8px, form fields 10px, buttons and pills fully round. Photos appear as circles (opening, first visit cards, stories, home visit), as masked portraits with a head and shoulders cut in the team, and as plain rectangles in the conditions stage. Rules are 2px lines in deep green.

## Components

- **button-primary:** a deep green pill with a bright green label inside and a round arrow cap at the right; on hover the label turns light green and the arrow steps along its path.
- **button-secondary:** an outlined pill with a 2px rim; on hover it fills light green and a small dot appears.
- **tile-lime, tile-pale:** the basic cell, 12px radius, padded 24px to 64px.
- **input-field:** a 48px field with a 2px deep green border on pale; focus turns it lime.
- **faq-mark:** a 42px circle with a plus that becomes a minus, filled light green when open.
- **tag-pill:** the mid green home visit chips with a 1.5px light green rim.

## Motion

GSAP with ScrollTrigger and Lenis smooth scrolling. The one motion idea is parts that arrive and settle: cards drop into place, fills wipe across, photos open and rings grow.

- **Opening:** CSS only; the statement rises on load and the two photo discs pop in while a green fill shrinks away from each.
- **First visit:** scrubbed; a light green wash crosses each of the four cards in turn, the numeral nudges right and the circles shrink and bounce back.
- **Conditions:** the light green stage holds still while six rows pass; each photo after the first opens as a circle growing from the left edge, with a slight zoom out.
- **Gait lab:** the runner photo is cut into nine strips (seven under 700px wide) that slide into one picture while the section stays pinned for a little over one screen of scrolling.
- **Stories:** the quote words fade from faint to full ink; portraits scale once with a springy ease.
- **Home visits:** the portrait grows and straightens from a 10 degree tilt, then three rings scale up and fade in.
- **FAQ:** the rows start piled toward the first and spread down.
- **Cards and rows** in insoles, team, prices, contact and footer slide in from alternating sides (about 36px, a 1.5 degree tilt, 0.8s with a back ease) when they reach the lower part of the screen.

With reduced motion on, the scroll scenes, the entrance animations and Lenis smooth scrolling are switched off; hover fills and the navigation bar hiding on scroll still work.

## Do's and Don'ts

- Do keep tiles 12px round and gaps 4px; a larger gap loses the board look.
- Do keep bright green for the button label pills and arrows only.
- Do keep Roboto Serif at weight 400 and condensed; do not add a bold weight.
- Do not add shadows, glass blur or purple gradients.
- Do not make photos square cards where a disc is used; keep the disc crops.
- Do keep body text deep green on pale or lime; keep lime text only on the mid green tile.
- Do not add a second display typeface or stock icons; the only icon is the button arrow.
- Do keep one condition photo per row in the same order, and four first-visit cards, four gait notes and four insole stages.