精选 · 开放 · 免费
Athletic Brewing
一个为高端无酒精啤酒打造的、灵感源于自然、大胆而富有活力的电子商务体验。
beveragedtc
01
设计气质 DNA
无酒精啤酒运动品质健康意识积极
一个碰巧酿造啤酒的高端户外生活方式品牌
02
色彩
#EBD923Accent
#003A5DInk
#FFFFFFBG
#414042Muted
rgba(0,58,93,1.0)Line
深海军蓝与明亮黄色的高对比度搭配，传达大胆、充满活力的沟通。
03
字体
condensed-sans · geometric-sans
- display
64px · 900 - display-sm
40px · 900 - body
16px · 400 - caption
12px · 400
所有标题使用大写转换 · 元素之间保持充足的垂直间距 · 确保文本与背景之间的高对比度
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
充足、开阔的间距，让产品得以呼吸。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 16px
lg · 16px
pill · 10000px
1px solid rgb(0, 58, 93)
rgba(0, 0, 0, 0.08) 0px 4px 16px 0px · rgba(0, 0, 0, 0.04) 0px 2px 10px 5px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中内容，配有醒目的顶部导航和全幅促销横幅。
07
动效与交互
100msmicro
200mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
悬停状态使用100毫秒快速过渡 · 可见性变化使用200毫秒缓入缓出 · 背景颜色变化使用300毫秒过渡
交互元素上的微妙颜色变化或阴影增强。 · 按钮上提供即时的微交互反馈。
08
组件
- button 高对比度主按钮（黄色背景，海军蓝文字），带有胶囊形圆角。
- card 以图片为中心的产品卡片，带有清晰的徽章（例如，'热销款'）。
- chip 用于产品属性的小型胶囊形标签。
- input 干净、简约的表单字段，使用标准边框样式。
- hero 大型、分栏或全出血区块，采用大胆的排版和高质量摄影。
09
文案语气与禁用清单
- 语气 自信、积极、使命驱动。
- 标题风格 大胆、祈使句式，且通常全大写。
- 按钮文案 直接且以行动为导向，例如，'GET RUN WILD' 或 'FIND IN STORE'。
- 不要为标题使用细或轻的字体粗细——截图显示的是粗重的900字重排版
- 不要使用柔和或粉彩色的调色板——截图显示的是高饱和度的海军蓝、青色和黄色
- 不要为按钮使用圆角矩形或柔化边角——截图显示的是极端的胶囊形圆角
- 不要使用小而密集的布局和紧凑的填充——截图显示的是充足的留白和大尺寸的触控目标
- 不要使用装饰性衬线字体——截图使用的是简洁、运动感的无衬线字体
- 不要将深色模式作为主主题——截图使用的是浅色背景搭配深色文字
- 避免: 被动或过于正式的语言
- 避免: 与产品无关的复杂术语
- 避免: 过于杂乱或拥挤的视觉布局
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Athletic Brewing的网站是一个用于无酒精啤酒的高端DTC电子商务平台。它使用深海军蓝(#003A5D)和明亮黄色(#EBD923)的高对比度调色板，背景为白色，营造出大胆而充满活力的感觉。排版以紧凑型无衬线字体为主用于标题，几何无衬线字体用于正文，标题几乎总是大写。关键设计特征包括充足的间距、胶囊形按钮和高质量的生活方式摄影。切勿使用细字体、柔和颜色或方形边角的按钮。布局宽敞且居中，优先考虑产品可见性和清晰的行动号召。
en · zh-CN · zh-TW · ja · ko