精选 · 开放 · 免费
Bellroy
专为现代旅行者设计的高端携行产品,将实用性与内敛风格融为一体。
accessoriesecommerce
01
设计气质 DNA
探险功能性可持续高端携带
高端户外品牌与极简日式工程的融合
02
色彩
#cd4c20Accent
#333333Ink
#666666Ink soft
#f7f7f7BG
#ffffffBG soft
#efefefBG quiet
#999999Muted
rgba(0,0,0,0.08)Line
简洁明亮的背景,搭配高质量摄影图片,关键操作使用单一的焦橙色作为强调。
03
字体
display-sans · humanist-sans · monospace
- display
64px · 900 - heading
32px · 700 - body
16px · 400 - small
13px · 400
04
间距
3px
7px
14px
21px
28px
42px
56px
84px
3.5px 基础单位,向上扩展以处理布局和组件间距
05
表面 (圆角 / 阴影 / 边线)
sm · 5px
md · 10px
lg · 14px
pill · 9999px
使用低透明度黑色或主题灰色的细微 1px 边框。
card: None · elevated: None
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
标准 12 列网格布局,带最大宽度容器和一致的栏间距。
07
动效与交互
150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停和聚焦时平滑的颜色与背景过渡 · 交互元素的细微透明度和变换变化
细微的颜色变化或背景过渡 · 通过标准浏览器交互提供即时视觉反馈
08
组件
- button 实心填充按钮,采用药丸形圆角和大写文字
- card 以图片为主的卡片,圆角设计并带有细微的投影
- chip 用于分类的小型圆角标签
- input 简洁的搜索栏,包含占位符文本和搜索图标
- hero 全幅生活方式摄影,叠加粗体排版和主要行动按钮
09
文案语气与禁用清单
- 语气 自信、干练、目标驱动
- 标题风格 简短有力、全大写的陈述,强调实用性和动感
- 按钮文案 行动导向、全大写、直接明了
- 避免使用霓虹色或高饱和度配色——网站依赖柔和的自然色调搭配单一的焦橙色强调色。
- 避免使用高度装饰性或手写体字体——设计采用粗体压缩无衬线显示字体搭配简洁的人文无衬线字体。
- 避免布局杂乱,充斥过多的 UI 元素或边框——网站保持整洁、宽敞且聚焦于图片的视觉风格。
- 避免交互元素使用尖锐的直角——UI 一致使用圆角,通常达到药丸形的半径。
- 避免使用深色模式或厚重的背景——网站主要采用 #f7f7f7 和 #ffffff 等浅色中性背景。
- 避免使用强烈的投影或厚重的斜面效果——投影主要用于微妙地抬升卡片,使其与背景略有分离。
- 避免: 华丽或过度装饰的语言
- 避免: 侵略性或过度推销的文案
- 避免: 模糊或抽象的表述
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Bellroy 是一个高端配件和携行品牌。其设计语言简洁、自信且以产品为中心,以浅色中性色调 (#f7f7f7, #ffffff) 和单一的焦橙色强调 (#cd4c20) 为特征。字体方面,标题采用粗体压缩无衬线显示字体,正文采用简洁的人文无衬线字体。布局宽敞,大量使用高品质生活方式摄影和充足的留白。关键的忌讳包括避免霓虹色、装饰性手写体、杂乱的 UI、尖锐的直角、深色背景和厚重的投影。品牌语调干练且注重行动,强调动感和巧妙的实用性。
en · zh-CN · zh-TW · ja · ko