Color only where it does a job

색은 기능이 있는 곳에만

Each pack has a single accent color for places like links and main buttons. The urgent color appears only on the “call 119 now” guidance.

···
html
<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>Carbon CareGuide stack — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><div class="container"><div class="prose cp cp--boxed" data-care="stack" data-astro-cid-rlw5ahkd> <h2>이럴 땐 병원에 가요</h2><div class="care"><section class="care-card care-card--urgent" aria-labelledby="care-1"><p class="care-card__title" id="care-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M16,23a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,23Z"></path><path d="M15 12H17V21H15z"></path><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"></path></g></svg>바로 119 · 응급실</p><ul><li><strong>바로 119</strong>: 숨쉬기 힘들어함, 목이나 혀의 부기, 축 처짐, 의식이 흐려짐</li></ul></section><section class="care-card" aria-labelledby="care-2"><p class="care-card__title" id="care-2">진료를 받아 보세요</p><ul><li><strong>빨리 진료</strong>: 두드러기가 넓게 퍼지거나 구토가 계속돼요</li><li><strong>상담 예약</strong>: 같은 음식을 먹은 뒤 증상이 반복되거나, 피부가 계속 나빠져요</li></ul></section></div> </div> </div></main>
css
.dsx--one,.dsx{padding-top:34px}.care-card--urgent{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.care-card--urgent::before{content:'위급 색은 여기에만 (바로 119)';position:absolute;bottom:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.care-card:not(.care-card--urgent){outline:2px dashed #c2410c;outline-offset:3px;position:relative}.care-card:not(.care-card--urgent)::before{content:'그 밖의 안내는 회색 계열';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.care-card:not(.care-card--urgent){margin-top:34px}.prose>h2{margin-bottom:34px}

When color is everywhere, the eye has nowhere to go. So color is used only where it means something: the pack’s one accent color on links and main buttons, and an urgent color on the “call 119 now” card that warns about an emergency. Everything else is emphasized by text size, weight, spacing and steps of grey.

Compare the two hospital-guidance cards in the demo (Carbon). Only the “call 119” card has the red urgent border and title and a larger heading; the “see a doctor” card below has a grey border. Packs express it differently; KRDS uses a strong black border with a dark red title. Spending the urgent color elsewhere would weaken the signal in a real emergency. Colored stripes and colored heading bars are blocked by design:audit; the rest is checked by a person in the gallery.

“No different color per site” is kept as its own item in the don’ts.

When to use

Think of it when you want something to stand out. Try size, weight, spacing and grey steps before adding a color.

Open as page ↗

Suggest an entry

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