---
name: piaf-design
description: Use this skill to generate well-branded interfaces and assets for PIAF Alignment Studio (a warm, quietly premium boutique Pilates & wellness studio in Hong Kong, bilingual EN / Traditional Chinese), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

Read the `readme.md` file within this skill, and explore the other available files.

If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.

If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts _or_ production code, depending on the need.

## Staying current — check the live source first

This skill is a **cached snapshot**. The living source of truth is the PIAF brand site, which grows as the design system does:

- **Source root:** `https://brand.piaf.studio/ds/` — it mirrors this folder's layout exactly, so every local file has a live twin (e.g. `tokens/colors.css` ↔ `https://brand.piaf.studio/ds/tokens/colors.css`).

When you have network access, prefer the live files over the bundled ones:

1. Fetch `https://brand.piaf.studio/ds/version.json` and compare its `version` (an ISO timestamp) to the `version.json` shipped beside this file. If the live one is newer — or your copy has none — the design system has moved on since this skill was installed.
2. When it is newer (or when in doubt and you can reach the site), read the live files instead of the cached ones: `readme.md`, the `tokens/*.css`, `tailwind.theme.css`, `components/`, `ui_kits/`, and assets all resolve under `https://brand.piaf.studio/ds/`.
3. If the site is unreachable — offline, or outbound web access is disabled — fall back to the files bundled in this skill. They are a complete, working copy, just possibly behind the latest.

This keeps you on the newest tokens, components, and guidance without re-installing. The trade-off is honest: "latest" depends on network access and on your environment allowing outbound fetches; the cached copy is what guarantees the skill always works.

## Quick orientation
- **Entry point:** link `styles.css` (imports tokens + fonts + base). Toggle dark mode with `data-theme="dark"` on any ancestor.
- **Tokens:** `tokens/colors.css` (Warm Spine / Stone / Clay ramps + semantic light/dark layer), `tokens/typography.css`, `tokens/spacing.css`. Always use semantic tokens (`--surface`, `--text-muted`, `--accent`) in product UI, not raw ramp stops.
- **Tailwind v4:** `tailwind.theme.css` provides an `@theme` config.
- **Fonts:** Canela Deck (display) + Moglan (logo only) are self-hosted in `fonts/`; Montserrat, Cormorant Garamond, Noto Serif/Sans HK load from Google Fonts.
- **Components:** `components/core/` — Button, Card, Tag, Input, Switch, Avatar (React, styled via CSS variables).
- **UI kit:** `ui_kits/studio-site/` — full booking-site recreation to copy patterns from.
- **Assets:** `assets/logos/` (monogram, wordmark, lockups · black/white), `assets/mood/` (brand photography).

## Non-negotiables
- Brand name is **PIAF** — all caps in copy and display; lowercase **piaf** in file, repo, package & skill names, URLs and CSS classes; never mixed. Voice is calm, grounded, second person; never hype, never emoji.
- Accent is a **quiet terracotta** — used sparingly. Buttons use dark espresso text on terracotta (AA).
- Warm tonal only: sand/linen/espresso. No cool tones, no harsh shadows, no bouncy motion.
- Bilingual EN / Traditional Chinese as equals — serif (Noto Serif HK) for ZH titles, sans (Noto Sans HK) for ZH body.