Power
适合性能汽车、健身品牌和高端发布会,纯黑画布配白色超大窄体标题与单色影像,强悍昂贵。
相关模板
查看更多 →设计语言样张
设计语言预览
Identity & Action
Primary
#FAFAFA
品牌识别、选中状态、主要数据序列与信息强调。
Secondary
#DC2626
对照序列、次级强调与辅助状态。
Action
#FAFAFA
主操作、完成信号与正向反馈。
Canvas & Surface
Canvas
#000000
深色主画布,决定页面整体对比模式。
Surface
#000000
卡片、面板、图表槽和内嵌内容区域。
Hairline
#141414
分隔线、输入边界、图表网格与结构描边。
Text
Ink
#ffffff
标题、核心指标和高强调信息。
Body
#d4d4d8
正文、说明、导航与常规界面文字。
Muted
#8a8a92
元信息、图注、时间戳与低强调标签。
字体层级
display-xl
system-ui · 60 / 700 / 1.1
Power
display-lg
system-ui · 48 / 700 / 1.15
清晰表达核心价值
display-md
system-ui · 36 / 600 / 1.2
Power 设计语言
title-md
system-ui · 20 / 600 / 1.4
组件与内容标题
body-lg
system-ui · 20 / 400 / 1.55
辅助说明连接用户目标、界面操作与可量化结果。
body-md
system-ui · 16 / 400 / 1.6
正文适合功能说明、表单帮助、状态解释和较长内容。
metric
system-ui · 30 / 700 / 1.1
98.6%
label
system-ui · 14 / 600 / 1.4
开始使用 · 查看详情 · 当前状态
间距、层级与形状
形状
标准按钮约 8px 圆角,内容卡约 8px;pill 只用于状态、筛选和紧凑标签。
层级
组件样张
button-primary
#FAFAFA 填充按钮承担主行动,文字保持可读对比。
button-secondary
#FAFAFA 描边或低透明填充用于次级操作,不与主行动竞争。
button-icon
圆形图标按钮只用于紧凑工具,关键操作仍应保留明确文字标签。
content-row
一行核心内容保持清晰标题。
元信息 · 状态 · 更新时间
布局与响应式
通用界面 场景中的内容层级与产品证据。
使用约 1200–1280px 容器组织 Power 设计语言 页面。首屏展示价值和真实产品片段,后续以功能、内容、状态及转化模块形成清晰节奏。
| 断点 | 宽度 | 关键变化 |
|---|---|---|
| 移动端 | < 640 px | 首屏与内容模块单列,主操作全宽,浮动元素回到文档流。 |
| 平板 | 640 - 1023 px | 功能和数据模块使用 2 列,导航折叠,复杂面板上下堆叠。 |
| 桌面端 | >= 1024 px | 启用完整分栏、3–4 列内容网格和产品界面主视觉。 |
使用边界
应该
- 保持 Power 设计语言 的核心关系,不把界面退化为通用卡片库。
- 主色 #FAFAFA 负责信息与选中,辅助色 #DC2626 负责对照和有限强调。
- 行动色 #FAFAFA 只用于主要操作、完成状态和明确的前进信号。
- 在 深色 画布上保持可测试的文字、边框和交互对比度。
- 图表和状态同时使用标签、线型、标记或图标,不只依赖颜色。
不要
- 不要让 #FAFAFA、#DC2626 和 #FAFAFA 同时竞争主行动。
- 不要把所有卡片、按钮和输入框统一成同一种无差别形状。
- 不要保留越界浮层、不可见焦点或小于 44px 的关键触控目标。
- 不要用装饰效果替代必要的边框与层级。
- 不要使用虚构指标、无意义徽章或装饰性数据填满页面。