精选 · 开放 · 免费

Markaware Jp

一个精致的日本时尚电商体验，拥有画廊式摄影和克制的排版设计。

01

设计气质 DNA

一个宁静的高端面料画廊

02

色彩

中性、高调的色板，让产品摄影提供所有的色彩和质感。

03

字体

geometric-sans

• display48px · 400
• headline32px · 400
• body14px · 400

所有文字使用统一的几何无衬线字体（ABCDiatype），字重为400。 · 品牌标志采用宽间距的大写字母间距设置。 · 正文采用稍宽的字母间距（0.4px）以增强可读性。

04

间距

通过主视觉图像与内容区域之间充足的内边距（398px至70px）来维持垂直节奏。

05

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

所有交互元素和容器边界使用1px实线黑色边框，形成清晰的结构定义。

rgba(0,0,0,0.2) 0px 0px 18px 0px · rgba(0,0,0,0.3) 0px 12px 60px 0px · rgba(0,0,0,0.05) 0px 0px 2px 1px

06

布局

全出血的主视觉图像搭配四列产品网格，保持统一的20px间距。

07

动效与交互

为“保持联系”模态窗口等覆盖层使用平滑的透明度和可见性过渡（0.5秒）。 · 使用标准cubic-bezier进行宽度和max-width过渡（0.4秒），用于UI元素显现。

细微的颜色偏移或透明度变化，保持网站的整体克制感。 · 通过页面过渡或模态窗口显现提供即时反馈。

08

组件

• button 药丸形轮廓按钮，黑色文字，透明背景，使用100px的border-radius。
• card 极简卡片，包含大型产品图片和下方小号的左对齐标题，由细边框分隔。
• chip 用于产品变体选择的小型颜色样本（黑色、米色、炭灰色、白色）。
• input 干净的文本输入框，边框最小化，通常伴有黑色下划线或边框。
• hero 桌面端为分屏主视觉区，图像占据约60%宽度；移动端切换为全宽显示。

09

文案语气与禁用清单

• 语气 宁静、精致且信息丰富，体现对材质质量和工艺的关注。
• 标题风格 清晰、描述性且通常带有技术性（例如“有机羊毛2/80热带”）。
• 按钮文案 直接且功能性强（例如“购买”、“加入邮件列表”、“阅读更多”）。

• 不要使用高饱和度的强调色——色板严格为单色和中性。
• 不要使用粗重的字重——所有可见文字的字重均为400。
• 不要使用复杂的装饰性背景——设计依赖于干净的摄影和留白。
• 不要在主要UI元素上使用圆角——网站大多数容器使用直角，仅按钮保留药丸形。
• 不要让界面杂乱——布局在所有元素之间保持充足且有意识的间距。
• 不要使用繁忙或多彩的色板——产品颜色和摄影是唯一的色彩变化来源。
• 避免: 响亮的营销术语
• 避免: 侵略性的销售语言
• 避免: 过度使用感叹号
• 避免: 分散对材质规格关注的模糊、华丽描述

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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