innojini-huni-design-tokens

name	innojini-huni-design-tokens
description	HuniPrinting Widget Admin design token reference for the violet-based design system. Provides complete CSS custom properties, Tailwind v4 utility mappings, component variant specifications, and accessibility guidance sourced from globals.css and Pencil MCP Color Palette frame FM2Gq. Use when building or styling any Widget Admin component, applying color tokens, selecting typography scales, or implementing button/badge/input/select/tabs variants consistent with the Huni design system.
license	Apache-2.0
compatibility	Designed for Claude Code - Widget Admin (Next.js + Tailwind v4 + shadcn/ui)
allowed-tools	Read, Grep, Glob
user-invocable	false
metadata	{"version":"1.0.0","category":"design","status":"active","updated":"2026-02-27","modularized":"false","tags":"design-tokens, tailwind, css-variables, huni, widget-admin, colors, typography","related-skills":"innojini-widget-admin-design, innojini-printly-design-system","context":"Pencil MCP Color Palette frame FM2Gq - source of truth for all color values","argument-hint":"[component-name or token-category]"}
progressive_disclosure	{"enabled":true,"level1_tokens":100,"level2_tokens":4800}
triggers	{"keywords":["design token","color palette","primary color","button variant","badge variant","input style","select style","tabs style","typography","border radius","spacing","huni design","widget admin","tailwind class","css variable","bg-primary","text-primary","brand-accent"],"agents":["expert-frontend","team-designer","team-frontend-dev"],"phases":["run"]}

HuniPrinting Widget Admin Design Tokens

Source of truth: apps/admin/src/styles/globals.css + Pencil MCP Color Palette frame FM2Gq

All tokens are defined as CSS custom properties in :root and exposed as Tailwind v4 utilities via @theme inline. Never hardcode hex values — always use the token name.

---

Quick Reference

Primary Color Scale (Violet)

Token (CSS var)	Tailwind Class	Hex	Usage
--primary	bg-primary	#5538B6	Primary actions, active states
--primary-dark	bg-primary-dark	#351D87	Hover state for primary buttons
--primary-medium	bg-primary-medium	#7B68C8	Secondary emphasis
--primary-light	bg-primary-light	#9580D9	Decorative, icon fills
--primary-200	bg-primary-200	#C9C2DF	Disabled primary, subtle borders
--primary-100	bg-primary-100	#DED7F4	Hover on secondary button
--primary-50	bg-primary-50	#EEEBF9	Accent/hover surface, secondary bg
--primary-25	bg-primary-25	#F4F0FF	Lightest tint, very subtle surface
--primary-foreground	text-primary-foreground	#FFFFFF	Text on primary bg

Semantic Colors