큐레이션 · 오픈 · 무료

Allbirds

미니멀리스트 UI와 자연 사진을 결합한 깨끗하고 어스한 전자상거래 디자인.

01

디자인 DNA

투명성과 천연 소재에 중점을 둔 현대적이고 지속 가능한 소매 브랜드.

02

컬러

깊고 차분한 앵커와 함께하는 고대비 천연색상

03

타이포그래피

humanist-sans · geometric-sans

• display40px · 500
• body16px · 400

Display: 히어로 헤드라인 및 주요 콜아웃에 사용합니다. · Body: 일반 텍스트와 설명 텍스트에 사용합니다. · Mono: 레이블 및 보조 UI 요소에 사용합니다.

04

여백

섹션 간에 풍부한 여백을 둔 일관된 4px 기본 단위입니다.

05

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

미묘한 구분을 위한 1px solid rgba(0,0,0,0.1).

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 20px 25px -5px

06

레이아웃

중앙 정렬된 모달 오버레이가 있는 전체 폭 히어로.

07

모션과 인터랙션

hover 상태 및 배경색을 위한 부드러운 전환.

미묘한 배경색 변화 또는 불투명도 변화. · transform 또는 색상을 통한 직접적인 시각적 피드백.

08

컴포넌트

• button 약간의 border radius를 가진 솔리드 채우기 버튼.
• card 대형 제품 사진이 포함된 깔끔한 카드.
• chip 대문자 텍스트를 사용하는 미니멀리스트 레이블.
• input 명확한 focus 상태를 가진 표준 폼 입력.
• hero 중앙 정렬된 텍스트 오버레이가 있는 대형 라이프스타일 사진.

09

보이스와 금지 목록

• 톤 투명하고 접근하기 쉬우며 간결합니다.
• 헤드라인 짧고 임팩트 있으며 이점에 집중합니다.
• CTA 명확한 시각적 무게감을 가진 직접적이고 행동 지향적입니다.

• 네온이나 고채도 색상을 사용하지 마세요 — 스크린샷은 #E0DACF와 같은 차분한 어스톤을 보여줍니다
• 과도하게 압축된 폰트를 사용하지 마세요 — 스크린샷은 휴머니스트 산세리프 및 기하학적 산세리프 계열을 보여줍니다
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 높이감을 위한 미묘하고 부드러운 섀도우를 보여줍니다
• 복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 풍부한 여백과 단일 모달 초점을 보여줍니다
• 본문 텍스트에 모든 글자를 대문자로 사용하지 마세요 — 스크린샷은 대문자를 UI 레이블과 짧은 헤드라인에만 사용합니다
• 모든 곳에 날카롭고 정사각형 모서리를 사용하지 마세요 — 스크린샷은 최대 16px의 둥근 모서리와 필 모양의 조합을 보여줍니다
• 피하기: 전문 용어가 많은 기술적 언어.
• 피하기: 공격적인 판매 전략.
• 피하기: 지나치게 복잡한 문장 구조.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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