精选 · 开放 · 免费

Goodfit Us

一个精致极简的电商平台，拥有强烈的排版存在感和克制、高端的美学风格。

01

设计气质 DNA

一个精心策划的画廊或精品店橱窗。

02

色彩

高对比度单色基底搭配单一鲜亮的蓝色，用于交互元素。

03

字体

geometric-sans

• display24px · 700
• body16px · 400
• body-semibold16px · 600

04

间距

采用一致的4px网格系统，应用于内边距和间距。

05

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

1px solid rgba(21, 21, 35, 0.1) 或使用纯色深色边框以增强对比度

rgba(0, 0, 0, 0.06) 0px 6px 18px 0px · rgba(21, 21, 35, 0.2) 0px 2px 4px 0px

06

布局

标准的12列网格，拥有充裕的留白和居中的内容容器。

07

动效与交互

细微的淡入效果 · 平滑的背景过渡 · 交互式悬停状态

交互元素上平滑的颜色变化或细微的层级提升。 · 通过颜色变化或细微的状态转换提供即时反馈。

08

组件

• button 胶囊形（border-radius: 100px），采用纯色强调色或深色背景，搭配高对比度的白色文字。
• card 圆角容器（12-20px radius），带有细微阴影和明确的边框。
• chip 小巧、圆角的标签或标记，通常带有深色边框。
• input 标准文本输入框，带有细微边框和圆角。
• hero 大幅的排版展示区，配以醒目的图像和明确的行动号召。

09

文案语气与禁用清单

• 语气 自信、简洁、经过精心策划。
• 标题风格 采用粗体几何无衬线字体，字距紧凑，对比度高。
• 按钮文案 直接且以行动为导向，常使用胶囊形按钮。

• 不要使用多种相互竞争的强调色——截图显示的是单一主导的蓝色强调色。
• 不要使用衬线字体作为主要正文字体——截图显示的是几何无衬线字体。
• 不要为主要按钮使用尖锐的方角——截图显示的是胶囊形圆角按钮。
• 不要为主要内容区域使用过暗或纯黑的背景——截图显示的是以白色/浅色为主的背景。
• 不要使用复杂、繁复的背景纹理——截图显示的是简洁的平面或微妙渐变背景。
• 不要使用文字与背景之间的低对比度——截图显示的是浅色背景上的高对比度深色文字。
• 避免: 杂乱的布局
• 避免: 过于复杂的调色盘
• 避免: 不必要的装饰元素

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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