{"_id":"@90chanho/design-system","name":"@90chanho/design-system","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@90chanho/design-system","version":"0.2.0","description":"코리안심슨 개인 디자인 시스템 — Marigold primary, Pretendard 본문, 토스 UX 라이팅 영향.","type":"module","sideEffects":["**/*.css"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"tsup && cp src/styles/tokens.css dist/styles.css","dev":"tsup --watch","typecheck":"tsc --noEmit","lint":"eslint src","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepublishOnly":"npm run typecheck && npm run build","changeset":"changeset","version-packages":"changeset version","release":"npm run build && changeset publish"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@changesets/cli":"^2.31.0","@storybook/addon-a11y":"^8.6.12","@storybook/addon-essentials":"^8.6.12","@storybook/addon-themes":"^8.6.12","@storybook/react":"^8.6.12","@storybook/react-vite":"^8.6.12","@types/react":"^18.3.23","@types/react-dom":"^18.3.7","eslint":"^9.25.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.0.0","prettier":"^3.5.3","react":"^18.3.1","react-dom":"^18.3.1","storybook":"^8.6.12","tsup":"^8.4.0","typescript":"^5.8.3","typescript-eslint":"^8.31.1"},"_id":"@90chanho/design-system@0.2.0","gitHead":"d47d78dd8e5c085f29400cbd7558dba0bc3a34c5","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-+F92CeENZkSh4Uh3xeBV/drlJQleK2L0ooX3I7Julx7s7wYpsjlMeDkTUib9wk/VKMBwaqgJKD43Y76fBKQrCw==","shasum":"c75fc9def2b238785a2f4a975fc08a9c16dbe6ab","tarball":"https://registry.npmjs.org/@90chanho/design-system/-/design-system-0.2.0.tgz","fileCount":34,"unpackedSize":355492,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDb6bHgSjUOuXOf32l5KWF65/J2uwos1N0NFNmGIEWwZwIhAKBeSLD8F0FKW+RTeelCjbxfmu1PNN8SGJX5eVdO2cxY"}]},"_npmUser":{"name":"90chanho","email":"90chanho@gmail.com"},"directories":{},"maintainers":[{"name":"90chanho","email":"90chanho@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_0.2.0_1777369436499_0.8826920662841249"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-28T09:43:56.378Z","0.2.0":"2026-04-28T09:43:56.654Z","modified":"2026-04-28T09:43:56.882Z"},"maintainers":[{"name":"90chanho","email":"90chanho@gmail.com"}],"description":"코리안심슨 개인 디자인 시스템 — Marigold primary, Pretendard 본문, 토스 UX 라이팅 영향.","readme":"# 코리안심슨 Design System\n\n> 개인 사이드 프로젝트용 디자인 시스템.\n> 토스의 UX 라이팅 원칙과 미니멀한 정보 위계를 차용,\n> 개인 브랜딩(코리안심슨)에 맞게 재해석.\n\n---\n\n## 디자인 철학\n\n- **Navigating, not blaming.** 에러 메시지는 책망이 아닌 안내. \"실패했어요\" 대신 \"다시 시도해 주세요\".\n- **One screen, one core action.** 한 화면에 하나의 핵심 액션. 보조 액션은 위계로 분리.\n- **Essential over nice-to-have.** \"있으면 좋은\" 기능보다 \"없으면 안 되는\" 기능에 집중.\n\n이 시스템은 토스의 사고방식을 빌렸지만, 톤과 색은 의도적으로 다르다 —\n브랜드 컬러는 토스 블루를 회피한 **마리골드(F59E0B)**. 이름의 \"Simpson\"에서 따온 따뜻한 노랑.\n\n---\n\n## Sources\n\n- **GitHub (reference patterns):** [`daangn/seed-design`](https://github.com/daangn/seed-design) — 토큰 구조 참고용. 직접 import하지는 않음.\n- **Logo source:** `https://ninezerochan.dev/favicon.svg` — 원본은 `assets/logo-original.svg`로 보존, 브랜드 색으로 리컬러한 버전이 `assets/logo.svg`.\n- **Author:** [@koreasimpson](https://github.com/koreasimpson)\n\n---\n\n## Index\n\n```\nREADME.md                ← (you are here) 시스템 전체 가이드\ncolors_and_type.css      ← 모든 토큰 (CSS 변수). 어떤 파일에서든 import해서 사용.\nSKILL.md                 ← Agent Skill 매니페스트 (Claude Code 호환)\n\nassets/\n  logo.svg               ← 브랜드 컬러 적용 로고\n  logo-original.svg      ← 원본 (참고용)\n\nfonts/                   ← Pretendard / Inter / Geist Mono은 CDN으로 로드\n                           (필요 시 ttf 다운로드 위치)\n\npreview/                 ← Design System 탭에 표시되는 카드들\n  *.html\n\nui_kits/\n  web/                   ← 개인 웹사이트/포트폴리오 UI 키트\n    index.html           ← 인터랙티브 데모\n    *.jsx                ← 컴포넌트\n```\n\n---\n\n## CONTENT FUNDAMENTALS\n\n브랜드 보이스는 한국어 기준 **\"해요체\"**, 친구처럼 다가가되 가볍지 않게.\n\n### Voice & Tone\n\n| 원칙 | Do | Don't |\n|---|---|---|\n| 종결어미 | \"저장했어요\" | \"저장하였습니다\" / \"저장됨\" |\n| 호칭 | \"당신\" 회피, 주어 생략 | \"고객님께서는…\" |\n| 1인칭 | 시스템은 \"저\" 안 씀, 행위 주체 사용자 | \"제가 도와드릴게요\" |\n| 부정 → 긍정 전환 | \"다시 시도해 주세요\" | \"실패했어요\" |\n| 전문 용어 | 일상어로 풀어쓰기 | \"인증 토큰이 만료되었습니다\" |\n\n### 영문/숫자 처리\n- 영문/숫자는 **Inter** 또는 **Geist** (`--font-latin`).\n- 숫자는 항상 tabular nums (`font-feature-settings: 'tnum' 1`).\n- 한글과 라틴 문자가 섞인 본문은 Pretendard 한 글꼴로 처리 (혼용 시 베이스라인이 흔들리지 않음).\n\n### Casing\n- 한글: 일반 문장 케이스. 명사 나열도 가운뎃점(\"·\") 대신 쉼표.\n- 영문: Title Case는 헤더에만, 본문은 sentence case.\n- 버튼 라벨은 동사 우선: \"저장\", \"삭제\", \"다시 보기\" — \"확인/취소\" 같은 모호어 지양.\n\n### Vibe\n- 차분한 정보 위계. 시각적으로 조용하지만, 액션이 필요한 곳에서만 마리골드가 등장.\n- 이모지는 **사용하지 않음**. 의미 전달은 텍스트와 아이콘으로.\n- 유머나 캐주얼한 톤은 마이크로카피에서만 (예: 빈 상태 메시지). UI 자체는 진중.\n\n### 카피 예시\n\n```\n✅ \"저장했어요\"                        ❌ \"저장이 완료되었습니다\"\n✅ \"다시 시도해 주세요\"                 ❌ \"오류가 발생했습니다\"\n✅ \"잠깐, 한 번 더 확인해 주세요\"        ❌ \"경고: 위험한 작업입니다\"\n✅ \"아직 등록한 글이 없어요\"             ❌ \"데이터가 존재하지 않음\"\n✅ \"비밀번호는 8자 이상이어야 해요\"       ❌ \"비밀번호 형식 오류\"\n```\n\n---\n\n## VISUAL FOUNDATIONS\n\n### Color\n- **Primary: Marigold (`#F59E0B`)** — 50~900까지 9단계. 토스 블루와의 차별화 의도.\n- **Gray: 11단계** (`gray-0`부터 `gray-950`까지). 배경/보더/텍스트 위계는 거의 항상 gray로.\n- **Semantic 4색**: success(emerald), warning(marigold-shared), error(red), info(indigo). 각 색마다 fg 1개, bg 1개.\n- 컬러 사용 비율: gray 90% / marigold 8% / semantic 2%. **마리골드는 한 화면에 하나만.**\n\n### Typography\n- **본문: Pretendard Variable** — 한글 가독성과 라틴 문자 하모니 모두 좋음.\n- **영문/숫자: Inter** — `.numeric` 클래스로 명시 적용.\n- **Mono: Geist Mono** — 코드, 토큰, 키보드 키.\n- **위계는 4단계로 단순화**: Display(40) / Title(22) / Body(16) / Caption(13).\n- **라인하이트 1.5+ 고정** — 한글 가독성 우선. body는 1.6.\n- 자간(letter-spacing)은 큰 글자에서만 음수(-0.01~-0.02em). 본문은 0.\n\n### Spacing\n- **4px 베이스 그리드.** 8배수 강제 X. 4, 8, 12, 16, 24, 32, 48, 64.\n- 컴포넌트 내부 패딩: 보통 12~16px. 섹션 간 간격: 32~48px.\n\n### Backgrounds\n- **흰 바탕(`gray-0`) 기본.** 카드는 보더로 구분, 그림자 X.\n- 그라데이션·전면 이미지·반복 패턴 **없음**. 배경은 절대 시끄럽지 않게.\n- 강조가 필요한 섹션은 `bg-2`(gray-50) sunken.\n\n### Animation\n- **200ms ease-out 기본.** 호버는 150ms, 패널 진입은 300ms까지.\n- bounce/spring 애니메이션은 사용하지 않음. fade + 미세한 translate(2~4px)만.\n- 페이지 전환은 fade-only.\n\n### Hover / Press states\n- **Hover: 배경 한 단계 어둡게** (`gray-100` → `gray-200`). opacity 변경 금지.\n- **Press: scale(0.98) + 배경 한 단계 더 어둡게.** 100ms.\n- 텍스트 링크 hover는 `--primary-700`로 색만 바뀜, 밑줄은 항상 유지.\n\n### Borders & Shadows\n- **보더 우선, 섀도 최소.** 카드/입력은 `1px solid var(--border-1)`.\n- 섀도는 두 단계만:\n  - `--shadow-1`: 토스트, 작은 부유 요소.\n  - `--shadow-2`: 모달, 드롭다운.\n- 인너 섀도는 사용하지 않음.\n\n### Cards\n```\nborder: 1px solid var(--border-1)\nborder-radius: 12px\nbackground: var(--bg-1)\npadding: 16px ~ 24px\nshadow: 없음 (또는 호버 시 --shadow-1)\n```\n\n### Radii\n- 8 / 12 / 16 / 999. 그 외 값 사용하지 않음.\n- 버튼·입력: 12px (medium).\n- 카드·모달: 16px (large).\n- 칩·태그: 8px (small) 또는 999(full).\n\n### Layout\n- 최대 컨텐츠 폭 1200px. 모바일 16px, 데스크톱 24~32px 사이드 패딩.\n- 픽스드 헤더 사용 시 backdrop blur 12px + `--bg-1`의 80% 알파.\n- 그리드는 12-column 또는 단순 flex. CSS subgrid 적극 활용.\n\n### Transparency & Blur\n- **Blur 사용처는 두 곳뿐**: (1) 픽스드 헤더, (2) 모달 백드롭.\n- 그 외 반투명 표면은 사용하지 않음. UI는 불투명하게.\n\n### Imagery\n- 일러스트·전면 이미지는 기본적으로 사용하지 않음.\n- 사용해야 한다면 **흑백** 또는 **단일 톤** 처리. 채도 낮게.\n- 사진은 `border-radius: 12px` + 1px gray-200 보더.\n\n---\n\n## ICONOGRAPHY\n\n- **Lucide Icons** (https://lucide.dev) 사용. CDN: `https://unpkg.com/lucide-static/icons/<name>.svg`.\n  - 이유: stroke 1.5~2px, 둥근 끝, 한국어 UI와 시각적 무게 매치.\n  - **Substitution 플래그:** 자체 아이콘 라이브러리 없음. Lucide를 기본값으로 채택. 사용자 자체 아이콘이 생기면 `assets/icons/`에 넣고 교체.\n- **Stroke width 고정: 1.75px.** 24×24 viewBox.\n- **fill style 금지** — outline only로 통일.\n- 아이콘 색은 `currentColor`. 항상 부모 텍스트 색 상속.\n- **이모지는 시스템 UI에 사용하지 않음.** 마이크로카피에서도 자제.\n- **Unicode 글리프**(↑↓←→, ✓, ×) 사용 가능 — 단, 본문 흐름 안에서만. 아이콘 자리 대체 X.\n- 로고: `assets/logo.svg` — 마리골드 K 모티프. 32×32 기본, 어떤 사이즈로도 스케일 가능.\n\n---\n\n## CAVEATS\n\n- **Logo:** 원본 SVG의 색만 마리골드로 변경. 원형은 `logo-original.svg`로 보존. 사용자가 별도 로고 디자인을 원하면 교체 필요.\n- **Fonts:** Pretendard / Inter / Geist Mono 모두 CDN 로드. 오프라인 환경에서는 `fonts/` 폴더에 ttf/woff2 추가 필요.\n- **Icons:** 자체 아이콘셋 부재 → Lucide를 default로 채택. 핸드드로잉 아이콘이나 자체 일러스트 시스템이 필요하면 별도 작업.\n- **UI Kit:** 단일 product(개인 웹사이트/포트폴리오 가정)만 포함. 별도 모바일 앱이나 다른 surface가 있다면 추가 키트 작업 필요.\n","readmeFilename":"README.md","_rev":"1-b5b821d1f411114fc8ba44983f7b5781"}