innojini-widget-admin-design

name	innojini-widget-admin-design
description	HuniPrinting Widget Admin design system skill. Provides project-specific design tokens, Toss/SEED-inspired admin UI principles, and layout patterns for the printing data management admin pages (apps/admin). Triggers: admin UI, 관리 페이지, design system, 디자인 토큰, 레이아웃, shadcn, globals.css, admin dashboard, 3-panel, 계층 탐색, category tree, 가격표, 옵션 관리
license	Apache-2.0
compatibility	Designed for Claude Code — innojini/widget.creator project
user-invocable	false
metadata	{"version":"1.0.0","category":"domain","status":"active","updated":"2026-02-27","tags":"admin, design-system, huni, printing, shadcn, tailwind, toss, seed","agent":"expert-frontend"}
progressive_disclosure	{"enabled":true,"level1_tokens":120,"level2_tokens":1800}
triggers	{"keywords":["admin","관리 페이지","design","디자인","레이아웃","shadcn","globals","token","토큰","탭","패널","sidebar","사이드바","카테고리 트리","계층"],"agents":["expert-frontend","team-frontend-dev","team-designer"],"phases":["run","sync"]}

innojini Widget Admin Design System

Project: apps/admin (Next.js 14 + shadcn/ui + Tailwind v4) Source: apps/admin/src/styles/globals.css — Pencil MCP Color Palette FM2Gq

---

1. Design Tokens (globals.css)

Primary Palette (Violet — Toss-inspired trust color)

--primary-dark:    #351D87   (hover, pressed)
--primary:         #5538B6   (default, ring, sidebar-primary)
--primary-medium:  #7B68C8   (secondary actions)
--primary-light:   #9580D9   (tertiary)
--primary-200:     #C9C2DF
--primary-100:     #DED7F4
--primary-50:      #EEEBF9   (hover surface = --accent)
--primary-25:      #F4F0FF   (lightest tint)
--primary-foreground: #FFFFFF

Semantic Colors

--warning:      #E6B93F   (foreground: #424242)
--success:      #7AC8C4   (foreground: #424242)
--error:        #C7000B   (foreground: #FFFFFF)
--brand-accent: #DF7939   (orange accent for highlight)

Gray Scale (6-step)

--gray-50:  #F6F6F6   (background, muted, sidebar-accent)
--gray-100: #E9E9E9
--gray-200: #CACACA   (border, input)
--gray-400: #979797   (muted-foreground, placeholder)
--gray-600: #565656
--gray-700: #424242   (default foreground)

Spacing & Radius (SEED-aligned 4px base)

--spacing:     4px   (base unit — all spacing in multiples of 4)
--radius-sm:   3px
--radius:      4px
--radius-md:   5px
--radius-pill: 20px

Typography

font: 'Noto Sans', sans-serif
base-size: 14px
letter-spacing: -0.05em (tight Korean text)

---

2. Toss-Inspired Admin Principles

Five principles adapted from Toss Design System for the admin context:

P1: Minimum Feature

• Show only what's needed for the current task
• No decorative elements — every pixel has purpose
• Default state = most common task visible immediately

P2: Trust through Data Density

• Numbers prominently sized (larger than labels)
• Status badges use semantic colors (success/warning/error)
• Empty states must explain why and what to do next

P3: Clear Action Hierarchy

• Primary action: 1 per screen (violet --primary fill button)
• Secondary action: ghost or outline variant
• Destructive: always --error color, always confirm dialog

P4: Contextual Navigation

• Active route: bg-primary/10 text-primary (already in sidebar.tsx)