[Audit 013] IBM Carbon Design System

Design Tokens · Colors

IBM Carbon 采用 10 级灰度 + 蓝色强调，数字命名系统 (10-100) 确保一致性和可扩展性。

60

70

80

50

60

Token	Value	Usage
--carbon-blue-60	#4589FF	Primary interactive
--carbon-blue-70	#0043CE	Primary hover
--carbon-green-50	#24A148	Success/positive
--carbon-red-50	#DA1E28	Error/danger
--carbon-gray-100	#161616	Dark background
--carbon-gray-10	#F4F4F4	Light background

Design Tokens · Spacing

Carbon 使用 2px 基数的spacing 系统，从 2px (01) 到 48px (09)。

/* Carbon Spacing Scale - 2x Grid */
:root {
    --carbon-spacing-01: 0.125rem;  /* 2px */
    --carbon-spacing-02: 0.25rem;   /* 4px */
    --carbon-spacing-03: 0.5rem;    /* 8px */
    --carbon-spacing-04: 0.75rem;  /* 12px */
    --carbon-spacing-05: 1rem;     /* 16px */
    --carbon-spacing-06: 1.5rem;   /* 24px */
    --carbon-spacing-07: 2rem;     /* 32px */
    --carbon-spacing-08: 2.5rem;   /* 40px */
    --carbon-spacing-09: 3rem;     /* 48px */
}
                

2px

4px

8px

16px

Design Tokens · Typography

Carbon 使用 IBM Plex 字体家族，包括 Sans、Mono、Serif。字号使用数字编码系统。

Token	Size	Line Height
--carbon-font-size-65	12px	16px
--carbon-font-size-85	14px	20px
--carbon-font-size-100	16px	24px
--carbon-font-size-125	20px	28px
--carbon-font-size-150	24px	32px
--carbon-font-size-200	32px	40px

/* Carbon Typography */
:root {
    --carbon-font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
    --carbon-font-family-mono: "IBM Plex Mono", Menlo, monospace;
}

body {
    font-family: var(--carbon-font-family);
    font-size: var(--carbon-font-size-85);
    line-height: var(--carbon-line-height-body);
}
                

Design Tokens · Motion

Carbon 定义了精细的运动时间系统，从 70ms 到 480ms。

/* Carbon Motion Tokens */
:root {
    /* Duration */
    --carbon-duration-fast-01: 70ms;
    --carbon-duration-fast-02: 110ms;
    --carbon-duration-normal: 150ms;
    --carbon-duration-slow-01: 240ms;
    --carbon-duration-slow-02: 480ms;
    
    /* Easing */
    --carbon-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
    --carbon-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);
    --carbon-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
}

/* Usage */
.carbon-component {
    transition: all var(--carbon-duration-normal) var(--carbon-easing-standard);
}
                

Design Tokens · Grid

Carbon 使用 16 列网格系统，这是 IBM 产品的特色。

/* Carbon Grid System */
:root {
    --carbon-grid-columns: 16;
    --carbon-grid-gutter: 32px;
    --carbon-grid-margin: 32px;
    
    /* Container widths */
    --carbon-container-01: 320px;  /* Small */
    --carbon-container-02: 672px;  /* Medium */
    --carbon-container-03: 1056px; /* Large */
    --carbon-container-04: 1312px; /* X-Large */
}

/* Breakpoints */
$breakpoint-sm: 320px;
$breakpoint-md: 672px;
$breakpoint-lg: 1056px;
                

Component Preview

Carbon 组件风格：直角或微圆角、无装饰、高对比度、功能性。

Tag

/* Carbon Button Styles */
.carbon-btn-primary {
    background: var(--carbon-blue-60);
    color: #FFFFFF;
    border-radius: var(--carbon-radius-md);
    padding: 8px 16px;
    font-size: var(--carbon-font-size-85);
}

.carbon-btn-primary:hover {
    background: var(--carbon-blue-70);
}

.carbon-btn-primary:focus {
    outline: 2px solid var(--carbon-focus);
    outline-offset: -2px;
}
                

Design Philosophy

IBM 价值观： Carbon 体现了 IBM 的设计哲学——精确、严谨、可量化。每个 token 都有明确的定义和用途，不是"感觉"，是"数据"。
数字命名系统： 使用 10-100 编码灰度 (gray-10 到 gray-100)，blue-60/70/80 编码蓝色深浅。这不是巧合，是刻意设计——让变量可预测、可排序。
严格无障碍： Carbon 的目标是 WCAG 2.1 AAA。每个颜色组合都经过对比度测试。这是企业级产品的法律要求，也是道德责任。
16列网格： 不同于常见的 12 列，16 列提供更灵活的布局选择。这反映了 IBM 产品的复杂性——从数据分析到企业协作。

The Formula

IBM Design = Precision × Clarity × Accessibility

IBM 设计 = 精确 × 清晰 × 无障碍

Carbon 不是为了"漂亮"，而是为了"可用"。当你的产品需要处理海量企业数据时，设计的清晰度直接决定效率。