精选 · 开放 · 免费

Glossier

一个现代的直接面向消费者的美妆品牌，将极简设计与趣味、温暖的摄影相结合。

01

设计气质 DNA

一位友好、极简主义的美妆编辑，穿着粉色衣服，喝着冰咖啡。

02

色彩

高对比度的黑白基础搭配柔和的暖色中性色，颜色主要依赖于摄影和粉色的产品点缀。

03

字体

grotesque-sans · monospace

• display130px · 400
• h132px · 500
• body16px · 400
• small12px · 400

导航和小标签使用全大写字母 · 展示文字使用紧凑的字距 · 正文保持常规字重以确保可读性

04

间距

标准的 4px 网格，区块之间留有充足空间。

05

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

按钮和输入字段使用 1px 细黑色边框，无圆角。

06

布局

全宽摄影英雄区块，叠加大型排版文字。

07

动效与交互

模态框叠加层和内容区块的淡入过渡。 · 交互元素的平滑字号和透明度过渡。

标准指针光标，可能带有微妙的透明度或颜色过渡。 · 即时响应，标准光标反馈。

08

组件

• button 带黑色边框和黑色文字的矩形轮廓按钮。
• card 整洁、无边框的内容块，依赖排版和摄影。
• chip 无可见组件。
• input 简单的矩形输入框，带 1px 边框和占位符文本。
• hero 全出血的生活方式摄影，叠加巨大的白色排版文字。

09

文案语气与禁用清单

• 语气 趣味、对话式且亲切。
• 标题风格 简短、有力，通常为小写或句首大写，带有一丝态度。
• 按钮文案 直接、以行动为导向，略带非正式感（例如，'Get the look'）。

• 不要使用鲜艳的霓虹色——截图显示严格的黑、白、柔和粉色配色方案。
• 不要给组件加圆角——截图显示按钮和模态框均为尖锐的方形边缘。
• 不要使用投影来营造层次感——截图显示大多数元素采用扁平、无边框的设计。
• 不要使用衬线字体——截图显示一致使用干净的几何无衬线字体。
• 不要用紧凑的内边距挤占元素——截图显示文字和图片周围有充足的留白。
• 不要使用厚重的渐变作为背景——截图显示使用纯色和摄影背景。
• 避免: 企业行话
• 避免: 激进的销售语言
• 避免: 过于正式的术语

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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