Design Pack Atlas
한국어

4 packs, 20 components.
Pick one.

Same posts, same data, the same 20 components — only the look differs by pack. Every demo is the real render from the parenting sites, not a mockup.

Packs side by side →

51 variants · 96 entries · the combinations 10 parenting sites + a hub actually use

Four packs — the same post header

The same post (baby-food data), its header rendered by each pack. Open a pack to see all 20 components.

···

KKRDS대한민국 정부 디자인 시스템(KRDS)

Public-service style, like a government site: white header with a bottom rule, a "full menu", grey notice boxes, generous line spacing.

공공누리 제1유형(출처표시) · 글꼴 Pretendard GOV(OFL)

···

PPrimerPrimer (GitHub 디자인 시스템)

Developer-docs style, like GitHub: dark header, bordered boxes with grey header rows, count badges, tight density.

MIT · 아이콘 Octicons(MIT) · 한글 Pretendard(OFL)

···

CCarbonCarbon Design System (IBM)

IBM work-tool style: black header, square grey tiles, large light headings, title on the left and content on the right on wide screens.

Apache-2.0 · 글꼴 IBM Plex Sans KR(OFL)

···

Sshadcn/uishadcn/ui · zinc 중립 팔레트

Modern SaaS style: thin borders and rounded corners, tight large headings, a shadow on just one kind of card.

MIT · 아이콘 Lucide(ISC) · 글꼴 Geist·Pretendard(OFL)

Shared contract · Don’ts

Promises every pack keeps, and things no pack does — colored box stripes, emoji, a different color per site.

View all (16) →
···

01Same content, different shape내용은 같고 모양만 다르다

Switching packs never changes titles, descriptions or dates. Only the shape changes, so a pack can be swapped at any time.

···

09Colored stripes on boxes상자 색 띠

No thick colored line on the left of a card or notice box. A top stripe or a colored title bar is the same thing.

···

10Emoji이모지

No emoji before titles, in lists or inside buttons. Icons come only from the pack’s own icon set.

···

11A different bright color per site사이트마다 다른 알록달록한 색

No site gets its own red, green or purple. Sites are told apart by name, a two-letter mark and their combination of variants.

KKRDS

Public-service style, like a government site: white header with a bottom rule, a "full menu", grey notice boxes, generous line spacing.

View all (20) →
···

01Site header사이트 머리

White bar with a thin grey line underneath; the current topic gets darker text and a thick underline. It looks like the header on a government portal.

···

06Home hero홈 머리

A home header that starts with words and links, no picture. A big title, a line naming the sources, then a post or topic list to read.

···

14Care guide위급도 안내

The "When to see a doctor" block. The call-119 card has a heavy black outline; the regular care card has a thin grey one.

···

18Post card글 카드

Rows separated by lines, like a bulletin board. Blue topic label, bold title, description, date; the lead post grows into a bordered box.

PPrimer

Developer-docs style, like GitHub: dark header, bordered boxes with grey header rows, count badges, tight density.

View all (20) →
···

01Site header사이트 머리

A dark charcoal bar across the top; the topic you are on shows as a slightly lighter rounded pill inside it. stacked adds a white tab row underneath.

···

06Home hero홈 머리

The home opens with text and bordered boxes only, no pictures. editorial puts a “Start here” box under the big title; finder centers on a topic-finder box.

···

14Care guide위급도 안내

The emergency part has a thin red outline on a pale red background; the clinic part is a light grey box. Weight comes from the large red title, not a thick border.

···

18Post card글 카드

Like a search-result row: blue title, grey description and a small icon meta row. Rows sit in a list box, while the home featured post gets its own bordered box and larger type.

CCarbon

IBM work-tool style: black header, square grey tiles, large light headings, title on the left and content on the right on wide screens.

View all (20) →
···

01Site header사이트 머리

A near-black 48px strip across the top, with the site name on the left. The current menu item gets lighter text and a white underline, like the header of a work tool.

···

06Home hero홈 머리

No pictures or gradients: a thin, large title on white, left-aligned. You choose the star: a featured-post box, topic tiles, or a giant featured-post title.

···

14Care guide위급도 안내

Only the "Call 119 now" card has a thick red border and red heading; the other advice sits in a grey box. It can be stacked, side by side, or boxless.

···

18Post card글 카드

Tiles are plain grey with no rounded corners or border, and a blue arrow at the bottom right. The variants are rows divided by rules (list), a tile with the post’s diagram cropped on top (thumb), and a big thin-numeral row (number).

Sshadcn/ui

Modern SaaS style: thin borders and rounded corners, tight large headings, a shadow on just one kind of card.

View all (20) →
···

01Site header사이트 머리

White bar with a single thin line underneath. Menu text is light gray and only the current topic turns black.

···

06Home hero홈 머리

A very large left-aligned title and a light lead. The featured post follows as an outlined card (editorial) or a black button (featured).

···

14Care guide위급도 안내

“When to see a doctor”. Only the urgent card has red text and icon; everything else is black.

···

18Post card글 카드

A small gray topic sits above a bold title, with a gray description and the date below. Rows are separated by thin lines only; just the picture card (thumb) has a border and a faint shadow.

Browse by field

Design packs

What every pack keeps

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.