---
version: alpha
name: "Birth center template by 8B"
description: "Soft serif type on rounded blush, coral, periwinkle and aubergine tiles for a midwife-led birth center, maternity or doula practice. Free HTML template by 8B, MIT."
colors:
  primary: "#141016"
  secondary: "#f3cbd5"
  tertiary: "#c73a22"
  neutral: "#fbf4dc"
  surface: "#2c2431"
  on-surface: "#fbf4dc"
  accent-coral: "#ec8667"
  accent-periwinkle: "#8ea8dd"
  accent-butter: "#f5eeb8"
typography:
  headline-display:
    fontFamily: Source Serif 4
    fontSize: 98px
    fontWeight: 340
    lineHeight: 0.96
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Source Serif 4
    fontSize: 56px
    fontWeight: 360
    lineHeight: 1.02
    letterSpacing: -0.025em
  statement:
    fontFamily: Source Serif 4
    fontSize: 30px
    fontWeight: 380
    lineHeight: 1.24
    letterSpacing: -0.012em
  pill:
    fontFamily: Source Serif 4
    fontSize: 34px
    fontWeight: 380
    lineHeight: 1.1
    letterSpacing: -0.02em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
  label-md:
    fontFamily: Host Grotesk
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.35
    letterSpacing: 0.01em
  chip:
    fontFamily: Host Grotesk
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0.01em
  button:
    fontFamily: Host Grotesk
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1
rounded:
  tile: 24px
  photo: 17px
  field: 14px
  full: 999px
spacing:
  gutter: 12px
  tile-padding: 52px
  control-height: 50px
  chip-height: 30px
  nav-height: 78px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 26px"
    height: "{spacing.control-height}"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: "0 26px"
    height: "{spacing.control-height}"
  tile-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.tile}"
    padding: "{spacing.tile-padding}"
  tile-light:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    rounded: "{rounded.tile}"
    padding: "{spacing.tile-padding}"
  pill-cream:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    typography: "{typography.pill}"
    rounded: "{rounded.full}"
  pill-warm:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.tertiary}"
    typography: "{typography.pill}"
    rounded: "{rounded.full}"
  status-chip:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.chip}"
    rounded: "{rounded.full}"
    height: "{spacing.chip-height}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    rounded: "{rounded.field}"
    padding: "12px 16px"
    height: "{spacing.control-height}"
---

## Overview

Linnea Birth House is a one-page site for a midwife-led birth center, a maternity unit or a doula practice that sells a house, a small team and a named room per family. The one idea is a calm board: rounded tiles in soft colours on a near-black frame, with a warm serif voice that sounds like a person rather than a clinic. It is for expectant parents choosing where to give birth, and the feeling is unhurried and domestic. Demo names, funding, medical figures and contacts are invented.

## Colors

Eight colours: a dark frame, one dark tile, cream, and five soft room colours. Text is cream on dark and near-black on light.

- **Primary (#141016):** near-black. The page ground that frames every tile, and the text on light tiles.
- **Surface (#2c2431):** aubergine. Dark tiles, the second button, the full-screen menu, the nav bar once you scroll, and the Plum room band.
- **Neutral and on-surface (#fbf4dc):** cream. Text on dark tiles, light tiles, the main button and the Milk room band.
- **Secondary (#f3cbd5):** pale pink. Pink tiles, warm pills, chips, the FAQ plus buttons and the Blush room band.
- **Accent coral (#ec8667):** the Coral room band, the warm middle of the tick dials and one class veil.
- **Tertiary (#c73a22):** red. The Ember room band, the end of the tick dials, warm pill text (mixed with near-black) and the second button's hover fill.
- **Accent periwinkle (#8ea8dd):** the only cool colour. The Cornflower room band, the blurred fields behind the dial and the closing word, and the start of the dials.
- **Accent butter (#f5eeb8):** two pills in the opening values tile, the Team Alder pill, the third story tile and one class veil.

## Typography

Two families, one voice each.

- **Source Serif 4** (weights 300 to 600, with an italic) carries headings, pills, quotes, room names, FAQ questions and the wordmark. The h1 is up to 98px at weight 340 with tight tracking, and only the word "your" is italic. The closing wordmark animates its weight from 300 to 560.
- **Host Grotesk** (weights 400 and 500) carries body copy at 17px (16px on phones), labels at 14px, chips at 13px, buttons at 16px and form text.
- Everything is sentence case; there is no uppercase. Sizes use `clamp()`: the h1 runs from 54px to 98px, section titles from 34px to 56px.

## Layout

The page is a board: grids of tiles separated by one gutter of 12px (8px on small screens) and framed by the near-black ground. Most sections use a twelve-column grid with copy in one block and the content beside it. The six rooms are full-width bands, each a colour block with a title strip, three fact pills, a sentence and a photo. Tiles pad up to 52px. At 960px and 760px the grids fold to two columns and then one, and the nav collapses into a Menu button with a full-screen overlay.

## Elevation & Depth

There are no shadows. Depth comes from flat colour fields, overlap and sticky stacking: cream cards sit on top of photos, blurred flower photos form soft grounds behind the headline and the dial, and the story cards stack like pages.

## Shapes

One tile radius (16px to 24px) is shared by every tile, band and card. Photos inside tiles use about 70% of it and form fields about 60%. Buttons, pills, chips and the nav bar are fully rounded. The logo mark is two overlapping circles drawn in CSS. The dials are arcs of tick marks drawn with masks, not images.

## Components

- **button-primary:** a cream pill, 50px high, near-black label. On hover a pale pink fill rises from the bottom in 0.45 seconds.
- **button-secondary:** the aubergine pill for light tiles; its hover fill is red.
- **tile-dark and tile-light:** the two main tile types; a pink tile is the warm variant.
- **pill-cream and pill-warm:** serif capsules from 20px to 34px for facts, names and room features. Butter and periwinkle variants exist.
- **status-chip:** a 30px aubergine capsule with a 13px label for week numbers, phase counts and short notes; a cream variant marks the aftercare days, the phase places and the photo captions.
- **input-field:** a bare 50px box with a thin outline and no fill, in near-black text on a light tile.
- **nav bar:** transparent at the top, a fully rounded aubergine bar once you scroll. It hides when you scroll down and returns when you scroll up.

## Motion

The page loads no animation library and no script from a CDN. Scroll scenes are CSS scroll-driven animations written per section in `<style data-8b-part="scene:...">` blocks. A small inline kit measures distances into CSS variables, adds `is-in` to `data-8b-motion` elements as they arrive, pauses endless loops off screen, fills in a few scenes by script and smooths the mouse wheel for fine pointers. A gate script in the head sets `data-8b-live` on the root only when the browser supports `animation-timeline` and the visitor has no reduced-motion preference; every scroll rule is scoped to it. The one idea is the board opening into a field.

- **Opening:** on load the tiles and the headline slide in (about 0.9 seconds), the flower photo drifts and the pills bob in endless loops. On scroll the headline tile widens into a full-bleed field, the portrait and values tiles tilt away and shrink, and the swatches, photos, statement and visits card rise into place while the dial arc fills.
- **Rooms:** a script track keeps the bands below the first folded to their 56px title strips and unfolds each to full height as the band above it reaches the nav, easing its photo from 1.16 times to normal. Nothing sticks.
- **Team:** fifteen pills fly from scattered, turned positions into three rows of five, and each team pill turns from cream to its own colour on the way.
- **Pregnancy, house:** headings and rows rise out of a clip, pills pop with a springy overshoot, and house photos settle from a larger, paler image.
- **Rhythm:** a sticky card holds while a dial fills along the five phases and names the one near the middle of the screen.
- **After:** a sticky photo eases from larger to normal while three panels swing down flat.
- **Classes:** the stage sticks while the track slides sideways, and each photo sharpens as it reaches the middle.
- **Stories:** cards stick under the nav and the covered one shrinks to 92% and darkens.
- **Visit:** the closing word gains weight and the photo behind it turns level.

Without `data-8b-live`, which is how Firefox behaves today and how the page behaves with reduced motion, the scenes are off and scrolling is the browser's own: rooms are a plain stack, classes a grid, dials full and stories plain cards. The opening's load-in and loops are CSS keyframes under `prefers-reduced-motion: no-preference`, so they still play in Firefox and stop with reduced motion. Hover fills, the nav hiding on scroll and the FAQ keep working. If a scene's script throws, the kit logs an error and turns that scene's styles off, so only its section stays static.

## Do's and Don'ts

- Do keep one tile radius, one gutter and no shadows.
- Do use periwinkle only as the single cool colour, and red as the single strong accent.
- Do keep the gate script, `data-8b-section`, `data-8b-motion` and the six room ids that the swatch links target.
- Do set `--len` on the closing wordmark to its character count when the name changes.
- Do build new motion as CSS scroll-driven animations scoped to `[data-8b-live]`.
- Don't add GSAP, Lenis or any other animation library.
- Don't use a clinical blue palette, stock icon cards, a dark photo overlay or purple gradients.
- Don't set text in uppercase or add a third typeface.
- Don't put real-looking medical figures on the page without the owner's own source.