{"id":"carbon-design-system","no":554,"name":"Carbon Design System","ja":"Carbon Design System","era":"2015–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 29","addedAt":"2026-08-22","source":{"title":"IBM Carbon Design System — What is Carbon?","url":"https://carbondesignsystem.com/all-about-carbon/what-is-carbon/"},"reference":{"status":"verified","pageUrl":"https://carbondesignsystem.com/all-about-carbon/what-is-carbon/","credit":"IBM Carbon Design System — What is Carbon?"},"essence":"IBMのデジタル製品を、2x Grid、IBM Plex、明快な情報階層、再利用部品で統一するオープンソースのデザインシステム。企業向け画面の高い密度を保ちながら、操作・状態・データの違いを規則で読ませる。","cues":["IBM Plexと2の倍数で刻む間隔","白・灰・黒の面に青い主操作","表、タブ、サイドナビの高い情報密度","四角い部品と明確な焦点線"],"intents":["技術","信頼","静けさ"],"works":["分析・開発・運用のデータを一画面で扱う企業向け製品","複数の業務製品を同じ部品とアクセシビリティ基準へ揃えるとき"],"recipe":{"type":"IBM Plex系のサンセリフで、見出し・本文・ラベルの段階を少数に固定する。","layout":"2の倍数の間隔でサイドナビ、表、詳細ペインを組み、重要度を密度差で示す。","material":"無彩色の面を主にし、青を操作、赤・黄・緑を状態へ限定する。"},"avoid":"Carbonの部品を並べるだけでは業務の順序は生まれない。最初に判断と操作の優先順位を決める。","colors":["#F4F4F4","#0F62FE","#161616"],"motif":"ui","pair":["github-primer","swiss"],"study":["IBM Design Languageとの関係","2x Grid","Carbonのcomponentsとpatterns"],"en":{"essence":"IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible.","cues":["IBM Plex and strong type hierarchy","White or deep-gray work surfaces","Dense tables, filters and side navigation","Blue reserved for action and focus"],"works":["Enterprise software with many states and permissions","Keeping analytics, operations and forms coherent across products"],"recipe":{"type":"Use IBM Plex with compact labels and a clearly stepped hierarchy.","layout":"Anchor dense modules to a 2x grid and keep navigation, work and detail zones distinct.","material":"Build with neutral layers, fine borders and blue only for interaction."},"avoid":"Plex and blue do not make a product Carbon. Density, states and grid behavior must follow the same system.","study":["Carbon 2x grid","IBM Plex","Component status and accessibility"]},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}