큐레이션 · 오픈 · 무료

Koox

대담한 타이포그래피와 절제된 자연 팔레트를 사용한 깔끔한, 제품 중심 유기농 주스 이커머스.

01

디자인 DNA

모던한 수공예 주스 연구소와 깔끔한 이커머스의 만남

02

컬러

따뜻한 지구빛 포인트 컬러를 사용한 고대비 미니멀리즘.

03

타이포그래피

geometric-sans · grotesque-sans

• display56px · 900
• headline30px · 700
• body16px · 400

주요 호출-to-action과 섹션 헤더에는 볼드체, 대문자를 사용합니다. · 디스플레이 텍스트의 줄 간격은 시각적 임팩트를 유지하기 위해 타이트하게 설정합니다.

04

여백

일관된 4px 베이스에 다양한 수직 간격을 통해 명확한 계층 구조를 설정합니다.

05

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

구조적 정의를 위한 날카로운 1px 실선 테두리.

rgb(107, 18, 41) 5px 5px 0px 0px · rgba(0, 0, 0, 0.2) 0px 6px 27px 0px

06

레이아웃

전체 폭 히어로와 아래쪽 세 개 제품 카드 그리드를 갖춘 중앙 정렬 콘텐츠.

07

모션과 인터랙션

인터랙티브 요소의 매끄러운 페이드 및 변환 전환.

버튼과 링크의 섬세한 opacity 또는 transform 변화. · 약간의 쉐도우 조정을 통한 즉각적인 반응.

08

컴포넌트

• button 대문자 텍스트를 사용한 실 배경 블록으로, border-radius 없이 섬세한 오프셋 쉐도우 적용.
• card 전체 확장 이미지 위에 중앙 정렬된 볼드 화이트 텍스트 오버레이.
• chip 해당 없음
• input 해당 없음
• hero 전체 뷰포트 배경 이미지에 중앙 정렬 화이트 텍스트 오버레이와 두드러진 CTA 버튼.

09

보이스와 금지 목록

• 톤 자신감 있고, 깔끔하며, 직설적인.
• 헤드라인 볼드체, 대문자, 혜택 중심.
• CTA 직접적이고, 행동 지향적이며, 모든 문자 대문자.

• 장식적이거나 필기체 타이포그래피를 사용하지 마세요 — 스크린샷은 볼드하고 깔끔한 기하학적 sans-serif 폰트를 보여줍니다.
• 둥근 모서리 또는 부드러운 형태를 사용하지 마세요 — 스크린샷은 날카로운 1px 테두리와 border-radius 없음을 보여줍니다.
• 복잡한 다색 팔레트를 사용하지 마세요 — 스크린샷은 화이트, 블랙, 그레이, 그리고 하나의 따뜻한 포인트 컬러로 구성된 절제된 팔레트를 보여줍니다.
• 본문 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 디스플레이 텍스트는 중앙 정렬하지만 제품 레이아웃은 구조화되어 있음을 보여줍니다.
• 다크 모드 또는 무드 있는 배경을 사용하지 마세요 — 스크린샷은 밝은 화이트 기반 배경과 고대비 잉크를 보여줍니다.
• 바쁜 패턴 또는 질감을 사용하지 마세요 — 스크린샷은 깔끔한 사진과 단색 블록을 보여줍니다.
• 피하기: 지나치게 장식적이거나 필기체 폰트를 피합니다.
• 피하기: 복잡한 그라데이션 또는 쉐도우를 피합니다.
• 피하기: 경쟁 요소가太多的 지나치게 복잡한 레이아웃을 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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