---
version: alpha
name: "Wellness studio template by 8B"
description: "A one-page wellness studio template: warm grey paper, near-black ink, hairline rules, giant words in one variable face. Free HTML template by 8B, MIT."
colors:
  primary: "#1c1a18"
  secondary: "#57534d"
  neutral: "#ece9e4"
  surface: "#ece9e4"
  on-surface: "#1c1a18"
  caption: "#57534d"
  frame: "#dcd8d1"
  ink: "#1c1a18"
typography:
  headline-giant:
    fontFamily: TikTok Sans
    fontSize: 13rem
    fontWeight: 450
    lineHeight: 0.84
    letterSpacing: -0.035em
  numeral:
    fontFamily: TikTok Sans
    fontSize: 16rem
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -0.04em
  headline-lg:
    fontFamily: TikTok Sans
    fontSize: 4.4rem
    fontWeight: 600
    lineHeight: 1.02
    letterSpacing: -0.015em
  headline-md:
    fontFamily: TikTok Sans
    fontSize: 3.2rem
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.01em
  title:
    fontFamily: TikTok Sans
    fontSize: 1.7rem
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.01em
  body-lg:
    fontFamily: TikTok Sans
    fontSize: 1.375rem
    fontWeight: 400
    lineHeight: 1.4
  body-md:
    fontFamily: TikTok Sans
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.55
  caption:
    fontFamily: TikTok Sans
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.45
  button:
    fontFamily: TikTok Sans
    fontSize: 1.0625rem
    fontWeight: 600
    lineHeight: 1
rounded:
  none: 0px
spacing:
  hairline: 1px
  gutter: 2.5rem
  section: 8.5rem
  nav-height: 3.25rem
  control-height: 3rem
  text-column: 38rem
components:
  button-outline:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0.8em 1.05em
    height: 3rem
  button-solid:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.none}"
    padding: 0.8em 1.05em
    height: 3rem
  chip-link:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 0.4em 0.6em
  chip-link-hover:
    backgroundColor: "{colors.frame}"
  numbered-column:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.numeral}"
    rounded: "{rounded.none}"
  photo-frame:
    backgroundColor: "{colors.frame}"
    rounded: "{rounded.none}"
  input-field:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 0.7em 0
  schedule-row:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: 1.1rem 0
---

# SENTI wellness studio template

## Overview

SENTI is a one-page site for an emotional fitness studio, a coach or a course creator who sells a group course, live classes, team sessions and a printed journal. The idea is a ledger: a warm grey sheet ruled with one pixel lines, three black numbered columns for the steps of joining, and giant words (Motivation, Fine, Together) that span the width like headlines in a notebook. There is no brand colour and no softness in the corners, so the feeling is calm, exact and a little dry. It suits a studio that wants to sound grown up about feelings. All names, prices and quotes in the file are invented demo content.

## Colors

Four colours, all variables in `:root`, and nothing else. Photos keep their own colour inside hairline frames.

- **Primary (#1c1a18):** near-black ink. Text, every hairline and border, filled buttons, the black numbered columns and the strike line.
- **Neutral / surface (#ece9e4):** warm light grey. The page ground, the nav bar, outlined buttons, card fills, and the text colour on the black columns.
- **Secondary / caption (#57534d):** muted brown-grey for footnotes, labels, form labels, session details and FAQ answers. Contrast on the page ground is above 4.5:1.
- **Frame (#dcd8d1):** a slightly darker grey, the ground of every photo frame (each image also carries its own inline placeholder colour while it loads) and the hover fill of small boxed links.

## Typography

One family, **TikTok Sans**, a variable face loaded at weights 300 to 800 and set at 110 percent width on the whole page, which gives wide, friendly letters. Hierarchy comes only from size and weight.

- **Giant words (headline-giant):** weight 450, tight leading and tracking. Each word carries a `--len` value (its character count) so a script-free formula sizes it to the container width; 13rem is the cap for Motivation and Together, while Fine caps at 14rem and the footer wordmark at 28rem.
- **Numerals (numeral):** the large 1., 2., 3. in the black columns, regular weight.
- **Section headings (headline-lg):** semibold, 2.05rem on phones up to 4.4rem on wide screens. Multi-line headings step to the right, each line indented further.
- **headline-md** is the member quotes in the running band; **title** is prices, formats and card titles; **body-lg** is the lead paragraphs of the motivation and journal sections (1.0625rem on phones up to 1.375rem).
- **Body and captions:** 1.0625rem body, 0.875rem captions. No uppercase, no letter-spaced labels and no italics anywhere. Nav wordmark is bold with slight positive tracking.

## Layout

The page is full width, with a side gutter of 1rem to 2.5rem (3.2vw in between) and section padding of 4.5rem to 8.5rem (10vw in between). There is no max-width container; text columns are capped by measure (about 30 to 44rem). Sections are divided by one pixel black lines, and cells, fact boxes and footer columns are formed by a 1px gap over a black background; ledger, calendar and FAQ rows are ruled with bottom borders.

Compositions repeat: a narrow column and a wide one (25/75 for the numbered columns, 5/7 and 4/8 for text and photo or list), a 6 by 4 wall of words, a ledger of six course weeks, a calendar table, a three-photo row, a four-column footer. The navigation is a sticky 3.25rem bar with the wordmark in a ruled cell and a fixed rail of small square icon buttons on the left edge.

At 900px and below, columns stack, the numbered columns become banners (9.5rem tall, 7.5rem in the team section), the words wall drops to two columns, the nav menu becomes an overlay list of large semibold links, and the footer goes to two columns, then one at 520px.

## Elevation & Depth

No shadows, no blur and no gradients. Depth is flat: ruled lines, black fields against grey, and overlap during motion (the pinned team photo starts full screen over the heading and shrinks into its cell). Cards in the opening are cells in a 1px black grid.

## Shapes

Every corner is square, including buttons, frames, fields and icon boxes. Icons are thin outline strokes in square boxes bordered by a hairline (3rem in the opening cards, 1.75rem to 2.25rem for icon buttons); button icons have square line caps. The one drawn mark is a three-bar asterisk, used after giant words (turned into place on scroll), after each quote in the band, beside notes and as a small mark on hovered links. Photos are cropped by `object-fit: cover` in 4:5, 3:4, 4:3 or square frames with a 1px ink border.

## Components

- **button-outline:** light fill, 1px ink border, semibold text with a square-capped icon. On hover a black layer rises from the bottom edge and the text turns light.
- **button-solid:** the same shape in ink with light text; the hover layer is light.
- **chip-link:** small boxed nav and inline links (0.875rem, weight 500). A small asterisk grows at the corner on hover and the fill goes to frame grey.
- **numbered-column:** black block with a light numeral anchored at the bottom, in the opening, course and team sections.
- **photo-frame:** bordered crop holding an image on frame grey.
- **input-field:** no box, only a 1px ink line under the text; labels in caption colour.
- **schedule-row:** ruled row with a date, a title, a format line and a booking link; the course ledger and FAQ rows follow the same ruled pattern.

## Motion

GSAP 3.13 with ScrollTrigger and SplitText, plus Lenis smooth scrolling (lerp 0.09). The one idea: text and ruled blocks start slightly out of place and settle into the grid as you scroll.

- **Opening:** four member quotes run as a looping line (46 seconds a cycle) that pauses on hover; on load the heading's second line steps in and the buttons rise.
- **Motivation:** letters of the giant word start at jagged heights and settle into one line, the asterisk turns, the photo drifts inside its frame against the boxed heading.
- **Words:** the section pins and each cell flips from "fine" to its feeling word in a diagonal wave while a strike line draws across the heading word.
- **Course:** a black arm grows from the numeral column and moves row by row, lighting the current week.
- **Founder, live, teams, journal, footer:** the portrait opens from an inset clip; calendar rows start in a staircase of offsets; the team photo starts full screen and shrinks into its cell on a pinned scene; journal photos fan out from a rotated pile; the footer wordmark relaxes from weight 800 to 450.
- Headings with `data-8b-motion="step"` indent their lines on arrival; easing is mostly `power3.out` and `power2.inOut`, buttons use `cubic-bezier(0.7, 0, 0.2, 1)`.

With reduced motion requested, Lenis, the pinned scenes, scrubbed effects and entrance animations are not created, the quote band stays a wrapped list and the page reads in full; the nav bar still hides on scroll down, and the button fills and link asterisks still play on hover.

## Do's and Don'ts

- Do keep exactly four colours; add emphasis with ink fills and hairlines, not new hues.
- Do keep every corner square and every divider a 1px ink line.
- Do keep one family at 110 percent width and vary only size and weight.
- Do set `--len` to the character count when changing a giant word.
- Do keep the numbered columns black with light numerals and the footnote under each asterisk word.
- Don't add shadows, gradients, rounded cards, pills or stock icon sets.
- Don't add uppercase tracked labels, a second display face or italics.
- Don't colour the photos or add overlays; the frames and borders do the work.
- Don't add a motion effect that is not part of the scroll idea above, such as extra parallax layers or bouncing buttons; the drift of the motivation photo and its boxed heading is the only parallax.
- Don't drop the Design: 8B footer link.