精选 · 开放 · 免费
Fallengrape
一个精致的葡萄酒品牌年龄验证页面,运用温暖、有机的大地色调和衬线字体。
WarmRefinedCurationPhotographicConsumer
01
设计气质 DNA
葡萄酒年龄验证高端有机
一个质朴、高端的酒窖,搭配温暖的纸质纹理
02
色彩
#573D21Ink
rgba(87,61,33,0.75)Ink soft
#E3A36EBG
#E1C6ABBG soft
#F3F3F3BG quiet
rgba(87,61,33,0.1)Muted
rgba(87, 61, 33, 0.1)Line
通过自然的大地色调和高对比度的衬线字体,营造有机的温暖感。
03
字体
transitional-serif · grotesque-sans
- display
48px · 400 - body
14px · 400 - caption
16px · 400
展示元素使用 Romie 字体 · 正文和 UI 文本使用 Arial Narrow 字体
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
中央模态框内使用充裕的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(87, 61, 33, 0.1)
rgba(0, 0, 0, 0.1) 0px 4px 30px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
一个居中的模态覆盖层,置于全出血的纹理背景之上
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
hover 时简单的 opacity 转场
按钮上的颜色偏移或 opacity 变化 · 直接的状态变更或模态框关闭
08
组件
- button 无边框的扁平、矩形色块
- card 带有细微投影的半透明矩形模态框
- hero 全屏背景图搭配居中的模态覆盖层
09
文案语气与禁用清单
- 语气 正式、直接且合规
- 标题风格 大号、优雅的衬线字体问题
- 按钮文案 直接、大写的无衬线标签
- 不要使用明亮、高饱和度的强调色——截图中展示的是柔和的大地色调
- 不要在标题中使用纯几何的无衬线字体——截图中使用的是过渡衬线字体
- 不要使用小而局促的间距——截图中显示模态框内有充裕的垂直 padding
- 不要使用厚重的投影——截图中使用的是非常细微、柔和的阴影
- 不要在模态框上使用尖锐的圆角——截图中显示的是尖锐、未做圆角的边缘
- 不要为主容器使用纯白色背景——截图中使用的是半透明的米色
- 避免: 俏皮的语言
- 避免: 明亮、霓虹的色彩
- 避免: 过度的装饰
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
该设计是一个精致的葡萄酒品牌年龄验证覆盖层,定位为高端、有机。其色板大量依赖温暖的大地色调,特别是柔和的橘色背景(#E3A36E)和米色半透明模态框(#E1C6AB),搭配深棕色文本(#573D21)。字体排印在优雅的过渡衬线字体(Romie)用于主要问题与简洁、紧凑的 grotesque-sans 无衬线字体(Arial Narrow)用于 UI 元素之间形成对比。布局为单个、居中的模态框,带有充裕的垂直间距。关键的“不要”包括:切勿使用明亮、高饱和度的强调色;避免在展示元素中使用纯几何的无衬线字体;确保间距充裕而非局促。整体氛围是宁静、质朴且精致的。
en · zh-CN · zh-TW · ja · ko