Carbon Design System

Carbon Design System / 2015– / 风格 / 平台界面语言

IBM面向数据密集型企业产品的系统，以严格网格、IBM Plex字体和紧凑组件让复杂工作保持清晰可读。

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — AI 生成的诠释图像 1
AI 生成的诠释图像（并非参考作品）

快速判断

视觉特征

  • IBM Plex与强烈的字体层级
  • 白色或深灰工作表面
  • 密集表格、筛选器和侧边导航
  • 蓝色仅用于操作与焦点

适用场景

  • Enterprise software with many states and permissions
  • Keeping analytics, operations and forms coherent across products

使用这一风格

把简短指引带入项目，或将结构化规格交给AI工具。

design.md图像提示词JSON APIMCP与机器入口组合
在 ChatGPT 中打开在 Claude 中打开在 Google AI 中打开
详细方法与出处制作规则、真实案例、比较、研究与引用格式

辞典词条

字体
Use IBM Plex with compact labels and a clearly stepped hierarchy.
版面
Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct.
材料
Build with neutral layers, fine borders and blue only for interaction.
注意
Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system.
延伸阅读
Carbon 2x grid / IBM Plex / Component status and accessibility

相关词条

继续浏览平台界面语言

从平台界面语言中按共同感受优先推荐以下词条。

查看平台界面语言全部词条

引用此条目

这部辞典就是用来被链接的。请取用适合你写作场合的那一种形式。

Link
https://indexstyle.org/zh/styles/carbon-design-system
Markdown
[Carbon Design System — IndexStyle](https://indexstyle.org/zh/styles/carbon-design-system)
HTML
<a href="https://indexstyle.org/zh/styles/carbon-design-system">Carbon Design System — IndexStyle</a>

返回索引中的位置