A 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.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-site dont-site-a"><i></i><span>아기 수유 가이드<small>모유·분유·혼합수유</small></span></div><div class="dont-site dont-site-b"><i></i><span>월령별 아기 발달 체크<small>2개월부터 24개월까지</small></span></div><div class="dont-site dont-site-c"><i></i><span>신생아 첫 100일<small>황달·배꼽·목욕부터</small></span></div><div class="dont-site dont-site-d"><i></i><span>아기 수면 가이드<small>밤잠·낮잠 리듬</small></span></div><div class="dont-note">사이트마다 다른 대표 색. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS RelatedSites list — 모노그램과 이름, 색은 하나</p><div class="dont-real"><section class="rs rs--list" aria-labelledby="family-title" data-astro-cid-m3qsllsz> <div class="container" data-astro-cid-m3qsllsz> <h2 id="family-title" class="rs__title" data-astro-cid-m3qsllsz>함께 보는 육아 사이트</h2> <ul class="rs__list" data-astro-cid-m3qsllsz> <li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm55_om-id"><rect x="0" y="0" width="64" height="64" fill="#fff"></rect></mask><path x="0" y="0" width="64" height="64" fill="#256EF4" d="M16,0 h32 a16,16 0 0 1 16,16 v32 a16,16 0 0 1 -16,16 h-32 a16,16 0 0 1 -16,-16 v-32 a16,16 0 0 1 16,-16"></path><g><path fill="#FFFFFF" d="M23.9 22Q23.9 23.4 24.9 24.8Q25.8 26.1 27.7 27.1Q29.5 28.1 32 28.4L32 28.4L30.8 31Q27.8 30.6 25.6 29.3Q23.4 28 22.2 26.1L22.2 26.1Q21.1 28 18.9 29.3Q16.7 30.6 13.8 31L13.8 31L12.5 28.4Q15 28.1 16.8 27.1Q18.7 26.1 19.6 24.8Q20.5 23.4 20.5 22L20.5 22L20.5 20.9L23.9 20.9L23.9 22ZM32.8 32.8L32.8 35.4L23.8 35.4L23.8 43.3L20.6 43.3L20.6 35.4L11.7 35.4L11.7 32.8L32.8 32.8ZM54.2 33.1L54.2 35.7L49.3 35.7L49.3 43.3L46 43.3L46 35.7L41.3 35.7L41.3 43.3L37.9 43.3L37.9 35.7L33.1 35.7L33.1 33.1L54.2 33.1ZM43.6 21Q46.1 21 48 21.6Q49.9 22.3 51 23.5Q52 24.7 52 26.2L52 26.2Q52 27.8 51 28.9Q49.9 30.1 48 30.7Q46.1 31.3 43.6 31.3L43.6 31.3Q41.1 31.3 39.2 30.7Q37.3 30.1 36.3 28.9Q35.2 27.8 35.2 26.2L35.2 26.2Q35.2 24.7 36.3 23.5Q37.3 22.3 39.2 21.6Q41.1 21 43.6 21L43.6 21ZM43.6 23.6Q42.1 23.6 40.9 23.9Q39.8 24.2 39.2 24.8Q38.5 25.4 38.5 26.2L38.5 26.2Q38.5 27 39.2 27.6Q39.8 28.2 40.9 28.5Q42.1 28.8 43.6 28.8L43.6 28.8Q45.2 28.8 46.3 28.5Q47.4 28.2 48.1 27.6Q48.7 27 48.7 26.2L48.7 26.2Q48.7 25 47.3 24.3Q46 23.6 43.6 23.6L43.6 23.6Z "></path></g></svg></span>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://feeding.partnerscoupang.app/" data-astro-cid-m3qsllsz>아기 수유 가이드</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>모유·분유·혼합수유, 월령별로 차근차근</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li><li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm56_om-id"><rect x="0" y="0" width="64" height="64" fill="#fff"></rect></mask><path x="0" y="0" width="64" height="64" fill="#256EF4" d="M16,0 h32 a16,16 0 0 1 16,16 v32 a16,16 0 0 1 -16,16 h-32 a16,16 0 0 1 -16,-16 v-32 a16,16 0 0 1 16,-16"></path><g><path fill="#FFFFFF" d="M15.6 21.3L15.6 24L20.3 24L20.3 21.3L23.6 21.3L23.6 31.4L12.4 31.4L12.4 21.3L15.6 21.3ZM15.6 28.8L20.3 28.8L20.3 26.5L15.6 26.5L15.6 28.8ZM30 20.2L30 24.7L33.1 24.7L33.1 27.3L30 27.3L30 32L26.8 32L26.8 20.2L30 20.2ZM30 32.8L30 39.1L17.9 39.1L17.9 40.6L30.7 40.6L30.7 43.2L14.7 43.2L14.7 36.8L26.8 36.8L26.8 35.4L14.7 35.4L14.7 32.8L30 32.8ZM44.3 21.4L44.3 24L37.2 24L37.2 28.7Q40.2 28.6 42.3 28.5Q44.3 28.3 46.3 27.9L46.3 27.9L46.6 30.4Q44.7 30.9 42.6 31Q40.5 31.2 37.1 31.2L37.1 31.2L35.9 31.2L33.9 31.2L33.9 21.4L44.3 21.4ZM51.4 20.2L51.4 24.6L54.6 24.6L54.6 27.2L51.4 27.2L51.4 31.7L48.2 31.7L48.2 20.2L51.4 20.2ZM51.4 32.7L51.4 39L39.3 39L39.3 40.5L52.1 40.5L52.1 43.1L36.2 43.1L36.2 36.6L48.2 36.6L48.2 35.2L36.1 35.2L36.1 32.7L51.4 32.7Z "></path></g></svg></span>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://milestone.partnerscoupang.app/" data-astro-cid-m3qsllsz>월령별 아기 발달 체크</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>2개월부터 24개월까지, 우리 아이 발달을 차분하게 확인해요</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li><li class="rs__item" data-astro-cid-m3qsllsz> <span class="brand-mark" data-astro-cid-hwn4xkzs><svg width="32" height="32" aria-hidden="true" focusable="false" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><mask id="bm57_om-id"><rect x="0" y="0" width="64" height="64" fill="#fff"></rect></mask><path x="0" y="0" width="64" height="64" fill="#256EF4" d="M16,0 h32 a16,16 0 0 1 16,16 v32 a16,16 0 0 1 -16,16 h-32 a16,16 0 0 1 -16,-16 v-32 a16,16 0 0 1 16,-16"></path><g><path fill="#FFFFFF" d="M31 20.3L31 37.1L27.8 37.1L27.8 20.3L31 20.3ZM31.6 40.3L31.6 42.9L15.5 42.9L15.5 35.5L18.8 35.5L18.8 40.3L31.6 40.3ZM20.5 23.8Q20.5 25.3 21.1 26.8Q21.7 28.2 22.9 29.3Q24.1 30.4 26 31L26 31L24.3 33.6Q22.4 32.9 21 31.7Q19.7 30.5 18.9 28.8L18.9 28.8Q18.1 30.6 16.7 31.9Q15.3 33.3 13.3 34L13.3 34L11.6 31.4Q13.5 30.8 14.7 29.6Q16 28.4 16.6 26.9Q17.2 25.4 17.2 23.8L17.2 23.8L17.2 21.5L20.5 21.5L20.5 23.8ZM40.5 24.3Q40.5 25.6 41 26.8Q41.4 28 42.4 29Q43.4 29.9 44.9 30.5L44.9 30.5L43.1 33Q41.7 32.4 40.7 31.4Q39.6 30.5 39 29.1L39 29.1Q38.3 30.7 37.2 31.9Q36.1 33 34.5 33.7L34.5 33.7L32.8 31.2Q34.3 30.5 35.4 29.4Q36.4 28.3 36.9 27Q37.4 25.7 37.4 24.3L37.4 24.3L37.4 21.6L40.5 21.6L40.5 24.3ZM53 20.3L53 34.4L49.9 34.4L49.9 28.5L48 28.5L48 33.7L44.9 33.7L44.9 20.7L48 20.7L48 25.9L49.9 25.9L49.9 20.3L53 20.3ZM45.1 34.7Q47.5 34.7 49.3 35.2Q51.1 35.7 52.1 36.7Q53.1 37.7 53.1 39L53.1 39Q53.1 40.4 52.1 41.3Q51.1 42.3 49.3 42.8Q47.5 43.3 45.1 43.3L45.1 43.3Q42.6 43.3 40.8 42.8Q39 42.3 38.1 41.3Q37.1 40.4 37.1 39L37.1 39Q37.1 37.7 38.1 36.7Q39 35.7 40.8 35.2Q42.6 34.7 45.1 34.7L45.1 34.7ZM45.1 37.1Q42.8 37.1 41.6 37.6Q40.3 38.1 40.3 39L40.3 39Q40.3 39.9 41.5 40.4Q42.8 40.9 45.1 40.9L45.1 40.9Q47.3 40.9 48.6 40.4Q49.8 39.9 49.8 39L49.8 39Q49.8 38.1 48.6 37.6Q47.3 37.1 45.1 37.1L45.1 37.1Z "></path></g></svg></span>  <div class="rs__body" data-astro-cid-m3qsllsz> <h3 class="rs__name" data-astro-cid-m3qsllsz> <a href="https://newborn.partnerscoupang.app/" data-astro-cid-m3qsllsz>신생아 첫 100일</a> </h3> <p class="rs__tagline" data-astro-cid-m3qsllsz>황달·배꼽·목욕부터 주차별 발달까지, 처음 100일을 차근차근</p> </div> <span class="rs__count num" data-astro-cid-m3qsllsz>글 16편</span> </li> </ul> </div> </section></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-site{display:flex;align-items:center;gap:10px;border-radius:10px;padding:12px 14px;margin-bottom:10px;color:#fff;font-weight:700}
.dont-site small{display:block;font-weight:400;opacity:.9}
.dont-site-a{background:#e11d48}.dont-site-b{background:#16a34a}.dont-site-c{background:#7c3aed}.dont-site-d{background:#f59e0b;color:#1f2937}
.dont-site i{flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.35)}

Giving each of ten sites its own brand color makes them look like a colorful collection by one operator. An early approach did exactly that with a color per site and contrast fixing, and it was retired by the decision to remove bright colors. Now color comes from the design pack, and sites do not create colors.

This is kept by structure rather than by a machine check. Color values live in one place in each pack, and the command that creates a new site (new:site) does not make a color. Sites must still be distinguishable, so that is done with three things: the site name, a two-letter monogram drawn in the pack’s font, and the combination of component variants. In the “Other parenting sites” list on the right, names and marks differ but the color is the same everywhere.

This does not mean packs share colors. Accent colors differ between packs (KRDS, Primer and Carbon lean blue; shadcn is near-black). The promise is that once a pack is chosen, all ten sites share one color system.

When to use

Think of it when making a new site and wanting “a color of its own.” Refine the name, pick the two-letter mark and vary the variants instead.

Open as page ↗

Suggest an entry

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