큐레이션 · 오픈 · 무료

Vol

깔끔하고 단색적인 미학을 갖춘, 디자인 북과 큐레이션 제품을 위한 정교한 편집 플랫폼입니다.

01

디자인 DNA

갤러리와 같은 프레젠테이션을 갖춘 하이엔드 독립 출판사입니다.

02

컬러

공간과 타이포그래피에 의존하여 계층을 만드는, 고대비 단색 기본 테마입니다.

03

타이포그래피

transitional-serif · humanist-sans

• display80px · 300
• heading50px · 300
• body20px · 300

모든 주요 타이포그래피에 극도로 가벼운 무게(300)를 사용합니다. · 대문자 내비게이션과 라벨에 크고 넉넉한 자간을 적용합니다. · 대형 디스플레이 타이포그래피에는 타이트한 음수 자간을 사용합니다.

04

여백

차분하고 편집적인 페이스를 강조하기 위해, 주요 콘텐츠 블록 사이에 넉넉한 수직 여백을 둡니다.

05

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

밝은 배경 위에 1px의 얇고 단색 테두리를 적용합니다.

06

레이아웃

풀寬도 사진 히어로 뒤에, 제품 또는 편집 콘텐츠를 위한 중앙 정렬의 넓은 격자 레이아웃이 옵니다.

07

모션과 인터랙션

채우기 및 테두리와 같은 표준 UI 요소를 위한 미세한 0.2초 ease-in-out 전환. · 아이콘 변환을 위한 0.2초의 지연 시간.

0.2초 동안 미세한 색상 또는 테두리 전환. · 공격적인 터치 피드백 없는 표준 포인터 커서.

08

컴포넌트

• button 넉넉한 패딩과 1px 테두리가 있는 알약 모양, 또는 흰색 텍스트가 있는 단색 검정색입니다.
• card 대형 이미지와 최소한의 텍스트 오버레이로 구성된 깔끔한 레이아웃입니다.
• chip 대문자 텍스트가 있는 알약 모양 상태 태그입니다.
• input 명확한 라벨이 있는 깔끔한 직사각형 필드입니다.
• hero 가볍고 큰 세리프 또는 산세리프 텍스트가 오버레이된 풀블리드 사진 배경입니다.

09

보이스와 금지 목록

• 톤 세련되고 절제되며 매우 전문적입니다.
• 헤드라인 크고 가볍으며 권위 있는 스타일입니다.
• CTA 절제된 대문자 자간 또는 깔끔한 알약 모양입니다.

• 채워진 네온 색상을 사용하지 마세요 — 스크린샷은 엄격히 단색적인 고대비 팔레트를 보여줍니다.
• 굵고 진한 글꼴 무게를 사용하지 마세요 — 스크린샷은 모든 텍스트에 가벼운 무게(300)를 일관되게 사용하는 것을 보여줍니다.
• 작고 비좁은 간격을 사용하지 마세요 — 스크린샷은 섹션 사이의 넉넉한 수직 여백을 보여줍니다.
• 복잡한 그라데이션을 사용하지 마세요 — 스크린샷은 단색 흰색 배경과 평면적인 사진 요소를 보여줍니다.
• 공격적인 드롭 섀도우를 사용하지 마세요 — 스크린샷은 깊이 효과가 전혀 없는 완전히 평면적인 표면을 보여줍니다.
• 장난스럽고 둥근 디스플레이 글꼴을 사용하지 마세요 — 스크린샷은 정교하고 가벼운 산세리프 및 트랜지셔널 타이포그래피를 보여줍니다.
• 피하기: 화려한 네온 악센트
• 피하기: 장난스럽거나 둥근 고딕 글꼴
• 피하기: 밀집하고 혼잡한 정보 레이아웃

10

팩 안의 실제 스크린샷

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

11

System Prompt

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