精选 · 开放 · 免费

Periodaisle

一个直接面向消费者的可持续经期护理品牌，采用温暖、质朴的色调和包容性的摄影风格。

01

设计气质 DNA

一个温暖、质朴的健康品牌，感觉像一位朋友。

02

色彩

大地色系的中性色和深蓝绿色提供了一个沉稳、可信赖的基础。

03

字体

transitional-serif · humanist-sans

• display72px · 700
• heading24px · 700
• body14px · 400
• caption12px · 400

导航和标签使用大写字母。 · 正文使用人文主义无衬线字体以提升可读性。 · 大尺寸展示字体使用过渡衬线字体以增添优雅感。

04

间距

标准的4px网格，并对按钮和输入框设置特定的padding覆盖。

05

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

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

布局

全宽主视觉区域，搭配堆叠式内容块和简洁的产品网格。

07

动效与交互

悬停和聚焦时的颜色与box-shadow过渡。 · 交互元素的transform过渡。

颜色变化和box-shadow更新。 · 通过状态变化提供视觉反馈。

08

组件

• button 胶囊形和矩形按钮，带有内嵌box-shadow以营造触感。
• card 简洁、无边框的卡片，带有细微的背景颜色变化。
• chip 简单的文本标签，带有蓝绿色的背景高亮。
• input 简单的矩形输入框，带有细边框和圆角。
• hero 大型沉浸式摄影，搭配强有力的衬线字体标题。

09

文案语气与禁用清单

• 语气 赋能、包容且直率。
• 标题风格 粗体、全大写或大号衬线标题，以清晰的利益点为主导。
• 按钮文案 直接、以行动为导向的动词，例如“解锁”或“选购”。

• 不要使用高饱和度的霓虹色——截图显示的是大地色、柔和的色调，如 #E9EEEA 和 #D3CEC5。
• 不要使用纯粹的几何无衬线字体——截图显示正文使用的是人文主义无衬线字体 (Montserrat)。
• 不要使UI过于复杂，层次过多——截图显示的是一个简洁、扁平的层级结构。
• 不要在主要元素上使用尖锐、生硬的圆角——截图显示的是圆角矩形和胶囊形状。
• 不要到处使用刺眼、临床的纯白背景——截图显示的是温暖的米白色 (#FFFFFB)。
• 不要使用纯粹的单色方案——截图使用深蓝绿色点缀 (#144747) 以增加视觉趣味。
• 避免: 医学术语
• 避免: 过于临床的语言
• 避免: 激进的销售策略

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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