brand-tokenize
Installation
SKILL.md
Brand tokenize (orchestrator)
Extract a brand's identity system into design-system tokens — the format that flows into Tailwind config, shadcn theme, and Figma variables.
Steps:
-
Confirm the source identity exists from [[brand-identity-system]]. If not, route there first. Tokenizing without an identity is just naming colors.
-
Tokenize colors:
- Per color: semantic name (
accent, notblue-500), HEX, RGB, HSL, HSL channel format (220 90% 56%for shadcn/Tailwind v4 wrapping). - Group: primary, secondary, neutrals, functional, surface, text.
- Contrast pairings documented per token.
- Dark-mode values documented separately.
- Per color: semantic name (
-
Tokenize typography:
- Type scale as numbered tokens (
type-display,type-h1,type-h2,type-body,type-caption,type-mono). - Per token: font-family, weight, size, line-height, letter-spacing.
- Fallback stacks documented for digital surfaces.
- Type scale as numbered tokens (