---
version: alpha
name: "Pet boarding template by 8B"
description: "Pet boarding website with flat, saturated colour panels set in a 12-column grid over a black page, heavy Gabarito headings and a handwriting accent. Free HTML template by 8B, MIT."
colors:
  primary: "#cf6224"
  secondary: "#5a3cd4"
  tertiary: "#e3b867"
  maroon: "#6e1116"
  rust: "#9b3418"
  taupe: "#bca59d"
  mauve: "#a97d9c"
  sage: "#80a89b"
  surface: "#0b0a0a"
  on-surface: "#f4f1ee"
typography:
  headline-display:
    fontFamily: Gabarito
    fontSize: 136px
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.035em
  headline-lg:
    fontFamily: Gabarito
    fontSize: 78px
    fontWeight: 800
    lineHeight: 0.94
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Gabarito
    fontSize: 34px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -0.02em
  body-lg:
    fontFamily: Rethink Sans
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.005em
  body-md:
    fontFamily: Rethink Sans
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Rethink Sans
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0.06em
  script-md:
    fontFamily: Playwrite US Modern
    fontSize: 17px
    fontWeight: 300
    lineHeight: 1.9
  button:
    fontFamily: Rethink Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.01em
  button-sm:
    fontFamily: Rethink Sans
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.01em
rounded:
  none: 0px
  full: 9999px
spacing:
  gutter: 16px
  panel: 34px
  section: 110px
  nav-height: 64px
  nav-height-mobile: 56px
  grid-columns: 12
components:
  button-primary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 14px 26px
    height: 52px
  button-primary-hover:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.surface}"
  button-secondary:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.none}"
    padding: 10px 20px
    height: 44px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    height: 64px
  panel-orange:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: "{spacing.panel}"
  panel-maroon:
    backgroundColor: "{colors.maroon}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: "{spacing.panel}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 11px 14px
    height: 48px
---

## Overview

Sill is a pet boarding template; the demo is a small cat boarding house. Its one idea is a house built from coloured panels: orange, violet, maroon, sage, mustard and more, all flat and square, laid on a 12-column grid so the black page shows through as thick gutters. Heavy Gabarito headlines are set very large, and a handwriting face signs the sitters' letters. It is for a small, personal service that wants to feel warm, loud and a little playful, not clinical. Scrolling should feel like opening shutters one by one.

## Colors

The black page is the frame; ten values, eight of them panel colours.

- **Primary (#cf6224):** orange. The hero headline panel, the call panel, the sky band in the day scene, the wordmark in the footer and the hover fill of the light button.
- **Secondary (#5a3cd4):** violet panels with off-white text, and one of the six pane tints in the courtyard.
- **Tertiary (#e3b867):** mustard panels and the hover fill of the black button.
- **Maroon (#6e1116):** deep red panels with off-white text.
- **Rust (#9b3418):** the panel behind the rooms heading and one of the day-schedule hours, off-white text.
- **Taupe (#bca59d):** soft panels for the FAQ items, the booking form and several letters and steps; black text.
- **Mauve (#a97d9c):** dusty pink panels, black text.
- **Sage (#80a89b):** green panels, black text.
- **Surface (#0b0a0a):** the page, the gutters, the navigation bar, the black hill and the sun disc, and the text on light panels.
- **On-surface (#f4f1ee):** off-white text on the black page and on dark panels.

Pair text by panel: black on orange, taupe, mauve, sage and mustard; off-white on violet, maroon and rust. There are no gradients: every field is one flat colour.

## Typography

Three families. **Gabarito** (weights 500 to 900) carries every heading: tight, heavy and set very large, with negative tracking. The hero headline runs from 46px on a phone to 136px on a wide screen, section headings from 38px to 78px, card titles from 24px to 34px. **Rethink Sans** (400 to 600) does body copy, buttons, links and the uppercase labels (13px, 600, 0.06em tracking). **Playwrite US Modern** (300) is a handwriting accent used only for the sitters' letters; keep it short and never use it for navigation or buttons. Sizes use `clamp()`, so the tokens give the desktop maximum. The four big words in the quiet section are Gabarito at weight 500, up to 74px.

## Layout

A full-bleed 12-column grid with no maximum width. The gap between panels is the gutter, 8px to 16px by viewport. Section padding is 56px to 110px at the top, one gutter at the sides and bottom. Panels pad themselves 18px to 34px inside. The navigation is a fixed black bar, 64px high (56px under 860px), with links on the right.

Layouts are deliberately uneven: a wide headline panel beside a tall photo panel, a rotated room name on the tall room card, sitter portraits staggered at different heights, first-visit steps rising like a staircase. At 767px and below the grids drop to fewer columns or a single column, the staggering is simplified, and from 860px down the menu opens as a full-screen set of large coloured tiles.

## Elevation & Depth

There are no shadows, blurs or gradients. Depth comes from layers and gaps: the black gutters between panels, a black hill that slides over the first screen, black mullions that cut the courtyard photo into six panes, and a pinned scene in which a sky band and a black disc sit above a sliding row of hours. Keep it flat.

## Shapes

Corners are square everywhere, including the form fields (2px black border, no radius). The only curves are drawn ones: hand-drawn curls (round-capped strokes, 5 to 7 units wide), the black circular sun in the day scene and the curved block that rises inside a button on hover. Photos fill their panels edge to edge and are cropped, not framed.

## Components

- **Button primary:** black block, off-white label, 52px minimum height. On hover a mustard block with a domed top rises inside it and the label turns black.
- **Button secondary:** off-white block with black label, used in the navigation. An orange dome rises on hover.
- **Nav bar:** black, wordmark in Gabarito 900 at 30px, links at 15px weight 600 with an underline drawn by a 2px gradient that redraws on hover.
- **Panel:** any flat colour with a fixed text colour; panels hold a heading, a short text and often a photo.
- **Input field:** transparent on a taupe panel, 2px black border, 48px minimum height, 17px text, uppercase label above.

## Motion

The page loads GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis for smooth scrolling. The one idea: panels arrive, shear apart and settle like shutters in a house.

- **Opening:** on load the first-screen panels slide in from four directions in about a second, the cat photo drifts sideways and a curl sways. Scrolling on, a black hill with a drawn curl rises over the first screen and the panels drift apart in different directions, then twelve windows open with a clip and their photos slide up.
- **Rooms:** each room panel opens from a square in its corner to full size, tied to scroll; the tall room's name turns from horizontal to vertical.
- **Letters, sitters, first visit:** photos peek up inside their frames, curls draw themselves, and several headings rise line by line (SplitText, masked, about 0.9s).
- **A day:** the section pins; the six hour panels slide sideways while the sky band changes through six colours and the black disc rises and sets.
- **Courtyard:** six panes slide from scattered offsets into one photo while their coloured tints fade.
- **Quiet:** four rule panels start tilted, orange and heavy, then straighten into their own colours as the words slim.
- **Contact:** the Call, Write, Visit and Hours panels slide in from left, right, above and below around the form.
- **Navigation:** hides on a scroll down of about 30px, returns on a scroll up.

All scroll scenes, entrance animations and Lenis run only when the visitor has no reduced-motion preference; otherwise the page shows in full and scrolls normally.

## Do's and Don'ts

- Do keep every field one flat colour, with the black page as the gutter.
- Do pair text colour to the panel: black on light panels, off-white on dark ones.
- Do keep corners square; round only drawn shapes such as the sun disc and the curls.
- Don't add shadows, gradients, glass or rounded cards.
- Don't use a fourth font; the handwriting face is for letters only.
- Don't use light weights for headings; they run 800 to 900 with tight tracking (the four quiet-section words settle at 500).
- Do keep the uneven composition; don't centre everything in a tidy row.
- Don't replace the drawn curls and panels with stock icons or illustrations.
- Don't add accent colours beyond the ten; recolour through the variables.
- Do keep the Design: 8B footer link unless the site owner asks to remove it.