PPrimer
Developer-docs style, like GitHub: dark header, bordered boxes with grey header rows, count badges, tight density. — 20 entries
- Full name
- Primer (GitHub 디자인 시스템)
- License
- MIT · 아이콘 Octicons(MIT) · 한글 Pretendard(OFL)
- Source
- partnerscoupang-sites design-systems@22083bd · data babyfood
01Site header사이트 머리
A dark charcoal bar across the top; the topic you are on shows as a slightly lighter rounded pill inside it. stacked adds a white tab row underneath.
02Site footer사이트 발
A white footer with a single line above and small grey text. It ends the page quietly, like the foot of a web app.
03Breadcrumbs현재 위치
Small blue links separated by a light grey “/”; only the current page is in bold dark text.
04Page head주제·안내 페이지 머리
The topic name is followed by its post count in a small grey badge. The band version has a pale grey background and other topics appear as light-blue chips.
05Not found (404)없는 페이지(404)
Inside a bordered box, a small “404”, a title, a description and a grey “Go home” button are left-aligned, followed by a numbered “New posts” box.
06Home hero홈 머리
The home opens with text and bordered boxes only, no pictures. editorial puts a “Start here” box under the big title; finder centers on a topic-finder box.
07Topic index주제 목록
sections gives each topic a box with a grey header row and post titles stacked as blue links. index shows only topic rows, and lead drops the boxes and shows the first post large.
08Related sites함께 보는 사이트
Sister sites appear as bordered cards, each with a blue square mark, a blue name, an intro and a post count.
09Hub directory허브 사이트 목록
Each baby stage gets a heading with its sites as box rows beneath. There are also table and vertical-steps versions.
10Post header글 머리
A big title is followed by a one-line meta row with shield and clock icons, and a line below separates the header from the body. split moves the verification info into a table-like box on the right.
11Summary핵심 요약
Checks and numbers sit in a box with a grey “Key points first” header row; lead drops the box and writes the first line large under “In one line”.
12Table of contents목차
On wide screens an “On this page” list sits to the right of the post; on phones it becomes a folded or open box. A chip-row version also exists.
13Body text본문
Like a GitHub document body, headings get a thin line underneath (open drops it and sets them larger), and tables, checklists and quotes follow the same look.
14Care guide위급도 안내
The emergency part has a thin red outline on a pale red background; the clinic part is a light grey box. Weight comes from the large red title, not a thick border.
15Trust box출처 상자
A box like a repository file list: a shield-icon header row, with sources as numbered rows beneath.
16FAQ자주 묻는 질문
Question rows stack in a bordered box and open with a chevron on the right. The all-open version drops the box: a bold question with its answer right beneath.
17Product list추천 준비물
Links are light-grey “View on Coupang” buttons (with an external-link icon) or blue text inside a table or checklist. No green accent button is used.
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.
19Post list글 목록
Rows stack inside one bordered box, and in a wide space the box splits into two columns like a grid.
20Pager이전·다음 글
Previous and next posts in Primer’s pagination style: either two boxes side by side or a single line with grey buttons at the ends.