{"id":"carbon","no":525,"name":"Carbon","ja":"カーボン","era":"2016–","family":"デザインシステム","kind":"スタイル","collection":"Dictionary expansion 26","addedAt":"2026-08-19","source":{"title":"IBM — Carbon Design System","url":"https://carbondesignsystem.com/"},"reference":{"status":"verified","pageUrl":"https://carbondesignsystem.com/","credit":"IBM — Carbon Design System"},"essence":"IBM が公開し維持する設計言語で、IBM Design Language を製品で使える形に落としたもの。8pxの最小単位を2で割るか掛けるかして寸法を決める2xグリッド、IBM Plex、灰の面を層として積む配色が骨格になる。","cues":["角丸をほとんど使わない矩形の部品と、下辺にだけ線を引いた入力欄","白と #f4f4f4 の面が交互に積み重なり、層が上がるごとに地の明度が1段動く","操作できる場所にだけ現れる単一の青 #0f62fe と、それ以外はほぼ無彩色という配分","見出しから注記まで IBM Plex 1族だけで組まれ、他の書体が混ざらない"],"intents":["信頼","技術","静けさ"],"works":["企業向けの管理画面を、明るいテーマと暗いテーマで設計を変えずに出し分けたいとき","余白や列幅の根拠を社内で説明できる形にして、複数チームの画面を揃えたいとき"],"recipe":{"type":"IBM Plex で統一し、製品画面は詰まった productive、読み物は大きい expressive と使い分ける。大きさは自分で決めず、用意された段から選ぶ。","layout":"8px の最小単位を基準にする。列は1から始めて2で割り続けて決め、外側の余白も内側の余白も最小単位の整数倍にそろえる。","material":"灰の面を層として積み、層が変わるところで地の明度を1段動かす。青は操作できる場所にだけ使い、警告の色は別枠に取っておく。"},"avoid":"色を hex で直接書き込むと、明暗のテーマを切り替えたときに層の関係が崩れる。色は役割の名前で選ぶ前提で全体が組み上がっている。","colors":["#0f62fe","#161616","#f4f4f4"],"motif":"graphic","pair":["material-design","swiss"],"study":["Carbon の 2x Grid の解説にある mini unit の考え方","productive と expressive という2つの型セットの使い分け","White テーマと Gray 100 テーマで層モデルがどう反転するか"],"en":{"essence":"IBM's openly published and maintained design system, the working form of the IBM Design Language. Its skeleton is the 2x Grid, where an eight pixel mini unit is halved or doubled to size everything, the IBM Plex typeface, and a color model that stacks neutral grays as layers with one core blue reserved for action.","cues":["Rectangular controls with almost no corner radius, and input fields ruled only along the bottom edge","White and #f4f4f4 surfaces stacked alternately, the ground shifting one step in value at every layer","A single blue, #0f62fe, appearing only where something can be acted on, everything else near neutral","One typeface family, IBM Plex, from display headings down to captions, with nothing else mixed in"],"works":["Shipping an enterprise admin screen in both a light and a dark theme without redesigning either","Giving several teams a shared and explainable basis for spacing and column widths"],"recipe":{"type":"Set everything in IBM Plex, using the tighter productive styles in product and the larger expressive styles for editorial. Pick sizes from the published steps rather than inventing them.","layout":"Base the geometry on the eight pixel mini unit. Derive columns by starting at one and halving, and keep every margin and padding a whole multiple of the unit.","material":"Stack gray surfaces as layers and shift the ground one value step wherever a layer changes. Spend the blue only on things that can be acted on, and keep alert colors separate."},"avoid":"Hard coding hex values breaks the layering the moment the theme flips between light and dark, because the whole system assumes color is chosen by role instead.","study":["Carbon の 2x Grid の解説にある mini unit の考え方","productive と expressive という2つの型セットの使い分け","White テーマと Gray 100 テーマで層モデルがどう反転するか"]}}