Design Pack Atlas
한국어

Packs side by side

The 20 components are numbered in groups. Open one to see the real render of all four packs for each variant, then pick the pack you prefer for that component and leave a note. Your picks stay in this browser and can be copied in one go.

My picks

KRDS0Public-service style, like a government site: white header with a bottom rule, a "full menu", grey notice boxes, generous line spacing.Primer0Developer-docs style, like GitHub: dark header, bordered boxes with grey header rows, count badges, tight density.Carbon0IBM work-tool style: black header, square grey tiles, large light headings, title on the left and content on the right on wide screens.shadcn/ui0Modern SaaS style: thin borders and rounded corners, tight large headings, a shadow on just one kind of card.

No picks yet — choose at the bottom of each comparison.

Site frame 01–05

  1. 01Site header SiteHeaderThe menu opens and closes without scripts, and the topic you are on is announced as the current page to screen readers too.bar · stacked · compact
  2. 02Site footer SiteFooterEvery page footer carries the design credit (for KRDS the prescribed sentence is required and the audit fails without it). The “not affiliated with Coupang” notice is bold.columns · compact
  3. 03Breadcrumbs BreadcrumbsThe last step is marked as “you are here”, not as a link.chevron · slash
  4. 04Page head PageHeadThe page has exactly one title (h1), here. Topic pages also show the post count and a way to other topics.band · plain
  5. 05Not found (404) NotFoundLeft-aligned. Never a giant centered “404” splash.simple · directory

Home 06–09

  1. 06Home hero HomeHeroThe home page’s only title (h1) lives here. The hub (the directory of sites) shows baby-age links instead of a featured post.editorial · finder · featured
  2. 07Topic index TopicIndexThe featured post is not repeated here, so no post appears twice on the home page. The “finder” hero and the “index” list hold the same links, so they are never picked together.sections · index · lead
  3. 08Related sites RelatedSitesSites are told apart by a monogram and their name — never by giving each site its own color.cards · list · inline
  4. 09Hub directory HubDirectoryEach stage has an anchor, so the stage links in the hero jump straight to it.stages · table · timeline

Top of a post 10–12

  1. 10Post header PostHeaderThe trust line (how many sources, last checked) comes before the affiliate disclosure, and the disclosure never gets smaller than 14px.band · plain · split
  2. 11Summary SummaryThree to five lines. No colored stripe on the summary box.check · numbered · lead
  3. 12Table of contents TocShown only when there are three or more sections. The current section is marked for screen readers too, not just by color.fold · chips · open

Post body 13–17

  1. 13Body text ProseBody text is 17px on phones and 18px on wide screens at 1.8 line height — no pack shrinks it. The structure is shared; packs only restyle it.ruled · boxed · open
  2. 14Care guide CareGuideThe urgent color is used only on the “call 119” side. No colored header band — weight comes from a heavy border and a large title.stack · split · plain
  3. 15Trust box TrustBoxList markup is used for sources only — the audit counts sources by list items.panel · ledger · notes
  4. 16FAQ FaqThe questions on screen and the ones handed to search engines must be the same.accordion · open
  5. 17Product list ProductListThe affiliate disclosure sits right above the product block, links are marked as sponsored, and items without a real link stay plain text.rows · table · checklist

Post lists 18–20

  1. 18Post card PostCardThe whole card is clickable, but the title is the only link. Posts without a picture never get an invented one.list · thumb · number
  2. 19Post list PostListTwo columns when its spot is wide — it looks at the width of its container, not the screen.no variants
  3. 20Pager PagerThe links state the previous/next relation, so search engines also know the order.cards · inline
Open as page ↗

Suggest an entry

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