[회고]일주일에 디자인 시스템을 세 번 갈아엎은 이야기

Phase 1: Apple DESIGN.md      — getdesign.md 에서 다운로드
Phase 2: Pegman 캐릭터 시스템  — 백지에서 자체 제작
Phase 3: shadcn 프리셋        — 표준 프리셋 채택 (지금)

---
version: alpha
name: Pegman-workshop
description: A character-led utility site where Pegman — a hardhat-wearing
  handyman mascot — greets, steps aside, and returns. Built on a warm cream
  workshop canvas with white tool-cards, dual accents (Safety Orange for
  action, Cobalt for structure), and IBM Plex's humanist sans-serif voice.
  UI feels like tools laid out on a craftsman's pegboard, not a luxury catalog.

colors:
  # Brand
  primary: '#F88008' # Safety Orange — every action signal
  cobalt: '#1068C0' # Structural blue — nav, links, secondary
  navy: '#082048' # Pegman outline = primary ink + headlines

  # Surfaces
  canvas: '#F4ECD8' # site default — cream pegboard with enough lift for white cards
  canvas-soft: '#FCFCE8' # Pegman's native habitat — hero halo only
  card: '#FFFFFF' # white tool-cards, inputs, ads
  hairline: '#E8E2CB' # cream-toned border, never cool gray
  # …(중략)…

  # Ink
  ink: '#082048' # = navy, primary text + headlines
  on-primary: '#FFFFFF' # label on filled orange — owner-approved brand choice, ≈2.6:1 (below AA)
  # …(중략)…

typography:
  hero-display:
    fontFamily: '"IBM Plex Sans", "IBM Plex Sans KR", "IBM Plex Sans JP", …'
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.1
  # …(토큰 13개 중략)…

mascot:
  category-masters:
    text: 'pegman-text.png' # notepad + pencil
    convert: 'pegman-convert.png' # </> code-arrow icon
    format: 'pegman-format.png' # wrench
    time: 'pegman-time.png' # flowchart / clock
    calc: 'pegman-calc.png' # calculator
    code: 'pegman-code.png' # keyboard
  state-poses:
    default: 'pegman-default.png' # neutral standing pose
    empty: 'pegman-empty.png' # hands on hips, looking at empty workbench
    success: 'pegman-success.png' # thumbs up
    error: 'pegman-error.png' # scratching head
    loading: 'pegman-loading.png' # hammering — animatable via CSS
  prop-color-rule: 'character body palette is brand-fixed (navy outline /
    orange helmet / cobalt overalls / white body); held props may use natural
    colors as small accents, area ≤ 30% of character'

components:
  option-chip:
    selectedBackground: '{colors.primary}' # filled safety orange
    selectedText: '#FFFFFF' # white on safety orange — see tradeoff note
    # Note 2 (selected): navy-on-orange tested as "muddy/dingy"; the owner
    # chose the bright helmet orange + white text for brand consistency,
    # accepting that white on #F88008 is ≈2.6:1 (below AA). All filled-orange
    # controls share this rule (button-primary, badges). Do not propagate
    # white-on-orange to body text or links.
  ad-container:
    pegmanDistance: '≥ 200px (no mascot within ad sightline)'
  # …(컴포넌트 15개 중략)…
---

## Overview

**Pegboard is a workshop, not a museum.** Every page is one tool, hung on a
wall of many. Pegman — the hardhat handyman mascot — greets visitors at the
page hero, steps aside while the tool does its work, then returns at
completion, empty state, or error.

## Voice & Copy

| State   | EN                                      | KO                                 |
| ------- | --------------------------------------- | ---------------------------------- |
| empty   | Empty workshop — paste something above. | 빈 작업대네요. 위 칸에 붙여보세요. |
| success | All set.                                | 정리됐어요.                        |
| error   | Hmm, I don't recognize this.            | 어, 이 형식은 잘 모르겠어요.       |
| 404     | This peg is empty.                      | 이 페그는 비어 있네요.             |

## Do's and Don'ts

- Don't put Pegman inside the tool card while the user is working — that's
  the Clippy trap. Pegman returns at empty, success, error, not during input.
- Don't put Pegman within 200px of an ad container.
- Don't translate "Pegman" — the character name is universal.