큐레이션 · 오픈 · 무료

Warby Parker

대형 사진과 깔끔한 미니멀 타이포그래피의 균형을 맞춘 깨끗하고 프리미엄한 아이웨어 전자상거래 인터페이스입니다.

ecommerceeyewear
Warby Parker 스크린샷
↓ 디자인 시스템 다운로드 (41 MB)OpenDesign 에서 열기

원본 사이트: https://www.warbyparker.com

📦 팩 내용 보기 →

01

디자인 DNA

프리미엄친근한세련된D2C(소비자 직접 판매)아이웨어

현대 필수품을 위한 세련되고 접근성 높은 부티크.

02

컬러

#1050D0Accent
#121212Ink
#3A434CInk soft
#FCFBF9BG
#FFFFFFBG soft
#E1E5E6BG quiet
#072369Muted
rgba(18,18,18,0.12)Line

행동을 유도하기 위해 딥 네이비와 블루 포인트를 사용한 고대비 기반 팔레트입니다.

03

타이포그래피

transitional-serif · geometric-sans

모든 기능적 텍스트, 네비게이션 및 버튼에 세리프를 사용합니다. · 에디토리얼 메인 제목에만 세리프를 사용합니다. · 가독성을 위해 넉넉한 행간을 유지합니다.

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
96px

일관된 4px 기반 그리드와 인터랙티브 요소에 넉넉한 패딩(13px 24px)을 사용합니다.

05

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

sm · 4px
md · 12px
lg · 16px
pill · 100px

외곽선과 구분선에 사용되는 1px solid 얇은 테두리입니다.

rgba(0, 0, 0, 0.04) 0px 1px 4px 0px · rgba(0, 0, 0, 0.02) 0px 4px 12px 0px · rgba(18, 18, 18, 0.12) 0px 8px 12px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

콘텐츠와 제품을 위한 넓은 거터와 최대 너비 컨테이너를 가진 12칼럼 그리드입니다.

07

모션과 인터랙션

200msmicro
350mssmall
800msmedium
cubic-bezier(0.25, 0, 0.35, 0.95)easing

호버 시 부드러운 opacity 및 box-shadow 전환. · 텍스트 및 인터랙티브 요소의 색상 전환.

미묘한 opacity 변화와 box-shadow 엘리베이션. · 복잡한 애니메이션 없이 즉각적인 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Warby Parker — 桌面首屏（hero）
桌面首屏（hero）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Warby Parker — 移动首屏
移动首屏

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

11

System Prompt

Warby Parker는 깨끗하고 에디토리얼하며 친근한 전자상거래 인터페이스를 갖춘 프리미엄 D2C 아이웨어 브랜드입니다. 디자인 DNA는 부드러운 화이트(#FCFBF9, #FFFFFF), 라이트 그레이(#E1E5E6), 딥 인크(#121212), 딥 네이비(#072369)와 프라이머리 액션 블루(#1050D0)로 구성된 팔레트에 기반합니다. 타이포그래피는 본문용 휴머니스트/기하학적 세리프와 디스플레이 제목용 트랜지셔널 세리프를 특징으로 합니다. 핵심 제약 조건: 넉넉한 여백과 12칼럼 그리드를 유지; 대형 고품질 사진 사용; 버튼은 알약 형태와 높은 가독성을 유지; 지저분한 레이아웃과 불필요한 장식 요소를 피하며; 접근성을 위한 고대비 보장.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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