精选 · 开放 · 免费

Warby Parker

一个干净、高端的眼镜电商界面，平衡大幅摄影与简洁、极简的字体排印。

ecommerceeyewear
Warby Parker 网站截图
↓ 下载设计系统包 (41 MB)在 OpenDesign 中打开

原站: https://www.warbyparker.com

📦 浏览包内文件 →

01

设计气质 DNA

高端亲切时尚直面消费者眼镜

一个精致、亲切的现代必需品精品店。

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实线边框作为轮廓和分隔线。

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

悬停时平滑的透明度和box-shadow过渡。 · 文本和交互元素的颜色过渡。

微妙的透明度变化和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是一个高端、直面消费者的眼镜品牌，拥有干净、编辑感和亲切的电商界面。其设计基因建立在柔和的白色(#FCFBF9, #FFFFFF)、浅灰色(#E1E5E6)、深墨色(#121212)和深海军蓝(#072369)的调色板上，并以主操作蓝色(#1050D0)点缀。字体排印采用人文主义/几何无衬线字体作为正文，过渡衬线字体作为展示标题。关键约束：保持宽松的留白和12列网格；使用大型、高质量摄影；按钮保持药丸形状和高度易读性；避免杂乱布局和不必要的装饰元素；并确保高对比度以实现无障碍访问。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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