精选 · 开放 · 免费

Nomad

一款为高端科技配件打造的、基于实用性与精致美学的高端电商体验。

01

设计气质 DNA

类似Apple风格的产品零售，但带有坚韧、旅行导向的特质。

02

色彩

以高对比度的单色为基础，突出产品摄影，不使用主品牌强调色。

03

字体

grotesque-sans · inconsolata

• display56px · 700
• heading24px · 700
• body16px · 400
• caption14px · 400
• overline12px · 700

04

间距

基于4px增量的线性间距比例，在大版面设计中慷慨使用。

05

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

1px solid rgba(0, 0, 0, 1.0)

0px 6px 6px -3px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px rgba(0, 0, 0, 0.06) · 0px 0px 0px 1px inset rgba(0, 0, 0, 0.1)

06

布局

全宽主视觉图像，后接一个居中的引言区段和一个产品卡片网格。

07

动效与交互

叠层与模态框的淡入/淡出（透明度 0.2s） · 交互元素的平滑hover过渡（0.15s）

按钮与链接上的细微透明度或颜色变化。 · 通过标准按钮状态提供即时视觉反馈。

08

组件

• button 圆角药丸形或柔和曲线按钮，采用高对比度实心填充或简洁文字链接。
• card 圆角产品卡片，带有细微的内阴影或投影，常使用网格或图像作为背景。
• chip 主视口内无可见实例。
• input 标准表单字段，采用柔和的圆角和内阴影。
• hero 全出血摄影图像，带有深色渐变叠加层，以及大号、字间距紧密的无衬线字体排版。

09

文案语气与禁用清单

• 语气 自信、高端、以实用性为核心。
• 标题风格 极简、大号、字间距紧密的无衬线体声明。
• 按钮文案 直接、清晰、目标明确。

• 不要使用鲜艳的主强调色——截图显示的是严格的单色调色板，无主导色相。
• 不要使用装饰性衬线字体作为主标题——截图显示展示文本采用紧凑、粗体的无衬线字体。
• 不要为主UI元素应用柔和的圆形圆角——截图显示是直角与药丸形按钮的混合。
• 不要使用厚重、彩色的投影——截图显示投影非常细微，几乎不可见，或为内嵌轮廓。
• 不要将所有正文都居中——截图显示主视觉文本居中，但其他位置的正文采用标准左对齐。
• 不要为主文本使用细、轻的字重——截图显示主要使用常规（400）和粗体（700）字重。
• 避免: 避免使用过于随意或俏皮的语言。
• 避免: 避免使用复杂的渐变或装饰性花纹。
• 避免: 避免使用低对比度文本。
• 避免: 避免杂乱的UI或过度的UI装饰。
• 避免: 避免使用主导性的鲜艳强调色。
• 避免: 避免在主标题中使用装饰性衬线字体。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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