01
设计气质 DNA
企业技术基础设施韧性安全现代
在复杂系统中规划出清晰高效路径的结构化网格。
02
色彩
#0F62FEAccent#161616Ink#333333Ink soft#FFFFFFBG#F4F4F4BG soft#525252Mutedrgba(22, 22, 22, 1)Line高对比度中性色板搭配单一主操作蓝色。
03
字体
- display
54px · 400 - heading
42px · 400 - body
16px · 400
所有主要文本使用 IBM Plex Sans · 显示尺寸保持紧凑的负字间距 · 标题保持常规字重 (400)
04
间距
4px8px16px24px32px48px64px96px网格整体采用统一的 16px 和 24px 间距。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 80px
1px solid #161616
rgba(23, 23, 23, 0.3) 1px 0px 4px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
12列网格，预留充足留白并设置清晰的水平分区。
07
动效与交互
150msmicro
240mssmall
300msmedium
cubic-bezier(0.2, 0, 0.38, 0.9)easing
悬停时平滑的背景与颜色过渡 · 交互元素的缩放变换
背景颜色变化或文字颜色切换为主蓝色。 · 微妙的缩放变换或即时颜色反馈。
08
组件
- button 主按钮使用 #0F62FE 背景搭配白色文字；次按钮使用透明背景搭配 #0F62FE 边框和文字。
- card 卡片由纤细的 1px 边框或微妙的背景变化定义，常包含大图标。
- chip 标签组件不突出使用，多为简单的圆角 4px 输入框。
- input 输入框采用微妙的边框和 #161616 聚焦状态。
- hero 左对齐的超大标题，附带简洁段落和两个并列的行动召唤按钮。
09
文案语气与禁用清单
- 语气 专业、权威且富有前瞻性。
- 标题风格 大号、简洁的无衬线字体标题，无冗余修饰。
- 按钮文案 直接的动词指令，常辅以箭头图标。
- 避免使用多种主色——截图显示单一主导的 #0F62FE。
- 避免使用装饰性衬线字体——截图显示所有标题均使用人文无衬线字体。
- 避免使用浓重的投影——截图显示多为扁平表面或非常微妙的 box-shadow。
- 避免所有卡片都使用圆角——截图显示多为 4px 或 8px 的直角。
- 避免布局充斥密集图像——截图显示元素周围留有充足空间。
- 避免使用深色模式——截图显示主要为 #FFFFFF 浅色背景。
- 避免标题使用高字重——截图显示大文本采用常规 (400) 字重。
- 避免: 非正式俚语
- 避免: 过度装饰的图案
- 避免: 过多使用粗体字重
10
包内真实截图
11
System Prompt
IBM.com 是一个全球企业技术平台，设计风格简洁、专业且高度结构化。它采用以 #FFFFFF（背景）和 #161616（墨色）为主导的中性色板，#0F62FE 作为主要操作强调色。字体始终使用人文无衬线风格，标题采用大号、常规字间距为负值的常规字重。关键禁忌：避免使用多种强调色，绝不使用装饰性衬线字体，并保持充足留白而非密集布局。界面强调 12 列网格对齐、1px 微妙边框，以及交互组件上平滑的 cubic-bezier 过渡效果。