01
设计气质 DNA
可持续身体自爱经期护理包容性健康
一个温暖、质朴的健康品牌，感觉像一位朋友。
02
色彩
#144747Accent#292623Inkrgba(41,38,35,0.7)Ink soft#FFFFFBBG#E9EEEABG soft#F5F5F2BG quiet#D3CEC5Mutedrgba(41,38,35,1.0)Line大地色系的中性色和深蓝绿色提供了一个沉稳、可信赖的基础。
03
字体
- display
72px · 700 - heading
24px · 700 - body
14px · 400 - caption
12px · 400
导航和标签使用大写字母。 · 正文使用人文主义无衬线字体以提升可读性。 · 大尺寸展示字体使用过渡衬线字体以增添优雅感。
04
间距
4px8px12px16px20px24px32px40px48px64px96px标准的4px网格，并对按钮和输入框设置特定的padding覆盖。
05
表面 (圆角 / 阴影 / 边线)
sm · 2px
md · 4px
lg · 8px
pill · 50px
1px solid rgba(41,38,35,1.0)
0px 0px 0px 2px inset rgb(20, 71, 71) · 0px 0px 0px 2px inset rgb(255, 255, 251) · 0px 1px 0px 0px rgb(255, 255, 255)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
全宽主视觉区域，搭配堆叠式内容块和简洁的产品网格。
07
动效与交互
125msmicro
250mssmall
400msmedium
ease-in-outeasing
悬停和聚焦时的颜色与box-shadow过渡。 · 交互元素的transform过渡。
颜色变化和box-shadow更新。 · 通过状态变化提供视觉反馈。
08
组件
- button 胶囊形和矩形按钮，带有内嵌box-shadow以营造触感。
- card 简洁、无边框的卡片，带有细微的背景颜色变化。
- chip 简单的文本标签，带有蓝绿色的背景高亮。
- input 简单的矩形输入框，带有细边框和圆角。
- hero 大型沉浸式摄影，搭配强有力的衬线字体标题。
09
文案语气与禁用清单
- 语气 赋能、包容且直率。
- 标题风格 粗体、全大写或大号衬线标题，以清晰的利益点为主导。
- 按钮文案 直接、以行动为导向的动词，例如“解锁”或“选购”。
- 不要使用高饱和度的霓虹色——截图显示的是大地色、柔和的色调，如 #E9EEEA 和 #D3CEC5。
- 不要使用纯粹的几何无衬线字体——截图显示正文使用的是人文主义无衬线字体 (Montserrat)。
- 不要使UI过于复杂，层次过多——截图显示的是一个简洁、扁平的层级结构。
- 不要在主要元素上使用尖锐、生硬的圆角——截图显示的是圆角矩形和胶囊形状。
- 不要到处使用刺眼、临床的纯白背景——截图显示的是温暖的米白色 (#FFFFFB)。
- 不要使用纯粹的单色方案——截图使用深蓝绿色点缀 (#144747) 以增加视觉趣味。
- 避免: 医学术语
- 避免: 过于临床的语言
- 避免: 激进的销售策略
10
包内真实截图
11
System Prompt
Aisle 是一个包容、可持续的经期护理品牌，采用温暖、质朴的配色方案（米白色 #FFFFFB，深蓝绿色 #144747，以及多种灰/棕色调）。设计依赖于人文主义无衬线字体 (Montserrat) 作为正文字体，并使用过渡衬线字体作为展示字体。关键禁忌：避免霓虹色，不要使用纯粹的几何字体，不要创建过于临床或复杂的UI。布局简洁宽敞，专注于包容性的摄影和直接的产品教育。