@design-ai/cli 4.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (529) hide show
  1. package/.claude-plugin/plugin.json +164 -0
  2. package/AGENTS.ko.md +126 -0
  3. package/AGENTS.md +182 -0
  4. package/CHANGELOG.md +6883 -0
  5. package/CLAUDE.md +39 -0
  6. package/LICENSE +21 -0
  7. package/README.ko.md +245 -0
  8. package/README.md +277 -0
  9. package/agents/README.md +14 -0
  10. package/agents/a11y-reviewer.md +121 -0
  11. package/agents/component-architect.md +57 -0
  12. package/agents/design-critic.md +46 -0
  13. package/agents/token-extractor.md +63 -0
  14. package/cli/bin/design-ai-mcp.mjs +6 -0
  15. package/cli/bin/design-ai.mjs +40 -0
  16. package/cli/commands/audit.mjs +111 -0
  17. package/cli/commands/check.mjs +226 -0
  18. package/cli/commands/doctor.mjs +141 -0
  19. package/cli/commands/examples.mjs +58 -0
  20. package/cli/commands/help.mjs +271 -0
  21. package/cli/commands/install.mjs +161 -0
  22. package/cli/commands/learn.mjs +1871 -0
  23. package/cli/commands/list.mjs +143 -0
  24. package/cli/commands/mcp.mjs +27 -0
  25. package/cli/commands/pack.mjs +211 -0
  26. package/cli/commands/prompt.mjs +199 -0
  27. package/cli/commands/route.mjs +247 -0
  28. package/cli/commands/search.mjs +60 -0
  29. package/cli/commands/show.mjs +52 -0
  30. package/cli/commands/site.mjs +558 -0
  31. package/cli/commands/status.mjs +161 -0
  32. package/cli/commands/uninstall.mjs +119 -0
  33. package/cli/commands/update.mjs +184 -0
  34. package/cli/commands/version.mjs +94 -0
  35. package/cli/commands/workspace.mjs +176 -0
  36. package/cli/lib/brief.mjs +52 -0
  37. package/cli/lib/check.mjs +642 -0
  38. package/cli/lib/dispatch.mjs +109 -0
  39. package/cli/lib/doctor.mjs +505 -0
  40. package/cli/lib/examples.mjs +258 -0
  41. package/cli/lib/exec.mjs +63 -0
  42. package/cli/lib/help-flags.mjs +5 -0
  43. package/cli/lib/learn.mjs +3694 -0
  44. package/cli/lib/log.mjs +47 -0
  45. package/cli/lib/mcp-server.mjs +426 -0
  46. package/cli/lib/output.mjs +101 -0
  47. package/cli/lib/pack.mjs +599 -0
  48. package/cli/lib/paths.mjs +63 -0
  49. package/cli/lib/prompt.mjs +603 -0
  50. package/cli/lib/route.mjs +740 -0
  51. package/cli/lib/search.mjs +158 -0
  52. package/cli/lib/show.mjs +161 -0
  53. package/cli/lib/signals.mjs +2337 -0
  54. package/cli/lib/site.mjs +6617 -0
  55. package/cli/lib/skill-proposals.mjs +2046 -0
  56. package/cli/lib/suggest.mjs +66 -0
  57. package/cli/lib/workspace.mjs +1056 -0
  58. package/commands/README.md +25 -0
  59. package/commands/component-spec.md +34 -0
  60. package/commands/conversational.md +44 -0
  61. package/commands/design-from-brief.md +141 -0
  62. package/commands/design-review.md +62 -0
  63. package/commands/document-from-brief.md +47 -0
  64. package/commands/extract-tokens.md +38 -0
  65. package/commands/game-ui.md +40 -0
  66. package/commands/illustration.md +37 -0
  67. package/commands/iterate.md +167 -0
  68. package/commands/motion-design.md +54 -0
  69. package/commands/palette-from-brand.md +50 -0
  70. package/commands/print.md +49 -0
  71. package/commands/slide-deck.md +46 -0
  72. package/commands/spatial.md +47 -0
  73. package/commands/stability-review.md +74 -0
  74. package/commands/video.md +42 -0
  75. package/commands/website-improvement.md +77 -0
  76. package/docs/AGENT-DEVELOPMENT.md +658 -0
  77. package/docs/AI-LEARNING.md +429 -0
  78. package/docs/AIDER-INTEGRATION.md +224 -0
  79. package/docs/ARCHITECTURE.ko.md +183 -0
  80. package/docs/ARCHITECTURE.md +105 -0
  81. package/docs/CODEX-INTEGRATION.md +311 -0
  82. package/docs/COMPANY-WEBSITE-DOGFOOD.ko.md +144 -0
  83. package/docs/COMPANY-WEBSITE-DOGFOOD.md +150 -0
  84. package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.ko.md +153 -0
  85. package/docs/COMPANY-WEBSITE-INTAKE-TEMPLATE.md +154 -0
  86. package/docs/CONTRIBUTING.ko.md +203 -0
  87. package/docs/CONTRIBUTING.md +242 -0
  88. package/docs/CURSOR-INTEGRATION.md +220 -0
  89. package/docs/DISTRIBUTION.ko.md +248 -0
  90. package/docs/DISTRIBUTION.md +253 -0
  91. package/docs/DOGFOOD-FINDINGS.md +180 -0
  92. package/docs/DOGFOOD-V4-FINDINGS.md +139 -0
  93. package/docs/DOGFOOD-V4-MKDOCS-FINDINGS.md +233 -0
  94. package/docs/DOGFOOD-V4-NPM-FINDINGS.md +157 -0
  95. package/docs/DOGFOOD-V4-VSCODE-FINDINGS.md +135 -0
  96. package/docs/FIGMA-INTEGRATION.md +222 -0
  97. package/docs/MCP-INTEGRATION.md +243 -0
  98. package/docs/MIGRATION-v4.md +121 -0
  99. package/docs/PLUGIN-PACKAGING.md +240 -0
  100. package/docs/PRODUCT-READINESS.md +66 -0
  101. package/docs/QUICKSTART.ko.md +178 -0
  102. package/docs/QUICKSTART.md +179 -0
  103. package/docs/RELEASE-CHECKLIST.md +292 -0
  104. package/docs/ROADMAP.md +19495 -0
  105. package/docs/SESSION-LOG.md +940 -0
  106. package/docs/TOKEN-SYNC.md +237 -0
  107. package/docs/USING.ko.md +206 -0
  108. package/docs/USING.md +218 -0
  109. package/docs/WEBSITE-IMPROVEMENT.ko.md +75 -0
  110. package/docs/WEBSITE-IMPROVEMENT.md +89 -0
  111. package/docs/announcements/README.md +56 -0
  112. package/docs/announcements/dev-to-korea.md +206 -0
  113. package/docs/announcements/hashnode-post.ko.md +232 -0
  114. package/docs/announcements/okky-post.ko.md +158 -0
  115. package/docs/announcements/press-kit.md +101 -0
  116. package/docs/announcements/reddit-r-korea.md +196 -0
  117. package/docs/announcements/show-hn.md +114 -0
  118. package/docs/announcements/twitter-thread.md +255 -0
  119. package/docs/external-status.md +34 -0
  120. package/docs/integrations/aider-walkthrough.ko.md +275 -0
  121. package/docs/integrations/aider-walkthrough.md +274 -0
  122. package/docs/integrations/codex-walkthrough.ko.md +297 -0
  123. package/docs/integrations/codex-walkthrough.md +297 -0
  124. package/docs/integrations/cursor-walkthrough.ko.md +281 -0
  125. package/docs/integrations/cursor-walkthrough.md +284 -0
  126. package/docs/integrations/design-ai-mcp-server.md +169 -0
  127. package/docs/integrations/figma-mcp.md +149 -0
  128. package/docs/integrations/github-mcp.md +178 -0
  129. package/docs/integrations/linear-mcp.md +215 -0
  130. package/docs/integrations/notion-mcp.md +174 -0
  131. package/docs/integrations/sdk-walkthrough.ko.md +375 -0
  132. package/docs/integrations/sdk-walkthrough.md +375 -0
  133. package/docs/integrations/slack-mcp.md +208 -0
  134. package/docs/integrations/vscode-walkthrough.ko.md +202 -0
  135. package/docs/integrations/vscode-walkthrough.md +205 -0
  136. package/docs/requirements.txt +16 -0
  137. package/docs/site-overrides/extra.css +83 -0
  138. package/docs/site-overrides/favicon.svg +4 -0
  139. package/docs/site-overrides/logo.svg +10 -0
  140. package/docs/site-overrides/main.html +18 -0
  141. package/docs/website-console/app.js +2540 -0
  142. package/docs/website-console/index.html +24 -0
  143. package/docs/website-console/styles.css +975 -0
  144. package/examples/README.md +252 -0
  145. package/examples/cases/dogfood-v4-korean-hr-onboarding.md +356 -0
  146. package/examples/component-accordion-actions.md +153 -0
  147. package/examples/component-accordion-details.md +147 -0
  148. package/examples/component-accordion-summary.md +180 -0
  149. package/examples/component-accordion.md +229 -0
  150. package/examples/component-account-card.md +284 -0
  151. package/examples/component-address-input.md +260 -0
  152. package/examples/component-affix.md +190 -0
  153. package/examples/component-alert-dialog.md +210 -0
  154. package/examples/component-alert-title.md +77 -0
  155. package/examples/component-alert.md +192 -0
  156. package/examples/component-amount-input.md +278 -0
  157. package/examples/component-anchor.md +198 -0
  158. package/examples/component-app-bar.md +249 -0
  159. package/examples/component-aspect-ratio.md +156 -0
  160. package/examples/component-auto-complete.md +199 -0
  161. package/examples/component-avatar-group.md +170 -0
  162. package/examples/component-avatar.md +191 -0
  163. package/examples/component-back-top.md +123 -0
  164. package/examples/component-backdrop.md +148 -0
  165. package/examples/component-badge.md +181 -0
  166. package/examples/component-banner.md +237 -0
  167. package/examples/component-biometric-gate.md +281 -0
  168. package/examples/component-blockquote.md +153 -0
  169. package/examples/component-border-beam.md +207 -0
  170. package/examples/component-bottom-navigation.md +226 -0
  171. package/examples/component-box.md +112 -0
  172. package/examples/component-breadcrumb.md +222 -0
  173. package/examples/component-button-base.md +190 -0
  174. package/examples/component-button-group.md +117 -0
  175. package/examples/component-button.md +213 -0
  176. package/examples/component-calendar.md +280 -0
  177. package/examples/component-callout.md +131 -0
  178. package/examples/component-card-actions.md +101 -0
  179. package/examples/component-card-content.md +90 -0
  180. package/examples/component-card-header.md +122 -0
  181. package/examples/component-card-media.md +79 -0
  182. package/examples/component-card.md +233 -0
  183. package/examples/component-carousel.md +266 -0
  184. package/examples/component-cascader.md +135 -0
  185. package/examples/component-category-picker.md +271 -0
  186. package/examples/component-chart.md +237 -0
  187. package/examples/component-chat-interface.md +399 -0
  188. package/examples/component-checkbox.md +149 -0
  189. package/examples/component-click-away-listener.md +87 -0
  190. package/examples/component-code.md +213 -0
  191. package/examples/component-collapsible.md +219 -0
  192. package/examples/component-color-picker.md +110 -0
  193. package/examples/component-combobox.md +267 -0
  194. package/examples/component-command.md +299 -0
  195. package/examples/component-config-provider.md +190 -0
  196. package/examples/component-context-menu.md +179 -0
  197. package/examples/component-css-baseline.md +148 -0
  198. package/examples/component-date-picker.md +249 -0
  199. package/examples/component-descriptions.md +242 -0
  200. package/examples/component-dialog-actions.md +111 -0
  201. package/examples/component-dialog-content-text.md +76 -0
  202. package/examples/component-dialog-content.md +105 -0
  203. package/examples/component-dialog-title.md +104 -0
  204. package/examples/component-dialog.md +176 -0
  205. package/examples/component-divider.md +182 -0
  206. package/examples/component-doc-page.md +217 -0
  207. package/examples/component-drawer.md +257 -0
  208. package/examples/component-dropdown.md +220 -0
  209. package/examples/component-email-layout.md +253 -0
  210. package/examples/component-empty-state.md +269 -0
  211. package/examples/component-empty.md +172 -0
  212. package/examples/component-fade.md +87 -0
  213. package/examples/component-feature-grid.md +201 -0
  214. package/examples/component-field.md +266 -0
  215. package/examples/component-filled-input.md +114 -0
  216. package/examples/component-flex.md +117 -0
  217. package/examples/component-float-button.md +214 -0
  218. package/examples/component-form-control-label.md +134 -0
  219. package/examples/component-form-control.md +113 -0
  220. package/examples/component-form-controls.md +251 -0
  221. package/examples/component-form-group.md +86 -0
  222. package/examples/component-form-helper-text.md +95 -0
  223. package/examples/component-form-label.md +98 -0
  224. package/examples/component-form.md +291 -0
  225. package/examples/component-game-hud.md +362 -0
  226. package/examples/component-game-menu.md +327 -0
  227. package/examples/component-grid.md +140 -0
  228. package/examples/component-grow.md +79 -0
  229. package/examples/component-hero-block.md +252 -0
  230. package/examples/component-hover-card.md +211 -0
  231. package/examples/component-icon-button.md +142 -0
  232. package/examples/component-icon.md +102 -0
  233. package/examples/component-illustration.md +280 -0
  234. package/examples/component-image-list.md +107 -0
  235. package/examples/component-image.md +282 -0
  236. package/examples/component-input-adornment.md +101 -0
  237. package/examples/component-input-base.md +134 -0
  238. package/examples/component-input-number.md +141 -0
  239. package/examples/component-input-otp.md +271 -0
  240. package/examples/component-input.md +213 -0
  241. package/examples/component-item.md +243 -0
  242. package/examples/component-kbd.md +197 -0
  243. package/examples/component-krw-amount.md +219 -0
  244. package/examples/component-label.md +118 -0
  245. package/examples/component-layout.md +217 -0
  246. package/examples/component-link.md +223 -0
  247. package/examples/component-list-item-avatar.md +72 -0
  248. package/examples/component-list-item-button.md +139 -0
  249. package/examples/component-list-item-icon.md +82 -0
  250. package/examples/component-list-item-text.md +98 -0
  251. package/examples/component-list-item.md +116 -0
  252. package/examples/component-list-subheader.md +70 -0
  253. package/examples/component-list.md +198 -0
  254. package/examples/component-loading-button.md +125 -0
  255. package/examples/component-loading-sequence.md +254 -0
  256. package/examples/component-lottie-player.md +279 -0
  257. package/examples/component-masonry.md +191 -0
  258. package/examples/component-mentions.md +189 -0
  259. package/examples/component-menu-item.md +102 -0
  260. package/examples/component-menu-list.md +98 -0
  261. package/examples/component-menu.md +139 -0
  262. package/examples/component-menubar.md +259 -0
  263. package/examples/component-message.md +162 -0
  264. package/examples/component-mobile-stepper.md +155 -0
  265. package/examples/component-modal.md +220 -0
  266. package/examples/component-navigation-menu.md +295 -0
  267. package/examples/component-notification.md +166 -0
  268. package/examples/component-otp-countdown.md +245 -0
  269. package/examples/component-outlined-input.md +145 -0
  270. package/examples/component-page-transition.md +281 -0
  271. package/examples/component-pagination.md +226 -0
  272. package/examples/component-paper.md +199 -0
  273. package/examples/component-pass-auth.md +265 -0
  274. package/examples/component-payment-brand-button.md +253 -0
  275. package/examples/component-payment-method-selector.md +272 -0
  276. package/examples/component-payment-receipt.md +277 -0
  277. package/examples/component-popconfirm.md +144 -0
  278. package/examples/component-popover.md +239 -0
  279. package/examples/component-popper.md +129 -0
  280. package/examples/component-pricing-cards.md +247 -0
  281. package/examples/component-progress.md +195 -0
  282. package/examples/component-qr-code.md +201 -0
  283. package/examples/component-radio.md +167 -0
  284. package/examples/component-rate.md +202 -0
  285. package/examples/component-resizable.md +163 -0
  286. package/examples/component-result.md +270 -0
  287. package/examples/component-scroll-area.md +199 -0
  288. package/examples/component-scroll-reveal.md +320 -0
  289. package/examples/component-segmented.md +178 -0
  290. package/examples/component-select.md +258 -0
  291. package/examples/component-separator.md +177 -0
  292. package/examples/component-sheet.md +277 -0
  293. package/examples/component-sidebar.md +257 -0
  294. package/examples/component-skeleton.md +178 -0
  295. package/examples/component-slide.md +89 -0
  296. package/examples/component-slider.md +208 -0
  297. package/examples/component-snackbar-content.md +92 -0
  298. package/examples/component-snackbar.md +121 -0
  299. package/examples/component-sonner.md +165 -0
  300. package/examples/component-space.md +125 -0
  301. package/examples/component-spatial-locomotion.md +373 -0
  302. package/examples/component-spatial-panel.md +330 -0
  303. package/examples/component-speed-dial-action.md +78 -0
  304. package/examples/component-speed-dial.md +177 -0
  305. package/examples/component-spin.md +173 -0
  306. package/examples/component-spinner.md +204 -0
  307. package/examples/component-splitter.md +210 -0
  308. package/examples/component-stack.md +130 -0
  309. package/examples/component-statistic.md +282 -0
  310. package/examples/component-step-button.md +157 -0
  311. package/examples/component-step-connector.md +157 -0
  312. package/examples/component-step-content.md +121 -0
  313. package/examples/component-step-icon.md +115 -0
  314. package/examples/component-step-label.md +101 -0
  315. package/examples/component-step.md +84 -0
  316. package/examples/component-steps.md +264 -0
  317. package/examples/component-stock-chart.md +251 -0
  318. package/examples/component-swipeable-drawer.md +149 -0
  319. package/examples/component-switch.md +99 -0
  320. package/examples/component-tab-scroll-button.md +180 -0
  321. package/examples/component-tab.md +120 -0
  322. package/examples/component-table-body.md +82 -0
  323. package/examples/component-table-cell.md +118 -0
  324. package/examples/component-table-container.md +75 -0
  325. package/examples/component-table-footer.md +72 -0
  326. package/examples/component-table-head.md +78 -0
  327. package/examples/component-table-pagination.md +137 -0
  328. package/examples/component-table-row.md +113 -0
  329. package/examples/component-table-sort-label.md +109 -0
  330. package/examples/component-table.md +202 -0
  331. package/examples/component-tabs.md +184 -0
  332. package/examples/component-tag-badge.md +309 -0
  333. package/examples/component-tag.md +102 -0
  334. package/examples/component-testimonial-carousel.md +218 -0
  335. package/examples/component-textarea-autosize.md +114 -0
  336. package/examples/component-textarea.md +173 -0
  337. package/examples/component-time-picker.md +205 -0
  338. package/examples/component-timeline.md +170 -0
  339. package/examples/component-toast.md +224 -0
  340. package/examples/component-toggle-button.md +129 -0
  341. package/examples/component-toggle.md +220 -0
  342. package/examples/component-toolbar.md +104 -0
  343. package/examples/component-tooltip.md +178 -0
  344. package/examples/component-tour.md +176 -0
  345. package/examples/component-transaction-list-item.md +243 -0
  346. package/examples/component-transfer.md +156 -0
  347. package/examples/component-tree-select.md +202 -0
  348. package/examples/component-tree.md +297 -0
  349. package/examples/component-typography.md +215 -0
  350. package/examples/component-upload.md +295 -0
  351. package/examples/component-video-hero.md +409 -0
  352. package/examples/component-video-player.md +340 -0
  353. package/examples/component-voice-input.md +408 -0
  354. package/examples/component-watermark.md +217 -0
  355. package/examples/component-zoom.md +92 -0
  356. package/examples/doc-explanation-example.md +196 -0
  357. package/examples/doc-how-to-example.md +205 -0
  358. package/examples/doc-tutorial-example.md +162 -0
  359. package/examples/dogfood-korean-fintech-system.md +433 -0
  360. package/examples/email-transactional-example.md +259 -0
  361. package/examples/palette-saas-violet.md +235 -0
  362. package/examples/print-business-card-spec.md +205 -0
  363. package/examples/print-packaging-spec.md +285 -0
  364. package/examples/report-example.md +228 -0
  365. package/examples/slide-deck-example.md +237 -0
  366. package/examples/website-improvement-report.md +128 -0
  367. package/examples/website-improvement-workspace.json +126 -0
  368. package/install.sh +189 -0
  369. package/knowledge/COVERAGE.md +740 -0
  370. package/knowledge/PRINCIPLES.md +108 -0
  371. package/knowledge/a11y/contrast.md +70 -0
  372. package/knowledge/a11y/keyboard-and-focus.md +108 -0
  373. package/knowledge/colors/color-theory.md +90 -0
  374. package/knowledge/colors/mui-palette-structure.md +105 -0
  375. package/knowledge/colors/palettes-by-product-type.md +876 -0
  376. package/knowledge/components/INDEX.md +231 -0
  377. package/knowledge/components/index.json +1470 -0
  378. package/knowledge/components/shadcn-registry.md +159 -0
  379. package/knowledge/conversational/ai-chat-interfaces.md +323 -0
  380. package/knowledge/conversational/chatbot-design.md +312 -0
  381. package/knowledge/conversational/conversational-ui-fundamentals.md +299 -0
  382. package/knowledge/conversational/korean-voice-conventions.md +281 -0
  383. package/knowledge/conversational/voice-ui-patterns.md +297 -0
  384. package/knowledge/design-tokens/ant-design.md +124 -0
  385. package/knowledge/design-tokens/material-3.md +235 -0
  386. package/knowledge/design-tokens/polaris-and-carbon.md +231 -0
  387. package/knowledge/design-tokens/tailwind-v4.md +284 -0
  388. package/knowledge/game-ui/game-accessibility.md +317 -0
  389. package/knowledge/game-ui/game-ui-fundamentals.md +281 -0
  390. package/knowledge/game-ui/hud-design.md +324 -0
  391. package/knowledge/game-ui/korean-gaming-conventions.md +312 -0
  392. package/knowledge/game-ui/menu-systems.md +388 -0
  393. package/knowledge/i18n/korean-app-store-visual.md +223 -0
  394. package/knowledge/i18n/korean-document-style.md +301 -0
  395. package/knowledge/i18n/korean-payments.md +211 -0
  396. package/knowledge/i18n/korean-product-conventions.md +96 -0
  397. package/knowledge/i18n/korean-publishing.md +139 -0
  398. package/knowledge/i18n/korean-typography.md +123 -0
  399. package/knowledge/icons/curated-sets.md +225 -0
  400. package/knowledge/illustration/hero-illustrations.md +234 -0
  401. package/knowledge/illustration/illustration-systems.md +221 -0
  402. package/knowledge/illustration/mascot-design.md +208 -0
  403. package/knowledge/illustration/spot-illustrations.md +246 -0
  404. package/knowledge/illustration/svg-optimization.md +308 -0
  405. package/knowledge/layout/spacing-and-grid.md +119 -0
  406. package/knowledge/motion/app-loading-sequences.md +277 -0
  407. package/knowledge/motion/choreography-depth.md +297 -0
  408. package/knowledge/motion/marketing-motion.md +223 -0
  409. package/knowledge/motion/micro-interactions.md +266 -0
  410. package/knowledge/motion/motion-tools.md +281 -0
  411. package/knowledge/motion/principles.md +126 -0
  412. package/knowledge/patterns/auth-flow-design.md +316 -0
  413. package/knowledge/patterns/b2b-onboarding-flows.md +182 -0
  414. package/knowledge/patterns/brand-identity.md +238 -0
  415. package/knowledge/patterns/brand-references.md +97 -0
  416. package/knowledge/patterns/chart-color-encoding.md +269 -0
  417. package/knowledge/patterns/chart-types.md +344 -0
  418. package/knowledge/patterns/dashboard-composition.md +299 -0
  419. package/knowledge/patterns/design-system-qa.md +356 -0
  420. package/knowledge/patterns/document-typography.md +248 -0
  421. package/knowledge/patterns/email-design.md +338 -0
  422. package/knowledge/patterns/empty-states.md +263 -0
  423. package/knowledge/patterns/error-states.md +318 -0
  424. package/knowledge/patterns/form-design.md +237 -0
  425. package/knowledge/patterns/information-architecture.md +341 -0
  426. package/knowledge/patterns/landing-hero-design.md +283 -0
  427. package/knowledge/patterns/landing-page-patterns.md +681 -0
  428. package/knowledge/patterns/list-and-feed.md +371 -0
  429. package/knowledge/patterns/mobile-navigation.md +278 -0
  430. package/knowledge/patterns/money-and-amount.md +301 -0
  431. package/knowledge/patterns/onboarding.md +300 -0
  432. package/knowledge/patterns/pricing-page-design.md +261 -0
  433. package/knowledge/patterns/realtime-data.md +280 -0
  434. package/knowledge/patterns/report-design.md +330 -0
  435. package/knowledge/patterns/search-ux.md +373 -0
  436. package/knowledge/patterns/settings-page.md +325 -0
  437. package/knowledge/patterns/slide-deck-design.md +316 -0
  438. package/knowledge/patterns/styles-catalog.md +2599 -0
  439. package/knowledge/patterns/technical-writing.md +306 -0
  440. package/knowledge/patterns/ui-reasoning.md +1853 -0
  441. package/knowledge/patterns/ux-guidelines.md +1454 -0
  442. package/knowledge/platforms/react-native.md +395 -0
  443. package/knowledge/print/brochures-and-flyers.md +276 -0
  444. package/knowledge/print/korean-print-conventions.md +284 -0
  445. package/knowledge/print/packaging.md +321 -0
  446. package/knowledge/print/print-fundamentals.md +238 -0
  447. package/knowledge/print/signage-and-posters.md +235 -0
  448. package/knowledge/print/stationery.md +262 -0
  449. package/knowledge/spatial/ar-patterns.md +253 -0
  450. package/knowledge/spatial/comfort-and-accessibility.md +245 -0
  451. package/knowledge/spatial/spatial-design-fundamentals.md +346 -0
  452. package/knowledge/spatial/spatial-ui-elements.md +343 -0
  453. package/knowledge/spatial/vr-patterns.md +302 -0
  454. package/knowledge/typography/font-pairings.md +332 -0
  455. package/knowledge/typography/mui-type-scale.md +57 -0
  456. package/knowledge/typography/type-scale-fundamentals.md +105 -0
  457. package/knowledge/video/in-product-video.md +277 -0
  458. package/knowledge/video/korean-video-conventions.md +247 -0
  459. package/knowledge/video/marketing-video.md +258 -0
  460. package/knowledge/video/social-and-short-form.md +257 -0
  461. package/knowledge/video/video-fundamentals.md +296 -0
  462. package/package.json +106 -0
  463. package/skills/README.md +39 -0
  464. package/skills/color-palette/PLAYBOOK.md +175 -0
  465. package/skills/color-palette/SKILL.md +6 -0
  466. package/skills/color-palette/TEMPLATE.md +103 -0
  467. package/skills/component-spec-writer/PLAYBOOK.md +169 -0
  468. package/skills/component-spec-writer/SKILL.md +6 -0
  469. package/skills/component-spec-writer/TEMPLATE.md +115 -0
  470. package/skills/conversational-ui-designer/PLAYBOOK.md +231 -0
  471. package/skills/conversational-ui-designer/SKILL.md +6 -0
  472. package/skills/design-broadcast/PLAYBOOK.md +146 -0
  473. package/skills/design-broadcast/SKILL.md +6 -0
  474. package/skills/design-critique/PLAYBOOK.md +137 -0
  475. package/skills/design-critique/SKILL.md +6 -0
  476. package/skills/design-pr-review/PLAYBOOK.md +171 -0
  477. package/skills/design-pr-review/SKILL.md +6 -0
  478. package/skills/design-system-builder/PLAYBOOK.md +218 -0
  479. package/skills/design-system-builder/SKILL.md +6 -0
  480. package/skills/design-system-qa/PLAYBOOK.md +163 -0
  481. package/skills/design-system-qa/SKILL.md +6 -0
  482. package/skills/document-author/PLAYBOOK.md +167 -0
  483. package/skills/document-author/SKILL.md +6 -0
  484. package/skills/figma-token-sync/PLAYBOOK.md +149 -0
  485. package/skills/figma-token-sync/SKILL.md +6 -0
  486. package/skills/game-ui-designer/PLAYBOOK.md +209 -0
  487. package/skills/game-ui-designer/SKILL.md +6 -0
  488. package/skills/handoff-spec/PLAYBOOK.md +170 -0
  489. package/skills/handoff-spec/SKILL.md +6 -0
  490. package/skills/illustration-designer/PLAYBOOK.md +166 -0
  491. package/skills/illustration-designer/SKILL.md +6 -0
  492. package/skills/motion-designer/PLAYBOOK.md +223 -0
  493. package/skills/motion-designer/SKILL.md +6 -0
  494. package/skills/print-designer/PLAYBOOK.md +209 -0
  495. package/skills/print-designer/SKILL.md +6 -0
  496. package/skills/slide-deck-author/PLAYBOOK.md +198 -0
  497. package/skills/slide-deck-author/SKILL.md +6 -0
  498. package/skills/spatial-designer/PLAYBOOK.md +238 -0
  499. package/skills/spatial-designer/SKILL.md +6 -0
  500. package/skills/ux-audit/PLAYBOOK.md +142 -0
  501. package/skills/ux-audit/SKILL.md +6 -0
  502. package/skills/video-designer/PLAYBOOK.md +240 -0
  503. package/skills/video-designer/SKILL.md +6 -0
  504. package/skills/website-improvement/PLAYBOOK.md +118 -0
  505. package/skills/website-improvement/SKILL.md +6 -0
  506. package/skills/website-improvement/TEMPLATE.md +103 -0
  507. package/tools/audit/changelog-generate.py +176 -0
  508. package/tools/audit/check-coverage.py +483 -0
  509. package/tools/audit/doctor_assertions.py +256 -0
  510. package/tools/audit/example-qa.py +108 -0
  511. package/tools/audit/frontmatter-check.py +199 -0
  512. package/tools/audit/integration-check.py +95 -0
  513. package/tools/audit/korean-copy-check.py +161 -0
  514. package/tools/audit/link-check.py +146 -0
  515. package/tools/audit/local-ci.py +558 -0
  516. package/tools/audit/package-contents.py +723 -0
  517. package/tools/audit/package-smoke.py +22443 -0
  518. package/tools/audit/raw-hex-check.py +252 -0
  519. package/tools/audit/registry-smoke.py +8188 -0
  520. package/tools/audit/release-metadata.py +9832 -0
  521. package/tools/audit/run-all.py +351 -0
  522. package/tools/audit/smoke_assertions.py +12742 -0
  523. package/tools/audit/stability-review.py +332 -0
  524. package/tools/audit/stale-check.py +156 -0
  525. package/tools/migrations/add-version-frontmatter.py +132 -0
  526. package/tools/migrations/bump-last-updated.py +131 -0
  527. package/tools/migrations/promote-stability.py +172 -0
  528. package/tools/preview/README.md +58 -0
  529. package/tools/preview/render-tokens.py +454 -0
@@ -0,0 +1,284 @@
1
+ <!-- hand-written -->
2
+ ---
3
+ title: Korean print conventions (regulations, formats, market)
4
+ applies_to: [print, korean, regulations, kr-market]
5
+ version: 1.0.0
6
+ last_updated: 2026-05
7
+ stability: stable
8
+ ---
9
+
10
+ # Korean print conventions
11
+
12
+ Korean print has specific format standards, regulatory requirements, and market conventions that differ from Western/international defaults. This file documents what's specific to Korea.
13
+
14
+ Read [`print-fundamentals.md`](print-fundamentals.md) first.
15
+
16
+ ## Standard sizes
17
+
18
+ Korea uses ISO A/B series + a few local conventions:
19
+
20
+ | Name | Size (mm) | Korean term | Use |
21
+ | --- | --- | --- | --- |
22
+ | 명함 | 90 × 50 | 명함 | Business card (KR-specific; bigger than international 85×55) |
23
+ | A4 | 210 × 297 | A4 | Letter, brochure, document |
24
+ | A5 | 148 × 210 | A5 | Half-letter, leaflet |
25
+ | A6 | 105 × 148 | A6 | Postcard |
26
+ | A3 | 297 × 420 | A3 | Small poster |
27
+ | A2 | 420 × 594 | A2 | Medium poster |
28
+ | A1 | 594 × 841 | A1 | Large poster |
29
+ | A0 | 841 × 1189 | A0 | Hero poster |
30
+ | B5 | 176 × 250 | B5 | Booklet (slightly smaller than A4) |
31
+ | B4 | 250 × 353 | B4 | Magazine spread |
32
+ | 국전지 | 636 × 939 | 국전지 | KR poster size, larger |
33
+ | 4x6 | 102 × 152 | 4x6 / 인화지 | Photo print |
34
+
35
+ **Korean business card 명함 is 90×50mm** — slightly larger than international 85×55. Western cards stick out of Korean wallets. Use Korean size for Korean primary audiences.
36
+
37
+ ## File preparation conventions
38
+
39
+ ### Color
40
+
41
+ - **CMYK** mandatory for offset / large run print.
42
+ - **Spot color (Pantone)** for brand-critical pieces.
43
+ - **Korean ICC profile**: most KR printers use **Japan Color 2001 Coated** or printer-specific profile.
44
+
45
+ ### Resolution
46
+
47
+ - **300 DPI** at print size for photos / raster — same as international.
48
+ - **600 DPI** for line art / dense text — for sharpest character rendering of small Hangul.
49
+
50
+ Hangul characters are dense; small Hangul at low DPI looks fuzzy faster than Latin.
51
+
52
+ ### File format
53
+
54
+ - **PDF/X-1a** is standard.
55
+ - Some KR printers also accept **AI / INDD** native files.
56
+ - Avoid: PSD without rasterization plan, Word documents (will reformat on printer's machine).
57
+
58
+ ### Bleed
59
+
60
+ - **3mm minimum** (Korean standard, slightly less than US 1/8" / 3.175mm).
61
+ - Crop marks + bleed marks in PDF export.
62
+
63
+ ## Korean typography for print
64
+
65
+ ### Recommended fonts
66
+
67
+ | Font | Use | License |
68
+ | --- | --- | --- |
69
+ | **Pretendard** | Default modern UI/print | Open-source (free commercial) |
70
+ | **본명조 (BonMyeongjo)** | Premium serif | Open-source |
71
+ | **나눔스퀘어 (NanumSquare)** | Display, signage | Open-source |
72
+ | **나눔명조 (NanumMyeongjo)** | Body, classic | Open-source |
73
+ | **Spoqa Han Sans Neo** | Sans-serif body | Open-source |
74
+ | **Apple SD Gothic Neo** | Premium / Apple-aligned | Apple license (limit) |
75
+ | **SM 신신명조 / SM 견출명조** | Premium typography | Paid (SM 폰트) |
76
+ | **윤서체 시리즈** | Premium typography | Paid (윤디자인) |
77
+
78
+ Default modern: **Pretendard for sans**, **본명조 / NanumMyeongjo for serif**.
79
+
80
+ ### Sizing for print
81
+
82
+ Hangul reads slightly larger than Latin at the same point size. Adjustments:
83
+
84
+ | Use | Latin | Korean |
85
+ | --- | --- | --- |
86
+ | Body in book | 11pt | 10-10.5pt |
87
+ | Brochure body | 9-10pt | 8.5-9.5pt |
88
+ | Caption | 7-8pt | 7pt |
89
+ | Business card text | 7-9pt | 7-8.5pt |
90
+
91
+ Don't go below 6pt for Korean. Hangul strokes get muddy.
92
+
93
+ ### Line height (행간)
94
+
95
+ Korean needs more leading than Latin:
96
+
97
+ | Use | Latin (px) | Korean (px) |
98
+ | --- | --- | --- |
99
+ | Body 11pt | 1.4-1.5 line height | 1.6-1.8 |
100
+ | Headline | 1.2 | 1.3-1.4 |
101
+
102
+ Reason: Hangul has more visual density per line; tight leading feels cramped.
103
+
104
+ ### Mixed Korean + English
105
+
106
+ Body text in mixed languages:
107
+ - Pretendard handles both at the same size.
108
+ - Adobe Source Han Sans (a.k.a. Noto Sans CJK) handles both.
109
+ - Mixing two fonts (Korean font + Latin font) requires careful x-height matching.
110
+
111
+ For headlines: pick a single CJK font that has both Korean and Latin glyphs.
112
+
113
+ ### Word break / line break
114
+
115
+ Korean breaks differently from Latin:
116
+ - Korean breaks at any character boundary (not word).
117
+ - Don't break in middle of common compound words (회사명, 제품명).
118
+ - Hyphens (`-`) in Korean text feel awkward; use ellipsis or restart line.
119
+ - For long English words mixed with Korean: ensure the English word doesn't break Korean visual rhythm.
120
+
121
+ ## Regulatory requirements
122
+
123
+ ### Food packaging (식품 포장)
124
+
125
+ KFDA regulations specify:
126
+ - **Ingredients (원재료명)** in descending weight order.
127
+ - **Allergens (알레르기 유발 물질)** bolded or boxed; list of regulated allergens.
128
+ - **Net contents (내용량)** prominent — minimum size regulated.
129
+ - **Best-before (유통기한)** format: YYYY-MM-DD or YYYY.MM.DD.
130
+ - **Country of origin (원산지)**.
131
+ - **Manufacturer (제조원) and distributor (판매원)**.
132
+ - **Storage (보관 방법)**.
133
+ - **Nutrition facts (영양 성분)** in regulated table format for many categories.
134
+ - **Customer service (소비자 상담실)** phone.
135
+
136
+ Minimum font sizes are regulated. Submit packaging design to KFDA-registered consultant or printer with KR regulatory expertise.
137
+
138
+ ### Cosmetics (화장품)
139
+
140
+ - All ingredients listed (INCI names + Korean).
141
+ - **Manufacturer (제조판매업자)** registered name.
142
+ - **Use-by / 사용기한** OR **Period after opening / 개봉 후 사용기간** (PAO icon).
143
+ - **Manufacturer license number (화장품 제조업 신고)**.
144
+ - **Net contents**.
145
+ - Marketing claims require pre-approval if making functional claims.
146
+
147
+ ### Supplements / health-functional foods (건강기능식품)
148
+
149
+ - **건강기능식품 mark** (KFDA-issued icon).
150
+ - All claims pre-approved.
151
+ - Strict label format.
152
+
153
+ ### Drug labeling (의약품)
154
+
155
+ - KFDA-controlled.
156
+ - All copy approved before printing.
157
+ - Specific font sizes, colors, formats.
158
+
159
+ ### Recycling marks (분리배출 표시)
160
+
161
+ **Required on most packaging**. The mark is a regulated icon system:
162
+
163
+ | Material | Mark |
164
+ | --- | --- |
165
+ | Paper | 종이 |
166
+ | Plastic | 플라스틱 + 분류 (PE, PP, PET, PS, PVC, OTHER) |
167
+ | Vinyl | 비닐 |
168
+ | Can | 캔 (철 / 알미늄) |
169
+ | Glass | 유리 |
170
+ | Mixed material | 다중 |
171
+
172
+ Each mark has specific dimensions (minimum 8mm × 8mm typical) + Korean text.
173
+
174
+ Must be on the package itself (not just on a sticker). Government can fine for missing or incorrect marks.
175
+
176
+ ### Advertising regulations
177
+
178
+ For 전단지 / marketing flyers:
179
+ - **Health/medical claims**: only approved language.
180
+ - **Financial product advertising**: must include risk warnings (정보통신망법 / 자본시장법).
181
+ - **Children's products**: stricter rules on imagery + claims.
182
+ - **Food**: no false health claims.
183
+
184
+ ### Spam law (정보통신망법)
185
+
186
+ Marketing print materials don't fall under spam law (which is about emails/SMS), but if your print piece directs to digital marketing (QR → marketing list), the digital marketing must comply. See [`knowledge/patterns/email-design.md`](../patterns/email-design.md).
187
+
188
+ ## Korean print market
189
+
190
+ ### Print districts (Seoul)
191
+
192
+ - **충무로** — historic specialty print district. Premium quality, traditional finishes (letterpress, foil), proofing services.
193
+ - **을지로** — high-volume offset, specialty paper, mid-tier quality.
194
+ - **인천 (Incheon)** — large-scale offset runs, packaging, corrugated.
195
+ - **파주 (Paju)** — book printing concentration.
196
+
197
+ For small runs / online: **Snaps, Bizhows, 컴인쇄, Vistaprint Korea** — convenient, mid-quality, fast turnaround.
198
+
199
+ For brand-critical: traditional 충무로 / 을지로 printer with sample proof.
200
+
201
+ ### Typical lead times
202
+
203
+ | Job | Lead time |
204
+ | --- | --- |
205
+ | Online business cards (Snaps, Bizhows) | 2-5 days |
206
+ | Premium business cards (충무로) | 5-10 days |
207
+ | Standard A5 flyers (online) | 3-7 days |
208
+ | Premium brochures | 7-14 days |
209
+ | Folding cartons (low volume) | 14-21 days |
210
+ | Folding cartons (high volume) | 30-45 days |
211
+ | Subway / OOH posters | 7-14 days from approval |
212
+ | Trade show backdrop | 5-10 days |
213
+
214
+ Add 5-10 days for revisions / proof rounds.
215
+
216
+ ### Minimum order quantities
217
+
218
+ | Job | Typical MOQ |
219
+ | --- | --- |
220
+ | Business cards | 100-200 |
221
+ | Letterhead / envelopes | 500-1000 |
222
+ | A5 flyers | 500-1000 |
223
+ | Brochures | 500-1000 |
224
+ | Folding cartons | 1000-3000 |
225
+ | Custom shipping boxes | 1000+ |
226
+
227
+ Below MOQ: digital print (per-unit price 2-5× higher) or pay setup penalty for offset.
228
+
229
+ ## Cost benchmarks (rough, 2024-2025 KRW)
230
+
231
+ Highly variable; benchmarks for budgeting:
232
+
233
+ | Job | Typical cost |
234
+ | --- | --- |
235
+ | 100 business cards (4-color, 300gsm) | 15,000-40,000 KRW |
236
+ | 100 premium cards (foil + soft-touch) | 80,000-200,000 KRW |
237
+ | 1000 A5 flyers (4-color) | 80,000-150,000 KRW |
238
+ | 1000 tri-fold A4 brochures | 200,000-400,000 KRW |
239
+ | 1000 folding cartons (cosmetics-tier) | 500,000-1,500,000 KRW |
240
+ | Subway B3 poster (3-day post) | 200,000-400,000 KRW per panel |
241
+
242
+ Get 2-3 quotes; pricing varies a lot.
243
+
244
+ ## Korean print quality expectations
245
+
246
+ - **Color accuracy**: high. Korean clients notice color shifts.
247
+ - **Trim accuracy**: high. ±0.5mm tolerance is preferred (not just ±1mm).
248
+ - **Paper quality**: clients can spot cheap paper.
249
+ - **Finish quality**: foil shouldn't smudge; lamination shouldn't bubble.
250
+ - **On-time delivery**: critical. Late delivery = damaged relationship.
251
+
252
+ For premium brand work: pay for premium printer. Cost difference is real but reputational risk of cheap-looking print is bigger.
253
+
254
+ ## Common Korean print mistakes (foreigners / non-KR-experienced designers)
255
+
256
+ - **Wrong business card size** (using 85×55 instead of 90×50).
257
+ - **Hangul too small** (using Latin point sizes for Korean).
258
+ - **Tight leading on Korean text** (uses Latin leading; reads cramped).
259
+ - **Wrong recycling marks** (or missing them).
260
+ - **English-first regulatory text** (Korean must be primary on KR-distributed packaging).
261
+ - **Wrong honorific level** in formal letters (using 해요체 where 합쇼체 expected).
262
+ - **Wrong date format** (using MM/DD/YYYY instead of YYYY.MM.DD or YYYY-MM-DD).
263
+
264
+ ## Don't
265
+
266
+ - Don't use international business card size for Korean primary audiences. Wallets have specific 명함 pockets sized 90×50.
267
+ - Don't apply Latin typography rules to Korean. Leading, sizing, line breaks differ.
268
+ - Don't skip recycling marks. Government enforces.
269
+ - Don't translate marketing copy at the last minute. Korean expansion breaks layout.
270
+ - Don't ignore ICC profile differences. Korean coated press differs from US/EU presses.
271
+ - Don't go to a no-name print shop for brand-critical work. Vet the printer.
272
+ - Don't print regulatory content in 4-point type to fit. KFDA / KATS will reject.
273
+
274
+ ## Cross-reference
275
+
276
+ - [`knowledge/print/print-fundamentals.md`](print-fundamentals.md) — CMYK, bleed, DPI
277
+ - [`knowledge/print/stationery.md`](stationery.md) — business cards
278
+ - [`knowledge/print/brochures-and-flyers.md`](brochures-and-flyers.md) — multi-page
279
+ - [`knowledge/print/signage-and-posters.md`](signage-and-posters.md) — large format
280
+ - [`knowledge/print/packaging.md`](packaging.md) — packaging regulatory
281
+ - [`knowledge/i18n/korean-typography.md`](../i18n/korean-typography.md) — Hangul typography
282
+ - [`knowledge/i18n/korean-document-style.md`](../i18n/korean-document-style.md) — honorific level
283
+ - [`knowledge/i18n/korean-app-store-visual.md`](../i18n/korean-app-store-visual.md) — visual conventions
284
+ - [`knowledge/typography/font-pairings.md`](../typography/font-pairings.md) — font pairings
@@ -0,0 +1,321 @@
1
+ <!-- hand-written -->
2
+ ---
3
+ title: Packaging design (boxes, labels, dielines)
4
+ applies_to: [print, packaging, label, dieline]
5
+ version: 1.0.0
6
+ last_updated: 2026-05
7
+ stability: stable
8
+ ---
9
+
10
+ # Packaging
11
+
12
+ Packaging is the most physically intimate brand surface. Customers hold it, open it, sometimes keep it. Get it right and it becomes a brand asset; get it wrong and it's instant garbage.
13
+
14
+ Read [`print-fundamentals.md`](print-fundamentals.md) first.
15
+
16
+ ## Categories
17
+
18
+ | Type | Use |
19
+ | --- | --- |
20
+ | **Folding cartons** | Cosmetics, electronics, food, supplements |
21
+ | **Rigid / setup boxes** | Premium products (luxury, gifts) |
22
+ | **Corrugated mailers** | Shipping boxes (especially DTC ecommerce) |
23
+ | **Pouches / sachets** | Food, beauty samples |
24
+ | **Labels (peel-and-stick)** | Bottles, jars, anything cylindrical |
25
+ | **Tags / hangtags** | Apparel, accessories |
26
+ | **Sleeves / wraps** | Coffee cups, tissue, secondary packaging |
27
+
28
+ This file focuses on **folding cartons, mailers, and labels** — the most common.
29
+
30
+ ## Dieline — the single most important file
31
+
32
+ A **dieline** is a vector template showing where the cardboard will be cut, folded, and glued. It's the printer's instruction sheet.
33
+
34
+ ```
35
+ ↓ trim line (cut)
36
+ ─────────────────────────────
37
+ │ │ │
38
+ │ Top │ Right │ ─── fold line
39
+ │ │ │
40
+ ─────────────────────────────
41
+ │ Left │ Front │ Right │ Back
42
+ │ panel │ panel │ panel │ panel
43
+ │ │ │ │
44
+ ─────────────────────────────
45
+ │ │ │
46
+ │ Bottom │ (glue tab) ─── crease + glue
47
+ │ │ │
48
+ ─────────────────────────────
49
+ ```
50
+
51
+ Each line type:
52
+ - **Solid line** = cut.
53
+ - **Dashed line** = fold (crease).
54
+ - **Dotted line** = perforation (tear-away).
55
+ - **Tinted area** = glue tab.
56
+
57
+ ### Getting a dieline
58
+
59
+ 1. **From the printer** — most carton printers provide standard dielines for common box sizes. Ask for the dieline for your spec.
60
+ 2. **From your structural designer** — for custom boxes, a structural designer creates the dieline.
61
+ 3. **DIY** — only for very simple boxes. Use Esko ArtiosCAD or Adobe Illustrator with manual measurements. Test with paper mockup before committing.
62
+
63
+ ### Working with the dieline
64
+
65
+ - Place dieline on its own layer in Illustrator / InDesign.
66
+ - **Don't move it**. The cut/fold positions are sacred.
67
+ - Set dieline layer to non-printing.
68
+ - Design panels respecting the cut/fold lines + bleed (3-5mm beyond cut).
69
+ - Critical content stays inside the safe area (5mm inside cut).
70
+
71
+ ## Folding carton design
72
+
73
+ ### Anatomy of a typical carton
74
+
75
+ ```
76
+ ┌──────────────────────────────────┐
77
+ │ │
78
+ │ FRONT PANEL │ ← brand-defining; biggest visual
79
+ │ (logo + product name + │
80
+ │ hero image / claim) │
81
+ │ │
82
+ └──────────────────────────────────┘
83
+
84
+ LEFT TOP RIGHT BOTTOM BACK
85
+ side panel ↓ Fold lines ↓side panel panel
86
+ panel (close) panel (close) (info)
87
+
88
+ ┌──────────────────┐
89
+ │ Ingredients │
90
+ │ Manufacturer │
91
+ │ Barcode │
92
+ │ Net contents │
93
+ │ Country of origin│
94
+ │ ... │
95
+ └──────────────────┘
96
+ ```
97
+
98
+ ### Front panel — brand-defining
99
+
100
+ The most-photographed panel. Carries:
101
+ - **Logo** (top, centered or anchored)
102
+ - **Product name** (under logo or featured)
103
+ - **Variety / flavor / variant** ("Vanilla", "Sensitive Skin", etc.)
104
+ - **Hero image** OR illustration OR graphic
105
+ - **Net weight / volume** (regulatory + decision-making)
106
+
107
+ Compose for shelf impact. Test: stand 2m back. Can you read the product name?
108
+
109
+ ### Side panels — narrative
110
+
111
+ Often product story, ingredients, or brand voice. Less critical but still designed.
112
+
113
+ ### Back panel — regulatory + dense info
114
+
115
+ Most regulatory content lives here:
116
+ - **Ingredients list / 성분** (regulated order, regulated font size)
117
+ - **Manufacturer info** (legal requirement)
118
+ - **Net weight / 내용량**
119
+ - **Country of origin / 원산지**
120
+ - **Barcode** (with white quiet zone)
121
+ - **Best-before / 유통기한**
122
+ - **Lot number / 제조번호** (printed at fill, not at design)
123
+ - **Caution warnings**
124
+ - **Recycling marks**
125
+ - **Customer service contact**
126
+
127
+ In Korea: regulatory content is **specified by KFDA / KATS** depending on category (food, cosmetics, supplements). See [`korean-print-conventions.md`](korean-print-conventions.md) for KR-specific labeling.
128
+
129
+ ### Top panel — product preview
130
+
131
+ Often an icon, simplified visual, or short product name. Visible when the box is on a shelf with similar boxes.
132
+
133
+ ### Bottom panel — utility
134
+
135
+ Often the barcode + lot/best-before, hidden from primary view.
136
+
137
+ ## Labels (bottles, jars, tubes)
138
+
139
+ ### Categories
140
+
141
+ - **Front label** — primary brand surface
142
+ - **Back label** — regulatory info
143
+ - **Neck label** — premium accent (wines, premium products)
144
+ - **Top sticker** — simple identifier
145
+
146
+ ### Material
147
+
148
+ - **Paper labels** — matte / glossy / textured. Cheaper, may water-damage.
149
+ - **Vinyl labels** — waterproof; for shower / bathroom products.
150
+ - **Metallic / foil labels** — premium look.
151
+ - **Clear (no-label look)** — premium minimalism (clear vinyl, transparent print).
152
+
153
+ ### Curvature
154
+
155
+ Labels wrap around cylinders. The wrap distorts the design as it bends. Consider:
156
+ - **Center-aligned content** wraps cleanly.
157
+ - **Edge content** distorts on cylinder seams.
158
+ - **Hero image position**: typically front-and-center, not seam.
159
+
160
+ For tight cylinders (lipstick, small tubes): every angle of the label is visible at once. For large cylinders (water bottle, jar): one face dominates.
161
+
162
+ ## Mailer / shipping box
163
+
164
+ For DTC ecommerce:
165
+
166
+ | Element | Use |
167
+ | --- | --- |
168
+ | **Outside** | Brand visible? Or stealth? Affects packaging cost + brand experience. |
169
+ | **Inside print** | Premium "unboxing" — branded interior delights customers. |
170
+ | **Tape** | Branded tape adds polish. |
171
+ | **Sticker / seal** | "Thank you" sticker on inner package. |
172
+ | **Insert card** | Welcome / how-to / discount for next purchase. |
173
+ | **Tissue / wrap** | Premium feel. |
174
+
175
+ Korean DTC trends 2024+:
176
+ - **Inside-printed mailers** — outside neutral / branded; inside surprises with bold color or art.
177
+ - **Eco messaging** — "100% recycled cardboard" / "Soy-based ink" prominently.
178
+ - **Reusable packaging** — packaging that customers keep (premium boxes).
179
+
180
+ ### Shipping box specs
181
+
182
+ Standard sizes (mm) — pick based on product:
183
+ - 200×150×50 — small flat (apparel, books).
184
+ - 250×200×100 — small cube (cosmetics, accessories).
185
+ - 300×200×100 — medium flat (most products).
186
+ - 400×300×200 — medium cube (multi-item orders).
187
+
188
+ Custom sizes available but expensive at low volume. Use a standard size with internal void fill if possible.
189
+
190
+ ## Color in packaging
191
+
192
+ - **Spot color** is more common in packaging than print collateral. Pantone-matched brand color ensures consistency from box to box, run to run.
193
+ - **Foil stamp** for premium products (gold, silver, copper, holographic).
194
+ - **Spot UV** for tactile contrast (matte box + glossy logo).
195
+ - **Soft-touch lamination** — velvety feel; popular in premium beauty.
196
+ - **Reverse-printed clear** (printing on the inside of a clear material; design shows through with depth).
197
+
198
+ ### Accuracy
199
+
200
+ Packaging colors are **brand-defining**. The Coca-Cola red on every can has been Pantone-matched for decades.
201
+
202
+ For brand-critical packaging:
203
+ 1. Specify exact Pantone (PMS) numbers.
204
+ 2. Get press proof from each printer / each material.
205
+ 3. Compare proofs in standardized lighting (D65 daylight standard).
206
+ 4. Approve in writing.
207
+
208
+ ## Substrate / material
209
+
210
+ Cardboard weight (gsm or pt):
211
+
212
+ | Use | Weight |
213
+ | --- | --- |
214
+ | Light folding carton (cosmetics insert) | 250-300gsm |
215
+ | Standard folding carton (most products) | 300-350gsm |
216
+ | Sturdy folding carton (electronics) | 350-400gsm |
217
+ | Premium rigid box (luxury) | 1000-1500gsm cardstock + wrap |
218
+ | Corrugated mailer | E-flute (1.5mm) or B-flute (3mm) |
219
+ | Heavy-duty corrugated | C-flute (4mm), B-C double wall |
220
+
221
+ White (SBS — solid bleached sulfate) is the most common board for color-printed cartons. Brown kraft signals natural / eco. Gray-back is cheaper but shows on inside.
222
+
223
+ ## Production process
224
+
225
+ ### Folding carton workflow
226
+
227
+ 1. **Spec the box** — dimensions, material, finish, special effects.
228
+ 2. **Get / create dieline**.
229
+ 3. **Design on dieline** — keep critical content in safe areas.
230
+ 4. **Press proof** — small run for color check.
231
+ 5. **Bulk print** — usually offset for large runs (5000+); digital for small (< 1000).
232
+ 6. **Cut + crease** — die-cut machine creates the precise cuts and crease lines.
233
+ 7. **Glue + assemble** — glued or shipped flat.
234
+ 8. **Pack** — products inserted; cartons sealed.
235
+
236
+ Lead time: 2-6 weeks for small runs; 4-12 weeks for large runs with custom finishing.
237
+
238
+ ### Costs
239
+
240
+ Highly variable. Rough Korean pricing:
241
+ - Standard folding carton (CMYK, 350gsm, 1000-unit run): 300-800 KRW per unit.
242
+ - Premium with foil + spot UV: 1500-3000 KRW per unit.
243
+ - Rigid box (luxury): 5000-20000 KRW per unit.
244
+ - Custom shipping mailer: 200-800 KRW per unit at 1000+.
245
+
246
+ ## Korean packaging regulations
247
+
248
+ Brief overview (always confirm with current KFDA / KATS / regulator):
249
+
250
+ ### Food (식품)
251
+ - **Ingredients in descending weight order**.
252
+ - **Allergens (알레르기 표시) bolded**.
253
+ - **Net contents (내용량) prominent**.
254
+ - **Best-before (유통기한) format: YYYY-MM-DD**.
255
+ - **Country of origin (원산지)**.
256
+ - **Manufacturer (제조원) + distributor (판매원)**.
257
+ - **Storage instructions (보관방법)**.
258
+
259
+ ### Cosmetics (화장품)
260
+ - **All ingredients listed**, including INCI names.
261
+ - **Manufacturer (제조판매업자)**.
262
+ - **Net contents**.
263
+ - **Use-by / expiry**.
264
+ - **Country of origin**.
265
+
266
+ ### Supplements / health-functional foods (건강기능식품)
267
+ - Strict label format and approved claims only.
268
+ - **Health functional food (건강기능식품) mark required**.
269
+ - All claims pre-approved.
270
+
271
+ ### Recycling marks (분리배출 표시)
272
+ Required on all packaging:
273
+ - 종이 (paper)
274
+ - 플라스틱 (plastic + resin code: PE, PP, PET, etc.)
275
+ - 비닐 (vinyl)
276
+ - 캔 (can)
277
+ - 유리 (glass)
278
+ - Multi-material: 다중구조
279
+
280
+ The recycling mark is a regulated icon + Korean text. Can't redesign for brand.
281
+
282
+ ## Sustainability in packaging
283
+
284
+ 2024+ trends:
285
+ - **Plastic-free packaging** — paper alternatives, no plastic windows.
286
+ - **Mono-material packaging** — easier to recycle than mixed.
287
+ - **Compostable / biodegradable** — for food, cosmetics.
288
+ - **Refillable / reusable** — premium positioning + eco.
289
+ - **Reduced packaging** — less material; right-sized boxes.
290
+ - **FSC certification** — sustainable forestry on paperboard.
291
+
292
+ Korean ESG-aware brands increasingly call this out on the packaging itself — "재활용 가능", "100% FSC", etc.
293
+
294
+ ## Common packaging mistakes
295
+
296
+ - **Designing without a dieline** — content gets cut or folded incorrectly.
297
+ - **Critical content too close to fold** — gets creased / illegible.
298
+ - **Spot UV / foil overlapping each other** — registration issues.
299
+ - **Forgetting the back panel** — regulatory info missing.
300
+ - **Brand color wrong on press** — didn't proof; full run reprinted.
301
+ - **Wrong recycling mark** — KR regulator can require recall.
302
+ - **Ingredient font too small** — KFDA can reject.
303
+ - **Box doesn't fit the product** — too tight or too loose.
304
+
305
+ ## Don't
306
+
307
+ - Don't design without a dieline. The whole project will need to be redone.
308
+ - Don't skip the press proof for brand-critical color. RGB → CMYK shift is real.
309
+ - Don't forget regulatory content — KFDA / KATS rejects can delay launch by weeks.
310
+ - Don't use thin paperboard for products that need to feel premium.
311
+ - Don't print on the inside of a recycled-kraft mailer with full bleed — kraft texture shows through.
312
+ - Don't mix metric and imperial in dieline measurements. Pick one.
313
+ - Don't design Korean labels in English then translate at the last minute. Korean expansion / contraction breaks layouts.
314
+
315
+ ## Cross-reference
316
+
317
+ - [`knowledge/print/print-fundamentals.md`](print-fundamentals.md) — CMYK, bleed, DPI
318
+ - [`knowledge/print/korean-print-conventions.md`](korean-print-conventions.md) — KR regulatory
319
+ - [`knowledge/patterns/brand-identity.md`](../patterns/brand-identity.md) — brand foundation
320
+ - [`knowledge/illustration/illustration-systems.md`](../illustration/illustration-systems.md) — illustration on packaging
321
+ - [`knowledge/i18n/korean-document-style.md`](../i18n/korean-document-style.md) — Korean copy on packaging