精选 · 开放 · 免费

Joyntcbd

面向小众图形街头服饰的深色主题电商平台，拥有大胆、饱和的UI点缀色。

01

设计气质 DNA

一个高能量的数字精品店，专营小众、图形感强的服装

02

色彩

高对比度深色主色盘，搭配干净的白色内容背景和充满活力的蓝色点缀色用于活跃元素。

03

字体

geometric-sans · humanist-sans

• display24px · 700
• body16px · 400
• caption12px · 600

使用几何无衬线字体（如 SharpGrotesk 风格）用于粗体、富有表现力的展示文字。 · 使用人文主义无衬线字体（如 Roobert 风格）用于正文和标准UI元素。 · 确保深色背景上的文本具有高对比度，使用纯白色（#ffffff）。

04

间距

一致的4px网格，使用标准的8/16/24px间距。

05

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

1px solid rgba(233, 233, 236, 1)

0px 2px 4px 0px rgba(21, 21, 35, 0.2) · 0px 0px 10px 0px rgba(0, 0, 0, 0.4) · 0px -16px 16px 0px rgb(21, 21, 35)

06

布局

标准的电商网格布局，包含固定头部、全宽的英雄/产品区段以及多列产品详情布局。

07

动效与交互

悬停时细微的透明度和变换过渡（0.1s-0.15s ease-in-out）。 · 用于广泛交互状态的标准 'all' 属性过渡。

轻微的缩放或颜色变化，通常使用快速的100毫秒-150毫秒过渡。 · 通过状态变化提供即时视觉反馈。

08

组件

• button 主要操作使用圆角矩形（12px圆角），次要标签和芯片使用药丸形（999px圆角）。
• card 干净、白色背景的卡片，带有细微边框和适度的投影，用于产品展示。
• chip 小型药丸形标签，用于产品风格和类别。
• input 圆角搜索栏，具有高对比度边框和醒目的图标按钮。
• hero 全宽、视觉信息密集的横幅区段，结合摄影和粗体文字叠加。

09

文案语气与禁用清单

• 语气 直接、交易导向且充满活力。
• 标题风格 粗体、简洁，通常使用全大写或混合大小写以示强调。
• 按钮文案 以行动为导向且高对比度（例如，深蓝色背景上的白色文字）。

• 不要使用纯白色头部——截图显示的是深蓝色/海军蓝的主导航栏。
• 不要对所有元素使用尖锐的方形角——截图显示了12px圆角和药丸形组件的混合使用。
• 不要依赖单一单色盘——截图显示了在深色和白色背景上使用充满活力的蓝色点缀色（#4e64df）。
• 不要使用衬线或手写字体——截图显示了严格的几何无衬线和人文主义无衬线层级。
• 不要在所有地方使用细的1px边框——截图使用了醒目的2px边框和厚重的阴影来营造层次感。
• 不要保持整个背景为白色——截图使用了深色主题的头部以及各种灰白色（#f4f4f5）和蓝色调（#f1f3fe）的区段。
• 避免: 过于诗意的语言
• 避免: 低调的语气
• 避免: 极简主义行话

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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