mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zooqueen
ae71e58a60
The two woff2 under assets/fonts were placed by hand and renamed on disk only — their internal `name` table still read the family Zen was derived from. The @font-face rule wins for matching, so a browser painted Zen and hid it; anything that reads a font's own name instead — a font picker, a PDF embed, a design tool opening the file — reported the wrong typeface on every Hanzo surface. The fix is to stop authoring them here. @hanzo/font is where Zen is authored, so gen-tokens.mjs now copies its two variable faces on every run and the copy cannot drift from its author. Declaring rather than @import-ing stays, for the reason tokens/fonts.css already gives. Also drops the stale family name from the prose that prescribes type: the integration doc, the two prompts an agent reads before it designs anything, and the two type cards' subtitles.
prompts — make an AI build it Hanzo
Entry point is
skills/design-system/SKILL.md, not this folder. The skill is what chat, hanzo.app and Claude Code load; it points here for the long form and finishes by runninghanzo-design-lint. Everything below is the reference the skill cites.
Guidance an agent reads before generating a Hanzo surface. Two layers, no overlap:
| Layer | Lives | Answers |
|---|---|---|
| System (this folder) | prompts/ |
"How does anything Hanzo look and behave?" |
| Component (co-located) | components/**/*.prompt.md |
"How do I use this Button / Dialog / Card?" |
Read the system layer first, then pull the per-component prompt for each part you place.
| File | Use |
|---|---|
system.md |
Paste as the system prompt. The whole brand, compressed to one screen. |
rules.md |
The do / don't checklist. Grep it before you ship. |
pages.md |
Ready prompts for full sections — hero, feature grid, pricing, CTA. |
Everything here assumes one import gives you the tokens:
@import "@hanzo/design/styles.css";
So every rule below can be obeyed with a CSS variable, never a hardcoded hex.
The two prompts (one and one way)
system.md— the design LANGUAGE prompt: paste as a system prompt to make any model generate Hanzo-looking output (monochrome, true-black, token-only).studio-designer.md— the AGENTIC prompt Hanzo Studio's Design System designer hands the Hanzo agent stack to GENERATE/EDIT this repo's file tree with its file tools, grounded inguidelines/DESIGN.md. Usessystem.md's language rules.