Design Pack Atlas
한국어
= Shared contract · Don’ts · 15

Badges with no meaning

의미 없는 배지 남발

No “NEW”, “HOT” and “Recommended” stacked on one card. A badge is used only when it truly separates a state or category, at most one per card.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-card"><div class="dont-bd"><span class="dont-bd-a">NEW</span><span class="dont-bd-b">HOT</span><span class="dont-bd-c">추천</span><span class="dont-bd-d">인기</span><span class="dont-bd-e">필독</span></div><div class="dont-bd-t">이유식 알레르기 반응, 증상과 대처법</div></div><div class="dont-note">한 카드에 배지 다섯 개. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: Primer PostCard list — 분류 라벨 하나</p><div class="dont-real"><div class="container gx-measure"> <section class="pl" aria-labelledby="c-PostCard-list" data-astro-cid-nmb674xz> <div class="pl__box" data-astro-cid-nmb674xz> <div class="pl__head" data-astro-cid-nmb674xz> <h2 class="pl__title" id="c-PostCard-list" data-astro-cid-nmb674xz="true">함께 읽으면 좋은 글</h2> <span class="pl__counter num" data-astro-cid-nmb674xz>2</span> </div> <div class="pl__list pl__list--list" data-astro-cid-nmb674xz> <article class="pc pc--list" data-astro-cid-gluaejof>  <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-allergy/" data-astro-cid-gluaejof>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>알레르기·위생</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article> <article class="pc pc--list" data-astro-cid-gluaejof>  <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-gluaejof>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>재료·영양</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article>  </div> </div> </section>  <div class="gx-lead"><article class="pc pc--list pc--lead" data-astro-cid-gluaejof>  <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-stages-guide/" data-astro-cid-gluaejof>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>단계별 이유식</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 6분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> <span class="pc__item" data-astro-cid-gluaejof>기관 자료 6곳</span> </p> </div>  </article> </div> </div></div></section></main>
css
.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}

.dont-bd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dont-bd span{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.dont-bd-a{background:#dc2626}.dont-bd-b{background:#ea580c}.dont-bd-c{background:#16a34a}.dont-bd-d{background:#2563eb}.dont-bd-e{background:#9333ea}
.dont-bd-t{font-size:17px;font-weight:700}
···

Primer

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.

···

shadcn/ui

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.

···

16Invented number bands지어낸 숫자 띠

No bands like “10,000 parents trust us” or “98% satisfaction.” Numbers are only things actually counted: post count, source count, verification date.

···

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.

If every post wears NEW and HOT, no post is actually new or popular. The more badges there are, the less the eye finds meaning in them, and they only cover the title.

No machine counts this one. Neither design:audit nor seo:audit has a badge check, so the rule is kept while writing pack code and a person reviews it in the gallery. The standard for a pack is “at most one per card.” Primer’s post card on the right carries just one small label, the topic name, which really tells which topic a post belongs to.

When a new badge seems needed, first say what it separates. If it separates nothing, write it as text, such as “Verified 2026.10.13.” A real data point like a verification date is a more trustworthy signal than a badge.

When to use

Think of it when wanting to add an eye-catching marker to a post card or product. If you cannot say what it separates in one sentence, do not add it.

Open as page ↗

Suggest an entry

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