01
设计气质 DNA
俏皮异想天开自然充满活力有机
一本关于天然口味的友好插画故事书。
02
色彩
#000000Ink#FFF9EDBG#FFE2E2BG soft#E5E5F1BG quiet#FDE4AAMutedrgba(0,0,0,1)Line在柔和、有机的色调上使用高对比度的黑色轮廓，营造友好、平易近人的美学。
03
字体
- display
120px · 800 - h1
80px · 800 - h2
32px · 800 - body
17px · 400 - caption
13px · 400
标签和导航元素使用大写 · 展示文本采用高度可变的字间距
04
间距
4px8px16px26px60px基于8px的网格，辅以大量padding营造留白感
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 10px
lg · 15px
pill · 999px
1px solid black
6px 6px 0px rgba(0,0,0,1)
06
布局
1280container
12columns
26pxgutter
768 / 1024breakpoints
居中的主视觉区，左侧大字体排版，右侧产品展示
07
动效与交互
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
滚动跑马灯 · 按钮hover缩放
缩放变换和背景色变化 · 微妙的按压效果
08
组件
- button 圆角药丸形状，黑色轮廓，背景为透明或纯色
- card 圆角，粗黑色轮廓，常带有异想天开的插图
- chip 简单文字，带黑色边框
- input 圆角矩形输入框，带黑色边框
- hero 分栏布局，包含巨大的轮廓字体和产品插图
09
文案语气与禁用清单
- 语气 友好、俏皮且平易近人
- 标题风格 粗体、巨大、大写并带有厚重轮廓
- 按钮文案 清晰、简单的行动号召，带药丸形状边框
- 使用复杂渐变 — 截图显示为纯色柔和背景
- 使用纤细、精致的线条 — 截图显示各处使用粗实的1px黑色轮廓
- 使用优雅的衬线字体 — 截图显示为粗体、圆角的无衬线和等宽字体
- 使用深色、情绪化的调色板 — 截图显示为浅色、通透的柔和色调
- 使用无边框的圆角矩形 — 截图显示有清晰的黑色轮廓
- 使用杂乱的布局 — 截图显示大量留白和聚焦的区域
- 避免: 复杂术语
- 避免: 冰冷的美感
- 避免: 厚重阴影
10
包内真实截图
11
System Prompt
Aura Bora 是一个面向消费者的、俏皮的气泡水品牌。其形象建立在异想天开的有机美学之上，使用如 #FFF9ED 和 #FFE2E2 等柔和色调，并与锐利的1px黑色轮廓（#000000）形成对比。排版采用粗体的无衬线展示字体用于巨大标题，以及结构化的等宽字体用于正文和界面元素。设计的关键部分是在组件和文本上使用粗阴影或轮廓，以营造贴纸般的插画感。不要使用精致或优雅的衬线字体。避免使用深色或高科技感的调色板。始终保持大量留白和清晰的大写导航标签。