PIAF monogramPIAFBranding Guide
Resources · 資源

Build with PIAF資源

The vendored design-system source — SKILL.md, the full readme, the Tailwind v4 @theme config, and every token file — viewable and downloadable. Install it as a Claude Code skill, link one stylesheet, or grab the fonts.

Install as a Claude Code skill

技能套件

The whole design system is a portable agent skill (piaf-design). Drop it into your repo and any agent can design on-brand — production code or throwaway mocks.

piaf-design-skill.zip Download skill
install — from your repo root
# the zip already nests everything under piaf-design/
unzip piaf-design-skill.zip -d .claude/skills/

# you should now have:
#   .claude/skills/piaf-design/SKILL.md
#   .claude/skills/piaf-design/tokens/ …  fonts/ …  ui_kits/ …

# then, in Claude Code:
> use the piaf-design skill

The bundle carries the full token set, self-hosted fonts, logo & mood assets, the core components, the guideline specimens and both UI kits. The internal _ds_bundle.js / _ds_manifest.json are studio-internal — harmless to keep or delete.

…or just the design language (design.md)

設計語言

For agents and tools that don't load skills — Cursor, Copilot, Stitch, plain LLMs. One flat markdown file with the brand rules, tokens, type and voice. Generated from the same source as this site, so it never drifts.

The brand brief, distilled to one file: drop it in a repo or reference it in a prompt and any agent builds on-brand — no install. It carries the rules, not the kit; for the real tokens CSS, fonts and components, use the skill above. Also bundled inside the skill as DESIGN.md.

…or consume the tokens directly

使用方式
Plain CSS
link the entry point
<link rel="stylesheet" href="/ds/styles.css">

<!-- toggle dark mode on any ancestor -->
<html data-theme="dark"> … </html>
Tailwind v4
app/globals.css
@import "tailwindcss";
@import "/ds/tailwind.theme.css";

/* utilities: bg-clay-500, text-text-muted,
   border-border, font-display, rounded-md … */

The full design-system guide

設計系統指南

Surfaced here in full so you can read and use the system as-is — straight from the source readme.

Loading…

⌘ Resource manifest
resources.json
{
  "skillZip": "/downloads/piaf-design-skill.zip",
  "fontsZip": "/downloads/piaf-fonts.zip",
  "skill":    "/ds/SKILL.md",
  "version":  "/ds/version.json",
  "designMd": "/design.md",
  "guide":    "/ds/readme.md",
  "entry":    "/ds/styles.css",
  "tailwind": "/ds/tailwind.theme.css",
  "tokens": {
    "colors":         "/ds/tokens/colors.css",
    "colorsExtended": "/ds/tokens/colors-extended.css",
    "typography":     "/ds/tokens/typography.css",
    "spacing":        "/ds/tokens/spacing.css",
    "gradients":      "/ds/tokens/gradients.css",
    "fonts":          "/ds/tokens/fonts.css",
    "base":           "/ds/tokens/base.css"
  },
  "uiKits": ["/ds/ui_kits/brand-book", "/ds/ui_kits/studio-site"]
}
⌘ Build checklist
before shipping
[ ] semantic tokens only (--surface/--text/--accent), never raw ramp stops
[ ] light AND dark verified via [data-theme]
[ ] "PIAF" rendered in caps everywhere
[ ] accent (clay) sparing; dark espresso text on terracotta buttons
[ ] warm-tonal only — no cool hues on core chrome
[ ] EN + Traditional Chinese set as equals (serif ZH title / sans ZH body)
[ ] motion <= 440ms, ease-out, no bounce, honours reduced-motion
[ ] icons = Lucide 1.5px stroke, sparse; brand glyph = P/A monogram
⌘ Non-negotiables
constraints
1. 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.
2. Accent is a quiet terracotta — used sparingly. Buttons use dark espresso text on terracotta (AA).
3. Warm tonal only: sand / linen / espresso. No cool tones, no harsh shadows, no bouncy motion.
4. Bilingual EN / Traditional Chinese as equals — serif (Noto Serif HK) for ZH titles, sans (Noto Sans HK) for ZH body.
5. Always reference semantic tokens (--surface, --text-muted, --accent), never raw ramp stops, in product UI.