精选 · 开放 · 免费
Nothing
以字体排印精确度和高对比度UI元素为核心的鲜明单色美学。
hardwareproduct
01
设计气质 DNA
极简主义技术感高端单色点阵
高精度技术蓝图或奢华工业部件
02
色彩
#000000Ink
#585A5AInk soft
#F5F5F5BG
#FFFFFFBG soft
#E5E7EBMuted
rgba(229,231,235,1)Line
高对比度单色,严格遵循中性灰度等级。
03
字体
geometric-serif · grotesque-sans · dot-matrix
- display-large
40px · 400 - display-medium
24px · 400 - body
16px · 400 - caption
11px · 400
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
标准4px基础网格
05
表面 (圆角 / 阴影 / 边线)
sm · 6px
md · 8px
lg · 12px
pill · 9999px
1px solid #E5E7EB
0px 0px 0px 1px rgba(229,231,235,1)
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
垂直和水平居中的模态框,内边距充裕。
07
动效与交互
100msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
透明度淡入/淡出 · 悬停时的细微变换
交互元素上产生透明度或细微变换变化。 · 所有可点击元素使用标准指针光标。
08
组件
- button 主要按钮:黑色填充胶囊形,白色文字。次要按钮:带1px实线下划线的文字。
- card 模态容器,带细微1px边框和胶囊形按钮。
- chip 基于文字的标签,使用标准无衬线样式。
- input 极简文本输入框,线条干净。
- hero 居中、垂直堆叠的布局,以展示型排版为主导。
09
文案语气与禁用清单
- 语气 信息明确,直接。
- 标题风格 简短、全大写的陈述。
- 按钮文案 清晰、行动导向、全大写。
- 不要使用圆角容器——截图显示的是胶囊形按钮(圆角半径:9999px)和略微圆角的模态框角(6px-8px)。
- 不要使用多种颜色——截图显示的是严格的黑白及单一种中性灰的单色调色板。
- 不要使用装饰性无衬线字体——截图显示展示部分使用几何衬线体,正文使用标准怪诞无衬线体。
- 不要使用厚重的投影——截图显示使用细微边框或非常柔和、弥散的阴影来表现层次感。
- 不要在长段落中使用居中文本——截图显示严格居中的短格式UI文案。
- 不要对主要CTA使用小写——截图显示按钮和展示文本均为全大写。
- 避免: 模糊的措辞
- 避免: 过于友好或随意的语言
- 避免: 复杂句子
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
为高端硬件品牌设计的极简、高对比度设计系统。关键颜色为纯黑(#000000)和浅中性灰(#F5F5F5)。字体排印使用几何衬线体展示,简洁怪诞无衬线体用于正文。关键禁忌:避免彩色点缀,不要使用复杂阴影,绝不对CTA使用小写。布局严格居中且单色。
en · zh-CN · zh-TW · ja · ko