精选 · 开放 · 免费
Walden Us
一个高端冥想与健康品牌,采用平静、以自然为中心的设计语言。
PremiumCleanCalmProductEditorial
01
设计气质 DNA
禅意高端极简冥想自然灵感
一个用于冥想产品的奢华禅意空间
02
色彩
#030302Ink
rgba(3,3,2,0.76)Ink soft
#FFFFFFBG
#EDEDEDEBG soft
#F7F7F7BG quiet
#808080Muted
rgba(3,3,2,0.15)Line
以白色、深绿色和暖灰色为主导的柔和、自然灵感配色
03
字体
geometric-sans · grotesque-sans
- display
40px · 500 - h1
20px · 400 - body
14px · 400 - small
12px · 400
使用Graphik作为正文和导航字体 · 使用Geist作为展示标题和品牌字体 · 保持一致的字间距以确保可读性
04
间距
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
一致的4px基础网格,配合充裕的内边距以保证呼吸感
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 8px
lg · 12px
pill · 999px
使用rgba(3,3,2,0.76)的细微1px边框
0px 4px 20px 0px rgba(3,3,2,0.15) · inset 0px 0px 0px 1px rgba(211,206,197,1) · 0px 0px 30px 0px rgba(0,0,0,0.15)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽图片英雄区配合居中模态叠加层,下方为结构化的产品网格
07
动效与交互
125msmicro
200mssmall
400msmedium
ease-in-outeasing
内容可见性的淡入淡出过渡 · 悬停时的颜色和背景色过渡
交互元素上的文字颜色和背景色过渡 · 通过背景色变化提供即时视觉反馈
08
组件
- button 模态内全宽灰色按钮配白色文字,悬停时显示细微边框
- card 采用全出血图像和居中文本标签的产品卡片
- chip 导航中基于文本的分类标签
- input 带有细微边框的简洁文本输入框
- hero 大幅全出血自然摄影图配合居中模态叠加层
09
文案语气与禁用清单
- 语气 平静、欢迎且精致
- 标题风格 简洁、直接的问题和陈述
- 按钮文案 清晰、基于体验的选项,而非激进的销售语言
- 不要使用明亮的强调色——截图中仅显示白色、灰色和深绿色调
- 不要使用装饰性字体——截图中显示的是简洁的几何和无衬线字体
- 不要到处使用圆润的胶囊按钮——截图中显示的是带有细微圆角的矩形按钮
- 不要创建密集的文本布局——截图中显示的是充裕的留白和呼吸空间
- 不要使用繁复的图案——截图中显示的是简洁的纯色背景搭配摄影图
- 不要使用激进的号召性用语——截图中显示的是平静、基于体验的选择选项
- 避免: 激进的销售语言
- 避免: 鲜艳的颜色或繁复的图案
- 避免: 复杂的专业术语
- 避免: 密集的文本块
- 避免: 过于随意的语气
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
WALDEN是一个高端冥想与健康品牌,采用平静、以自然为中心的设计语言。关键十六进制颜色包括白色(#FFFFFF)、近黑色(#030302)和暖灰色(#808080, #EDEDEDE)。字体使用几何无衬线体(Geist)作为标题,人文主义无衬线体(Graphik)作为正文。设计强调呼吸感,采用充裕的内边距和细微的边框。关键禁忌:不要使用明亮的强调色(配色是柔和的),不要使用装饰性字体(保持简洁几何感),不要创建密集的布局(保持充裕的留白)。
en · zh-CN · zh-TW · ja · ko