큐레이션 · 오픈 · 무료

Spindrift

러스틱 사진과 클린한 모던 타이포그래피를 결합한 프리미엄 DTC 음료 브랜드.

01

디자인 DNA

러스틱-모던한 미학의 하이엔드 유기적 주스 바.

02

컬러

깊은 녹색과 상쾌한 화이트를 지배하는 자연스럽고 유기적인 팔레트.

03

타이포그래피

geometric-sans · humanist-sans

• display56px · 400
• h136px · 400
• h228px · 400
• body16px · 400
• small14px · 400

디스플레이 및 본문 타이포그래피는 기하학적 산세리프 및 휴머니스트 산세리프 범주를 사용합니다. · 헤드라인은 모던하고 컴팩트한 느낌을 위해 타이트한 트래킹을 사용합니다. · 볼드 웨이트는 거의 사용하지 않고, 크기로 계층을 만듭니다.

04

여백

에디토리얼 흐름을 위한 여유로운 수직 간격의 클린 4px 기본 그리드.

05

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

클린하고 미니멀하며, 종종 주요 녹색으로 미묘한 액센트를 사용합니다.

0px 1px 2px 0px rgba(0, 0, 0, 0.24) · 0px 0px 2px 2px rgb(204, 204, 204)

06

레이아웃

이미지와 여백을 우선시하는 중앙 정렬 싱글컬럼 중심 레이아웃.

07

모션과 인터랙션

UI 요소 상태 변화를 위한 부드러운 전환. · 페이지 섹션을 위한 미묘한 입장 애니메이션.

인터랙티브 요소에서 미묘한 색상 변화 또는 불투명도 변화. · 상태 변화를 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 다크 배경에서 높은 대비를 가지는 알약 모양의 주요 버튼.
• card 미니멀한 테두리의 클린한 카드로, 구조를 위해 타이포그래피와 간격에 의존합니다.
• chip 두드러지지 않음; 내비게이션은 간단한 텍스트 링크를 사용합니다.
• input 흰색 배경과 둥근 모서리의 전체 너비 입력 필드.
• hero 중앙 정렬된 오버레이 텍스트가 있는 전체 블리드 사진 배경.

09

보이스와 금지 목록

• 톤 친근하고 접근 가능하며, 자연스럽게 열정적인.
• 헤드라인 대화체이며, 때때로 장난스러움 (예: '안녕, 블루베리 레몬에이드').
• CTA 직접적이며 혜택 지향적 (예: '가입하기').

• 차갑고 임상적인 화이트를 사용하지 마세요 — 스크린샷은 따뜻하고 크리미한 오프화이트(#f9f6f0)를 보여줍니다.
• 다양한 종류의 서체를 사용하지 마세요 — 스크린샷은 기하학적 및 휴머니스트 산세리프 범주의 엄격한 사용을 보여줍니다.
• 무거운 드롭 섀도우나 베벨을 사용하지 마세요 — 스크린샷은 미니멀하고 미묘한 그림자를 보여줍니다.
• 모든 곳에 직각을 사용하지 마세요 — 스크린샷은 알약 모양의 버튼(#9999px radius)을 보여줍니다.
• 얇고 가느다란 폰트를 사용하지 마세요 — 스크린샷은 단단하고 중간 굵기의 타이포그래피를 보여줍니다.
• 높은 대비의 네온 액센트를 사용하지 마세요 — 스크린샷은 자연스럽고 생동감 있는 녹색(#6bbc37)을 사용합니다.
• 피하기: 지나치게 전문적인 용어
• 피하기: 공격적인 판매 언어
• 피하기: 복잡한 문장 구조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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