---
version: alpha
name: The Fuss
description: A facial studio in Sherman, Connecticut. Parchment room, forest type, honey punctuation, blush hairline.
colors:
  parchment:    "#faf6ee"
  parchment-hi: "#fdfaf1"
  parchment-lo: "#f2eadb"
  forest:       "#2d4a3a"
  forest-deep:  "#1f3428"
  forest-soft:  "#486456"
  honey:        "#b89968"
  honey-soft:   "#c9ae82"
  blush:        "#e8c5b8"
  blush-deep:   "#d9a99a"
  ink:          "#1a1f1d"
  ink-soft:     "#3a4340"
typography:
  wordmark:
    fontFamily: Cormorant Garamond
    fontWeight: 500
    fontSize: 8rem
    letterSpacing: -0.012em
  display:
    fontFamily: Cormorant Garamond
    fontWeight: 500
    fontSize: 3rem
    lineHeight: 1.1
    letterSpacing: -0.01em
  h2:
    fontFamily: Cormorant Garamond
    fontWeight: 500
    fontSize: 2.5rem
    lineHeight: 1.15
  tagline:
    fontFamily: Cormorant Garamond
    fontWeight: 400
    fontStyle: italic
    fontSize: 1.75rem
    lineHeight: 1.3
  body:
    fontFamily: Cormorant Garamond
    fontWeight: 400
    fontSize: 1.0625rem
    lineHeight: 1.65
  kicker:
    fontFamily: Inter
    fontWeight: 500
    fontSize: 0.6875rem
    letterSpacing: 0.28em
    textTransform: uppercase
  utility:
    fontFamily: Inter
    fontWeight: 400
    fontSize: 0.8125rem
    letterSpacing: 0.04em
rounded:
  none: 0px
  sm: 0px
  md: 0px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 72px
  xxl: 128px
components:
  wordmark:
    typography: "{typography.wordmark}"
    textColor: "{colors.forest}"
  wordmark-period:
    textColor: "{colors.blush}"
  kicker:
    textColor: "{colors.honey}"
    typography: "{typography.kicker}"
  hairline:
    backgroundColor: "{colors.blush}"
    height: 1px
  tagline:
    typography: "{typography.tagline}"
    textColor: "{colors.forest}"
  place-stamp:
    typography: "{typography.kicker}"
    textColor: "{colors.forest}"
    borderTop: "1px solid {colors.blush}"
    borderBottom: "1px solid {colors.blush}"
    padding: "12px 20px"
  card-voice:
    backgroundColor: "{colors.parchment-hi}"
    textColor: "{colors.forest}"
    padding: "40px 36px"
---

## Overview

The Fuss is a facial studio for one client at a time. The brand carries the room out onto the internet: warm parchment for every surface, deep forest for the type, honey for the small things that mark and label, ink only when something must be read, and blush as the studio's soft recurring note. Nothing bohemian. Nothing transformational. A room. An hour. Warm hands.

The whole system is designed to feel *confidently quiet* on screen. Motion is slow (breath, not swagger). Layout is composed, not decorated. Type is set in one serif family (Cormorant Garamond) with a single sans (Inter) for utility.

## Colors

The palette is five colours doing five specific jobs.

- **Parchment (#FAF6EE)**: *The room.* Every surface starts here. Warmer than off-white. If it reads beige on a screen, it has drifted correct.
- **Forest (#2D4A3A)**: *The type.* Deep enough to read at body sizes, alive enough not to feel like ink.
- **Honey (#B89968)**: *The punctuation.* Small caps, a kicker, a keyline. Warm brass, not gold. Never the sentence.
- **Blush (#E8C5B8)**: *Hers, a hairline.* A folded card. A ribbon on a parcel. The period at the end of the mark. Never a fill.
- **Ink (#1A1F1D)**: *When something must be read.* Contact details, legal, the confirmation of an appointment. Not a display colour.

Never on pure white. Never on pure black. The palette is a room, and rooms have walls.

## Typography

Cormorant Garamond does the work: 500 for display and the wordmark, 400 for body, italic for the aside. Inter carries the utility: small-caps kickers, city lines, times of day. No third face.

The wordmark is `the fuss.` lowercase. The period is set in blush: it is not a stop, it is a note. Never bold. Never all-caps.

## Layout

The system is grid-and-air: generous outer gutters, single-column reading measure (~62ch) for prose, hairline rules between sections. Nothing rounded: corners are square. Cards use 1px hairline borders in honey at low opacity, never drop shadows.

The landing page is one screen. The brand kit is an editorial magazine that scrolls, with pull-quotes breaking every 800–1000px to pace the reader.

## Elevation & Depth

There is none. No shadows. No z-layers. The ambient background is a single fixed radial-gradient bloom of warm light in one corner and blush in the opposite: the candle in the room, not an interface effect.

## Shapes

Every corner is square. Every rule is a single hairline. Every accent is a small circle: the blush period on the wordmark, the blush bullet on a section kicker, the round dial thumb on a personality slider. The circle is the brand's only soft shape.

## Components

- **wordmark**: `the fuss<span class="period">.</span>` in Cormorant Garamond 500, forest, with the period recoloured blush.
- **kicker**: small-caps Inter label in honey, prefixed with a small blush bullet.
- **hairline**: a 1px blush rule, used as section separator, place-stamp border, and hover indicator.
- **place-stamp**: city name in Inter kicker style, between two blush hairlines.
- **card-voice**: parchment-hi background with a hairline border, used for The Promise and The Wink.

## Do's and Don'ts

**Do.** Set the wordmark in Cormorant Garamond 500, lowercase, with the period in blush. Set kickers in Inter tracked out. Use blush as a hairline, never a fill. Give sections room to breathe (72–128px vertical gutters). Cite Sherman, CT.

**Don't.** Never use em-dashes in copy (biggest AI tell). Never set the mark bold, italic, or all-caps. Never use gradients as content backgrounds. Never use words the brand doesn't say: sanctuary, oasis, haven, journey, unlock, transformation, glow-up, bohemian, crystals. Never add a third font.

## Motion

The wordmark breathes on a 6.8s cycle (opacity 1 to 0.94, letter-spacing -0.012em to -0.008em). Interactive elements bloom a blush hairline on hover, 400ms ease-out. Reduced motion is respected.

## Assets

Vector marks live at the repo root as SVG with outlined paths (font-independent):

- `wordmark.svg`: full `the fuss.` mark, forest + blush period.
- `monogram.svg`: `f.` monogram for favicons and small applications.
- `favicon.svg`: monogram inside a parchment tile for browser tabs and app icons.

Mood-board imagery (room renders, business cards, merch, flatlays) lives under `assets/mood/` and is used in the brand-kit page as reference art.

## Notes

Information architecture for this document scaffolded on the [DESIGN.md format specification](https://github.com/google-labs-code/design.md) from Google Labs. The YAML front matter follows that spec's token schema; the prose sections follow the ordering it recommends (Overview → Colors → Typography → Layout → Elevation → Shapes → Components → Do's and Don'ts).