精选 · 开放 · 免费

Topicals

一个大胆、具有编辑风格的护肤品牌，运用超大字体排版和高对比度摄影来传达科学依据、包容性的配方理念。

01

设计气质 DNA

一个大胆、现代的护肤品牌，融合了临床功效与俏皮、包容的高级时装编辑美学。

02

色彩

以深炭灰和纯净白为基础的高对比度色彩体系，搭配鲜明的珊瑚红色点缀，提供充满活力的视觉焦点。

03

字体

geometric-sans · humanist-sans

• display120px · 700
• heading42px · 500
• body14px · 400
• label12px · 500

超大展示文本和主标题使用几何无衬线字体。 · 正文和界面元素使用人文主义无衬线字体，以保持可读性。 · 大型展示文本采用紧凑的字间距，打造紧凑、有力的视觉效果。 · 正文尺寸保持在 14px 或以上，确保易读性。

04

间距

结合了基于 4px 的紧凑界面元素间距与编辑版块的宽松留白。

05

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

06

布局

全出血主视觉区域以超大排版品牌标识和大型产品照片为主导，随后是双栏编辑版块。

07

动效与交互

内容元素的淡入动画。 · 交互元素的平滑颜色过渡。 · 文本和背景颜色变化的线性过渡。

按钮和链接等交互元素通过平滑的 0.2s 线性过渡改变背景或文本颜色。 · 背景或边框颜色的细微变化表示激活状态。

08

组件

• button 按钮设计简洁，采用 2px 圆角、14px 无衬线文字，背景透明，悬停时填充为纯色。
• card 内容卡片依赖高品质摄影和宽松留白，而非传统的卡片边框或阴影。
• chip 小型、大写标签，采用 1px 边框和圆角，用于标签和次要信息。
• input 输入框使用简洁的 1px 边框和 2px 圆角，保持干净、实用的外观。
• hero 全视口主视觉区域，采用超大排版品牌标识，中央放置产品照片，背景为深色。

09

文案语气与禁用清单

• 语气 自信、包容、基于科学，带有一丝俏皮。
• 标题风格 大胆、超大、直接，通常使用单个词语或简短有力的短语。
• 按钮文案 简洁、以行动为导向，使用干净的无衬线字体和透明按钮样式。

• 不要使用装饰性或花体字体——截图显示一致使用干净的几何和人文主义无衬线字体。
• 不要为 Hero 区域使用浅色或多彩背景——截图显示为深炭灰背景搭配白色文字。
• 不要在卡片上使用过多阴影或边框——截图显示为干净的、以摄影为主导的布局，没有厚重的容器。
• 不要使用多彩色板——截图显示为聚焦于黑色、白色和单一鲜艳珊瑚色的色彩体系。
• 不要在按钮或输入框上使用大圆角——截图显示为 2px 圆角，呈现更利落、更精致的视觉效果。
• 不要使用小型、拥挤的布局——截图显示为超大字体排版和宽松留白，以营造编辑感。
• 避免: 避免使用过于技术化的术语、过度装饰的元素或冰冷、无菌的美学。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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