# PIAF Alignment Studio — Design System A unified, production-ready design system for **PIAF Alignment Studio** — a warm, quietly premium boutique Pilates & wellness studio in North Point, Hong Kong. Bilingual EN / Traditional-Chinese (HK). **Design direction:** *Spacious Minimal × Warm Tonal* — calm, grounded, sanctuary-like. The accent is a quiet terracotta; never loud. Style the brand name as **PIAF** (all caps) in copy and display — lowercase **piaf** only in file, repo and CSS identifiers; never mixed. --- ## Sources This system was built from materials supplied by the studio. The reader may not have access, but they are recorded here for provenance and deeper exploration: - **Branding repo:** `stealth-compute/piaf-branding-kit` (GitHub) — contains the self-hosted webfonts and the authoritative typography reference page (`index.html`). - **Live type reference:** https://piaf-branding-kit.vercel.app/ — the canonical font-role specification (sizes, weights, tracking, line-heights) for both English and Traditional Chinese. Explore it to extend the type system faithfully. - **Brand photography & font-pairing frames:** four mood images (`assets/mood/`) — warm-tonal studio photography that sets the palette and imagery tone. - **Logo suite:** 14 logo files (`assets/logos/`) — monogram, wordmark, and full lockups in black and white. > If you have access to the GitHub repo above, browse it to recreate or extend PIAF interfaces with higher fidelity than this kit alone provides. --- ## Brand context PIAF teaches four disciplines — **Reformer Pilates (彼拉提斯), Yoga (瑜珈), Barre (芭蕾塑形), and Sound Healing / singing bowl (頌缽音療)** — in small classes (eight mats) with considered, unhurried cueing. The brand sells a *feeling* (lightness, freedom, alignment) more than a workout. The visual world is warm sand backdrops, espresso-brown activewear, dried pampas, soft daylight. --- ## Content fundamentals — how PIAF writes - **Tone:** calm, grounded, sensory. Sells a feeling, not a transformation. Sanctuary, not gym. - **Voice / person:** speaks *to* the reader (second person, gentle imperative) and *as* a quiet host. "Feel lighter. Move freely." · "Find your lightness through movement." - **Casing:** Display copy is **sentence case** in Canela; structural labels (eyebrows, subtitles, buttons) are **UPPERCASE** with wide tracking. - **Name casing:** The brand name is **PIAF** (all caps) in copy and display, but lowercase **piaf** in technical identifiers (file / repo / package / skill names, URLs, CSS classes) — never mixed (not "Piaf"). The only exception is code identifiers the language forces to capitalise (React component names, the JS namespace). - **Length & rhythm:** short, declarative. Often two beats joined by a period — *"Small classes. Considered cues."* Pull-quotes are first-person member voice, always italic. - **Bilingual:** English and Traditional Chinese sit side by side as equals. ZH is set in serif for titles, sans for body. e.g. *Movement is the language of freedom. / 感受輕盈，展翅翱翔。* - **Emoji:** never. No exclamation stacking, no hype, no urgency ("limited spots!!!" is off-brand). - **Numbers:** quiet and factual — "50 min", "8 mats", "2 spots left", "HK$280". No vanity stats. **On-brand:** "Feel lighter. Move freely." · "Movement is the language of freedom." · "I came for the Pilates. I stayed for how it made me feel." **Off-brand:** "UNLOCK YOUR BEST BODY NOW!!" · "Crush your goals 💪🔥" · "The #1 studio in HK". --- ## Visual foundations **Colour.** Three OKLCH families, each an 11-step ramp (50→950), driving one semantic token layer that maps to **both light and dark** mode: - **Warm Spine** — the backbone neutral. Sand anchors (`#D9C6B0`, `#C1A685`) in the light half; espresso/near-black browns (`#392927`, `#341D17`, `#1D1311`) in the dark half. Hue drifts warm-yellow→red as it darkens. Backgrounds, surfaces *and* text all come from this one family. - **Stone** — cooler greige around `#BDBAB0`, for borders, dividers, secondary surfaces, so the UI never goes monotone-brown. - **Clay** — the single accent, a **deeper terracotta** (`clay-500 #CB7967`), with muted, sand-leaning tints at the light end. (Supersedes the earlier lighter-clay anchors Blush `#D9B9AE` · Warm `#B87E6A` · Fired `#8C5C4A`, kept in git history.) - Light = linen canvas + deep-brown text; Dark = near-black warm-brown + cream text. Accent lightness shifts per mode (clay-500 light / clay-400 dark) and **buttons use dark espresso text on terracotta** so every text pairing clears **WCAG AA** (see the Contrast card). **Type.** Canela Deck (display serif) pairs with Montserrat (UI/body); Cormorant Garamond carries italic pull-quotes; **Moglan is the logo/wordmark only**. Traditional Chinese uses Noto Serif HK (titles) + Noto Sans HK (body), with **Noto Serif HK set italic** for ZH pull-quotes (`--font-quote-zh` / `.piaf-quote-zh`) — a synthesised oblique for now, mirroring Cormorant in Latin. Display copy is Canela **Light 300**; impact is Canela **Bold uppercase**. **Imagery.** Warm-tonal photography — sand and linen backdrops, espresso activewear, soft natural light, occasional B&W studio shots for drama. Imagery is full-bleed behind a vertical espresso scrim (top ~34% → bottom ~72%) when carrying text. No cool tones, no harsh flash, no stock-gym energy. **Shape & elevation.** Soft, generous corners (14px default card, 22px large, pill chips/avatars). Elevation is warm and low — espresso-tinted, diffuse shadows (never grey, never harsh). Cards are a raised warm-white surface in light mode, espresso in dark, with a 1px stone border. **Layout & space.** Airy. 4px spacing base; sections breathe at 96–128px vertical rhythm; text columns cap ~66ch. Max container 1200px. Whitespace is a feature. **Motion.** Slow and sanctuary-calm — 140/240/440ms durations, gentle `ease-out`, **no bounce, no overshoot**. Drawers slide; surfaces fade. Honours `prefers-reduced-motion`. **States.** Hover = lift to the next-**lighter** accent stop (a warm glow — never darken; darkening the deep terracotta breaks dark-text contrast), or a clay-tint wash for ghost; press = subtle `scale(0.97)`; focus = 2px clay ring with offset + soft warm-sand `accent-muted` glow. Borders are intentionally soft hairlines (`--border`); use `--border-strong` for interactive controls. --- ## Iconography PIAF's identity is **typographic and photographic**, not icon-heavy. There is no proprietary icon font. The one true mark is the **interlocking P/A monogram** — fine, geometric line-work built from two rounded squares with circular cuts (see `assets/logos/piaf_logo_*`). Use it as the brand glyph, a favicon, a watermark, or a tasteful empty-state fill (at low opacity over a warm tint). - **System icons:** when UI icons are genuinely needed (nav, controls), use a **thin, rounded-stroke** set to match the fine-line monogram — **[Lucide](https://lucide.dev)** is the recommended CDN match (1.5px stroke, rounded caps). *Flag: this is a substitution — PIAF ships no icon set of its own.* Keep icons sparse and small; let type and space do the work. - **Unicode glyphs** are used sparingly for tiny affordances (☾/☀ theme toggle, ✓ confirmation, → "book this"). Avoid decorative emoji entirely. - Never hand-draw bespoke SVG icons that compete with the monogram's line weight. --- ## Index / manifest **Root** - `styles.css` — the single entry point consumers link (imports only). - `tailwind.theme.css` — Tailwind v4 `@theme` config (alternative consumption; full ramps + semantic tokens). Pair it with `tokens/colors.css` + `tokens/spacing.css` (or just link `styles.css`), which carry the values its semantic and `--elev-*` aliases point at. Note `shadow-*` takes no colour modifier — `shadow-black/20` is silently ignored; see the file's header for why. - `readme.md` · `SKILL.md` — this guide + the portable Agent-Skill wrapper. **`tokens/`** — `colors.css` (ramps + semantic + light/dark), `typography.css` (font roles + scale + role classes), `fonts.css` (`@font-face` + Google imports), `spacing.css` (spacing/radii/shadow/motion), `base.css` (calm reset). **`fonts/`** — self-hosted Canela Deck (all weights + italics) and Moglan (logo). **`assets/`** — `logos/` (monogram, wordmark, lockups · black/white) · `mood/` (brand photography). **`components/core/`** — reusable React primitives: - `Button` — primary / secondary / ghost · sm / md / lg. - `Card` — calm surface container with optional media header. - `Tag` — pill chip for class metadata (soft / outline / neutral). - `Input` — labelled field with optional bilingual label + helper/error. - `Switch` — calm toggle. - `Avatar` — instructor/member portrait with Canela initials fallback. **`ui_kits/studio-site/`** — interactive recreation of the PIAF booking site (hero, classes, weekly schedule, testimonial, footer, slide-in booking drawer with confirmation). `index.html` is the entry; `sections.jsx` + `app.jsx` hold the surfaces. **`guidelines/`** — foundation specimen cards (Colors, Type, Spacing, Brand) shown in the Design System tab. --- ## Using this system Link the one stylesheet, then build with the tokens and components: ```html … ``` Always reference **semantic tokens** (`var(--surface)`, `var(--text-muted)`, `var(--accent)`) in product UI — not the raw ramp stops — so light/dark and future retuning flow through automatically.