精选 · 开放 · 免费

Aura Bora

一个插画元素丰富、俏皮的饮料品牌，运用大胆的轮廓字体和柔和色调，传达天然、零卡路里的气泡水形象。

01

设计气质 DNA

一本关于天然口味的友好插画故事书。

02

色彩

在柔和、有机的色调上使用高对比度的黑色轮廓，营造友好、平易近人的美学。

03

字体

grotesque-sans · monospace

• display120px · 800
• h180px · 800
• h232px · 800
• body17px · 400
• caption13px · 400

标签和导航元素使用大写 · 展示文本采用高度可变的字间距

04

间距

基于8px的网格，辅以大量padding营造留白感

05

表面 (圆角 / 阴影 / 边线)

1px solid black

6px 6px 0px rgba(0,0,0,1)

06

布局

居中的主视觉区，左侧大字体排版，右侧产品展示

07

动效与交互

滚动跑马灯 · 按钮hover缩放

缩放变换和背景色变化 · 微妙的按压效果

08

组件

• button 圆角药丸形状，黑色轮廓，背景为透明或纯色
• card 圆角，粗黑色轮廓，常带有异想天开的插图
• chip 简单文字，带黑色边框
• input 圆角矩形输入框，带黑色边框
• hero 分栏布局，包含巨大的轮廓字体和产品插图

09

文案语气与禁用清单

• 语气 友好、俏皮且平易近人
• 标题风格 粗体、巨大、大写并带有厚重轮廓
• 按钮文案 清晰、简单的行动号召，带药丸形状边框

• 使用复杂渐变 — 截图显示为纯色柔和背景
• 使用纤细、精致的线条 — 截图显示各处使用粗实的1px黑色轮廓
• 使用优雅的衬线字体 — 截图显示为粗体、圆角的无衬线和等宽字体
• 使用深色、情绪化的调色板 — 截图显示为浅色、通透的柔和色调
• 使用无边框的圆角矩形 — 截图显示有清晰的黑色轮廓
• 使用杂乱的布局 — 截图显示大量留白和聚焦的区域
• 避免: 复杂术语
• 避免: 冰冷的美感
• 避免: 厚重阴影

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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