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:

  1. Confirm the source identity exists from [[brand-identity-system]]. If not, route there first. Tokenizing without an identity is just naming colors.

  2. Tokenize colors:

    • Per color: semantic name (accent, not blue-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.
  3. 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.
Installs
1
GitHub Stars
2
First Seen
May 19, 2026
brand-tokenize — bpainter/composable-dxp-claude-marketplace