Sshadcn

요즘 서비스 같은 모던 SaaS형. 얇은 선과 둥근 모서리, 자간 좁힌 큰 제목, 그림자는 카드 한 종류에만. — 20개 항목

원래 이름: shadcn/ui · zinc 중립 팔레트
라이선스: MIT · 아이콘 Lucide(ISC) · 글꼴 Geist·Pretendard(OFL)
원본: partnerscoupang-sites design-systems@22083bd · 데이터 babyfood

팩 나란히 보기 →

···

01사이트 머리Site header

흰 바탕에 얇은 아래 선 하나. 메뉴 글자는 옅은 회색이고 지금 보는 주제만 검게 보여요.

···

02사이트 발Site footer

바탕색 없이 윗선 하나예요. 글은 옅은 회색이고, 열 제목과 쿠팡과 관계없다는 고지 첫 줄만 검고 굵게 보여요.

···

03현재 위치Breadcrumbs

작은 회색 글자 한 줄이고, 마지막 칸만 검게 보여요. 사이는 꺾쇠 아니면 빗금이에요.

···

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

큰 검은 제목과 옅은 회색 소개글. band 는 연회색 바탕 띠에, plain 은 흰 바탕에 올라가요.

···

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

왼쪽 정렬이에요. 작은 「404」, 아주 큰 제목, 검은 「홈으로 가기」 버튼이 차례로 나와요.

···

06홈 머리Home hero

왼쪽 정렬의 아주 큰 제목과 옅은 리드글. 대표 글은 테두리 상자(editorial)나 검은 버튼(featured)으로 이어져요.

···

07주제 목록Topic index

「주제별로 보기」 제목 아래 카드 없이 글자와 가는 선만으로 주제를 나눠요.

···

08함께 보는 사이트Related sites

「함께 보는 육아 사이트」. 사이트마다 검은 둥근 글자 표식이 있고, 색은 쓰지 않아요.

···

09허브 사이트 목록Hub directory

사이트를 아기 시기 순서로 묶어요. 시기마다 작은 순번과 큰 이름, 사이트는 카드·표·세로선 중 하나로 보여요.

···

10글 머리Post header

경로 아래 아주 큰 검은 제목과 회색 리드글, 그 아래 「이 포스팅은 쿠팡 파트너스…」 문구가 테두리 상자에 들어가요.

···

11핵심 요약Summary

글 맨 위 핵심을 세 가지로 보여요. 체크 표시가 붙은 상자, 순번과 선, 첫 줄만 굵고 큰 글 중 골라요.

···

12목차Table of contents

「이 페이지에서」 회색 목록. 지금 읽는 절만 검게 보이고 선이나 띠 표시는 없어요.

···

13본문Body text

제목 아래 가는 선, 바깥 상자 없이 가로선만 있는 표가 기본(ruled)이에요. 상자로 감싸는 boxed, 여백이 넓고 제목이 큰 open 으로 바꿀 수 있어요.

···

14위급도 안내Care guide

「이럴 땐 병원에 가요」. 위급 카드만 빨간 글자와 아이콘, 나머지는 검은 글자예요.

···

15출처 상자Trust box

「참고한 자료와 확인」. 출처 번호 목록이 카드(panel), 표(ledger), 작은 각주(notes) 중 하나로 나와요.

···

16자주 묻는 질문FAQ

질문마다 가는 선으로 나뉘는 목록. accordion 은 접혀 있고 오른쪽 꺾쇠로 열며, open 은 답이 전부 펼쳐져 있어요.

···

17추천 준비물Product list

쿠팡 파트너스 상품을 눈에 안 튀게 보여요. 채운 검은 버튼 없이 테두리 버튼과 밑줄 링크만 써요.

···

18글 카드Post card

굵은 제목 위에 작은 회색 주제, 아래에 회색 설명과 날짜가 와요. 줄은 가는 선으로만 나뉘고, 그림 카드(thumb)만 테두리와 옅은 그림자가 있어요.

···

19글 목록Post list

글 카드를 줄지어 놓은 목록이에요. 아틀라스 화면에서는 큰 순번이 붙은 두 열 줄 목록으로 보여요.

···

20이전·다음 글Pager

이전 글과 다음 글로 가는 곳이에요. cards 는 테두리 상자 둘, inline 은 윗선 아래 글자 둘이에요.