큐레이션 · 오픈 · 무료

Layers

디자이너들이 레이어링된 UI 컴포넌트와 포트폴리오를 공유하고 탐색할 수 있는 큐레이션 플랫폼입니다.

01

디자인 DNA

UI/UX 디자이너들이 레이어링된 디자인 에셋을 선보이고 발견할 수 있는 디지털 갤러리입니다.

02

컬러

깔끔한 갤러리 같은 경험을 위해 미니멀한 고대비 흑백과 미세한 회색 계층을 사용합니다.

03

타이포그래피

grotesque-sans

• display36px · 500
• body16px · 400
• caption14px · 400

04

여백

일관된 4px 기본 간격에 8px, 12px, 16px 단위로 간격과 간격을 설정합니다.

05

표면 (라운드 / 그림자 / 경계선)

미세한 구분과 카드 테두리를 위해 1px solid rgb(229, 231, 235)를 사용합니다.

rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset · rgba(0, 0, 0, 0.03) 0px 0px 0px 1px inset

06

레이아웃

좌측 사이드바, 메인 콘텐츠 영역, 그리고 채용 공고 및 광고를 위한 우측 사이드바가 있는 반응형 그리드 레이아웃입니다.

07

모션과 인터랙션

상호작용 요소에 대한 부드러운 hover 전환(0.15초) · 모달 오버레이를 위한 페이드 전환(0.5초)

상호작용 요소에 대한 미세한 배경색 변경 또는 테두리 강조. · 상호작용 요소에 대한 표준 포인터 커서.

08

컴포넌트

• button 미니멀하고 모서리가 둥근(12px) 형태로, 주로 테두리와 hover 상태를 포함합니다. 기본 버튼은 검정색, 보조 버튼은 흰색과 테두리를 사용합니다.
• card 12px border-radius와 미세한 1px inset 테두리, 그리고 이미지 미리보기를 가진 깔끔한 흰색 카드입니다.
• chip 모서리가 둥근(9999px) 태그 형태의 요소로, 카테고리 필터링에 사용됩니다.
• input 모서리가 둥글고 미세한 테두리를 가진 검색 바입니다.
• hero 다양한 디자인 프로젝트와 에셋을 보여주는 콘텐츠 카드 그리드입니다.

09

보이스와 금지 목록

• 톤 전문적이고 깔끔하며, 디자인 커뮤니티와 큐레이션에 중점을 둡니다.
• 헤드라인 태그는 간결하고 대문자로, 제목은 굵게 표시합니다.
• CTA 명확한 레이블을 가진 단순하고 행동 지향적인 버튼입니다.

• 복잡한 그라데이션을 사용하지 않습니다 — 스크린샷은 최소한의 색상으로 깔끔하고 단색 배경을 보여줍니다.
• 다크 모드를 구현하지 않습니다 — 스크린샷은 흰색 배경의 라이트 테마만 사용합니다.
• 장식용 세리프 폰트를 사용하지 않습니다 — 스크린샷은 산세리프 서체의 일관된 사용을 보여줍니다.
• 무거운 드롭 섀도우를 추가하지 않습니다 — 스크린샷은 두드러진 대신 미세한 inset 테두리를 사용합니다.
• 선명한 강조색을 사용하지 않습니다 — 스크린샷은 엄격한 단색 계열 팔레트를 유지하며, 콘텐츠 내에서 간헐적으로 브랜드 색상을 사용합니다.
• 지저분한 레이아웃을 만들지 않습니다 — 스크린샷은 넉넉한 여백과 명확한 시각적 계층을 시연합니다.
• 피하기: 장난스럽거나 비공식적인 언어
• 피하기: 지나치게 장식적인 요소
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko