PPrimer

GitHub 문서 같은 개발 문서형. 어두운 머리, 테두리 상자와 회색 머리 줄, 숫자 배지, 촘촘한 밀도. — 20개 항목

원래 이름: Primer (GitHub 디자인 시스템)
라이선스: MIT · 아이콘 Octicons(MIT) · 한글 Pretendard(OFL)
원본: partnerscoupang-sites design-systems@22083bd · 데이터 babyfood

팩 나란히 보기 →

···

01사이트 머리Site header

맨 위가 짙은 회색 줄이고, 지금 보는 주제는 그 안에서 조금 밝은 둥근 칸으로 떠 보여요. stacked 는 아래에 흰 탭 줄이 하나 더 붙어요.

···

02사이트 발Site footer

흰 바탕에 위 선 하나, 작은 회색 글자로 조용히 끝나요. 앱 맨 아래 발처럼 보여요.

···

03현재 위치Breadcrumbs

작은 파란 링크 사이에 연한 회색 「/」가 끼고, 마지막 현재 글만 굵고 진한 글자예요.

···

04주제·안내 페이지 머리Page head

주제 이름 옆에 글 수가 작은 회색 숫자 칸으로 붙어요. 띠를 깔면 연회색 바탕이고, 다른 주제는 하늘색 칩이에요.

···

05없는 페이지(404)Not found (404)

테두리 상자 안에 작은 「404」, 제목, 설명, 「홈으로 가기」 회색 버튼이 왼쪽 정렬로 서고, 아래에 번호 붙은 「새로 올라온 글」 상자가 이어져요.

···

06홈 머리Home hero

그림 없이 글과 테두리 상자로만 열어요. editorial 은 큰 제목 아래 「처음이라면 여기부터」 상자가, finder 는 주제 찾기 상자가 중심이에요.

···

07주제 목록Topic index

기본인 sections 는 주제마다 회색 머리 줄이 있는 상자에 글 제목이 파란 링크로 쌓여요. index 는 주제 줄만, lead 는 상자 없이 첫 글을 크게 보여요.

···

08함께 보는 사이트Related sites

「함께 보는 육아 사이트」를 테두리 상자 카드로 보여줘요. 카드마다 파란 네모 표식, 파란 이름, 소개, 글 수가 들어가요.

···

09허브 사이트 목록Hub directory

아기 시기마다 소제목이 서고, 그 아래 사이트가 상자 줄로 나와요. 표와 세로 단계 표시 같은 변형도 있어요.

···

10글 머리Post header

큰 제목 아래 방패·시계 아이콘이 붙은 메타 한 줄이 이어지고 아래 선으로 본문과 갈라요. split 은 확인 정보를 오른쪽 표 상자로 따로 빼요.

···

11핵심 요약Summary

체크·순번은 「핵심만 먼저」 회색 머리 줄이 있는 상자에 담기고, lead 는 상자 없이 「한 줄로 말하면」 아래에 첫 줄을 크게 써요.

···

12목차Table of contents

넓은 화면에서는 글 오른쪽에 「이 글의 목차」가 따라다니고, 폰에서는 상자로 접히거나 펼쳐져요. 칩 줄 변형도 있어요.

···

13본문Body text

깃허브 문서 본문처럼 제목 아래에 가는 선이 그어지고(open 은 선 없이 크게), 표·체크리스트·인용도 그 모양을 따라요.

···

14위급도 안내Care guide

위급 안내는 얇은 붉은 테두리에 옅은 붉은 바탕, 진료 안내는 연회색 상자예요. 굵은 테두리 대신 붉은 큰 제목으로 무게를 줘요.

···

15출처 상자Trust box

방패 아이콘 머리 줄 아래에 출처가 번호 줄로 이어지는, 저장소 파일 목록 같은 상자예요.

···

16자주 묻는 질문FAQ

질문 줄이 테두리 상자 안에 쌓이고 오른쪽 꺾쇠로 펼쳐요. 모두 펼친 변형은 상자 없이 굵은 질문 아래에 답이 바로 이어져요.

···

17추천 준비물Product list

링크는 연회색 버튼 「쿠팡에서 보기」(바깥 링크 아이콘 붙음)나 표·체크리스트 속 파란 글자예요. 초록 같은 강조색 버튼은 쓰지 않아요.

···

18글 카드Post card

검색 결과 줄처럼 파란 제목, 회색 설명, 아이콘 붙은 작은 메타 줄이에요. 줄들은 목록 상자에 담기고, 홈 대표 글은 별도 테두리 상자에서 더 크게 나와요.

···

19글 목록Post list

테두리 상자 하나에 줄을 쌓고, 넓은 자리에서는 상자 안이 두 열로 나뉘어 격자처럼 보여요.

···

20이전·다음 글Pager

「이전 글 / 다음 글」이 두 상자로 나란히 서거나, 양 끝에 회색 버튼이 있는 한 줄이에요.