CCarbon
IBM 업무 도구형. 검은 머리, 모서리 없는 회색 타일, 가늘고 큰 제목, 넓은 화면에서 제목은 왼쪽·내용은 오른쪽. — 20개 항목
- 원래 이름
- Carbon Design System (IBM)
- 라이선스
- Apache-2.0 · 글꼴 IBM Plex Sans KR(OFL)
- 원본
- partnerscoupang-sites design-systems@22083bd · 데이터 babyfood
01사이트 머리Site header
맨 위가 거의 검은색 48px 띠예요. 사이트 이름이 왼쪽에 있고, 지금 메뉴는 밝은 글자와 흰 밑줄로 표시해요. 업무용 도구 화면 같은 머리예요.
02사이트 발Site footer
머리와 같은 검은 판에 칸을 나눠 이름·사이트 정보·함께 보는 사이트를 놓고, 아래에 고지 줄을 둬요. 가볍게 쓰려면 회색 한 덩어리 compact가 있어요.
03현재 위치Breadcrumbs
빗금은 링크 뒤에 붙고, 꺾쇠는 항목 앞에 붙는 회색 아이콘이에요. 14px 글자에 링크는 파란색, 현재 위치만 검은 글자예요.
04주제·안내 페이지 머리Page head
주제 이름이 가는 큰 글씨로 나와요. 회색 띠 위에 올리거나, 띠 없이 흰 바탕에 두고 아래에 탭 줄을 붙여요.
05없는 페이지(404)Not found (404)
왼쪽에 맞춘 큼직한 「404」와 가는 제목, 파란 버튼이에요. 가운데 정렬을 쓰지 않아 안내 문서 같아요.
06홈 머리Home hero
그림도 그라데이션도 없이 흰 바탕에 가는 큰 제목만 왼쪽에 둬요. 대표 글 상자, 주제 타일, 큰 대표 글 제목 중에서 무엇을 주인공으로 할지 골라요.
07주제 목록Topic index
「주제별로 보기」 제목이 왼쪽 좁은 칸에 있고 내용이 오른쪽 넓은 칸에 붙는 편집 격자예요. 위쪽에 가는 선을 긋고 구분해요.
08함께 보는 사이트Related sites
회색 타일에 사이트 표식, 이름, 한 줄 소개가 들어가요. 줄이나 문단 속 링크로 줄일 수도 있어요. 사이트별 색은 없고 표식은 모두 같은 파란색이에요.
09허브 사이트 목록Hub directory
사이트를 아기 시기 순서(출산 전, 태어나서 100일 …)로 늘어놓아요. 큰 번호가 붙은 칸, 회색 머리 줄의 표, 가로 단계선 중에서 골라요.
10글 머리Post header
「기관 자료 6곳과 대조」와 「확인 날짜」를 제목 아래 줄이나 옆 칸 표로 먼저 보여 주고, 쿠팡 파트너스 문구는 테두리 상자 한 줄로 조용히 놓여요.
11핵심 요약Summary
모서리도 테두리도 없는 옅은 회색 상자에 가는 체크 표시, 상자 없이 줄마다 선을 긋고 「01 02」 가는 큰 숫자를 붙인 순번 줄, 「한 줄로 말하면」 아래 첫 문장만 크게 쓴 모양 세 가지예요.
12목차Table of contents
「이 페이지에서」 목록은 왼쪽에 가는 회색 선이 있고 지금 읽는 절만 진해져요. 접힌 상자, 칩 줄, 번호 목록으로 바꿀 수 있어요.
13본문Body text
제목은 굵지 않은 가는 글씨, 체크리스트는 빈 네모 칸이에요. 표는 회색 머리 줄에 가로선만(ruled), 바깥 상자에 줄마다 번갈아 회색(boxed), 머리 바탕 없이 아래 선만(open)으로 달라져요.
14위급도 안내Care guide
「바로 119」 카드만 빨간 굵은 테두리와 빨간 제목이고, 나머지 안내는 회색 상자예요. 위아래, 나란히, 상자 없음 세 가지로 놓을 수 있어요.
15출처 상자Trust box
출처를 테두리 없는 회색 상자의 번호 목록(panel), 「기관 ｜ 자료 ｜ 확인일」 세 칸 표(ledger), 위 선 하나 아래 작은 각주(notes)로 보여 줘요.
16자주 묻는 질문FAQ
질문 줄마다 위에 가는 선이 있고 오른쪽에 꺾쇠가 있어요. 펼친 답은 오른쪽 여백을 남겨 둬요. 전부 펼친 Q·A 두 칸 모양도 있어요.
17추천 준비물Product list
광고처럼 튀지 않게 쿠팡 링크를 붙여요. 대가성 문구는 테두리 상자로 먼저 나오고, 링크는 파란 외곽선 버튼, 표 속 링크, 체크리스트 아래 링크 중에서 고를 수 있어요.
18글 카드Post card
타일은 모서리도 테두리도 없는 회색이고 오른쪽 아래에 파란 화살표가 있어요. 변형은 선으로 나뉜 줄(list), 글 속 도식을 잘라 얹은 그림 타일(thumb), 큰 가는 순번 줄(number)이에요.
19글 목록Post list
위 선으로 나뉜 큰 가는 순번 줄이 넓은 자리에서 두 칸으로 놓여요. 그림 카드를 쓰면 회색 타일이 얇은 흰 틈을 두고 붙어요.
20이전·다음 글Pager
이전 글과 다음 글이 회색 타일 두 개로 나란히 있거나, 선으로 나뉜 두 줄로 있어요. 화살표는 파란색이에요.