Ten parenting information sites and their hub share one template and wear one design pack. There are four packs — KRDS (like a Korean government site), Primer (like GitHub docs), Carbon (like IBM’s work tools) and shadcn (like a modern SaaS) — and each redraws the same 20 components in the spirit of its design system.
This site exists to pick one. Every component carries a one-sentence rule and a “use it when” for each variant, and Compare packs puts the four packs side by side so you can choose and leave notes.
The demos are not pictures. We built the component gallery of the parenting-site repository (partnerscoupang-sites, design-systems@22083bd) once per pack and took the HTML rendered from the baby-food site’s (babyfood) real posts and data, together with each pack’s CSS (2026-10-13). If something looks off here, it looks off on the real site too. When a pack changes, the same script imports it again.
The “Shared contract · Don’ts” field collects promises every pack keeps and looks no pack uses (colored box stripes, emoji, a different color per site and more). In the don’ts, only the left-hand example is drawn for illustration; the right-hand side is the real render.
Credits and licenses
Each pack’s design tokens, icons and fonts come from its design system. This is not an official site of any of them; trademarks belong to their owners.
대한민국 정부 디자인 시스템(KRDS)
본 저작물은 행정안전부에서 2024년 작성하여 공공누리 제1유형으로 개방한 ‘범정부 UI/UX 디자인시스템(KRDS)’을 이용하였으며, 해당 저작물은 ‘KRDS 디자인시스템 홈페이지(www.krds.go.kr)’에서 무료로 다운받으실 수 있습니다. (www.krds.go.kr)
- 디자인 토큰·아이콘: 범정부 UI/UX 디자인시스템(KRDS) — 공공누리 제1유형 · 행정안전부
- 글꼴: Pretendard GOV — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
Bundled notices: ATTRIBUTION.md · KRDS-copyright-2026-10-13.txt · OFL-PretendardGOV.txt
Primer (GitHub 디자인 시스템)
- 디자인 토큰: Primer Primitives 11.10.0 — MIT · Copyright (c) 2018 GitHub Inc.
- 아이콘: Octicons 19.38.0 — MIT · Copyright (c) 2026 GitHub Inc.
- 한글 글꼴: Pretendard — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
Bundled notices: ATTRIBUTION.md · MIT-octicons.txt · MIT-primer-primitives.txt
Carbon Design System (IBM)
- 디자인 토큰: @carbon/themes 11.82.0 · @carbon/type 11.68.0 · @carbon/layout 11.60.0 · @carbon/styles 1.116.0 — Apache License 2.0 · Copyright IBM Corp. 2018, 2023
- 아이콘: @carbon/icons 11.89.0 — Apache License 2.0 · Copyright IBM Corp.
- 글꼴: IBM Plex Sans KR — SIL Open Font License 1.1 · Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
Bundled notices: ATTRIBUTION.md · Apache-2.0-carbon.txt · OFL-IBMPlexSansKR.txt
shadcn/ui · zinc 중립 팔레트
- 디자인 토큰: shadcn/ui (zinc 테마, db2db46) — MIT · Copyright (c) 2023 shadcn
- 크기·그림자 단계: Tailwind CSS 4.3.3 — MIT · Copyright (c) Tailwind Labs, Inc.
- 아이콘: Lucide 1.48.0 — ISC · Copyright (c) 2026 Lucide Icons and Contributors
- 글꼴: Geist — SIL Open Font License 1.1 · Copyright (c) 2023 Vercel, in collaboration with basement.studio
- 한글 글꼴: Pretendard — SIL Open Font License 1.1 · Copyright (c) 2021, Kil Hyung-jin
Bundled notices: ATTRIBUTION.md · ISC-lucide.txt · MIT-shadcn-ui.txt · MIT-tailwindcss.txt · OFL-Geist.txt