Carbon
カーボン / 2016– / スタイル / デザインシステム
IBM が公開し維持する設計言語で、IBM Design Language を製品で使える形に落としたもの。8pxの最小単位を2で割るか掛けるかして寸法を決める2xグリッド、IBM Plex、灰の面を層として積む配色が骨格になる。
角丸をほとんど使わない矩形の部品と、下辺にだけ線を引いた入力欄 / 白と #f4f4f4 の面が交互に積み重なり、層が上がるごとに地の明度が1段動く / 操作できる場所にだけ現れる単一の青 #0f62fe と、それ以外はほぼ無彩色という配分 / 見出しから注記まで IBM Plex 1族だけで組まれ、他の書体が混ざらない
辞書情報
- 向いている用途
- 企業向けの管理画面を、明るいテーマと暗いテーマで設計を変えずに出し分けたいとき。余白や列幅の根拠を社内で説明できる形にして、複数チームの画面を揃えたいとき
- 文字
- IBM Plex で統一し、製品画面は詰まった productive、読み物は大きい expressive と使い分ける。大きさは自分で決めず、用意された段から選ぶ。
- 構成
- 8px の最小単位を基準にする。列は1から始めて2で割り続けて決め、外側の余白も内側の余白も最小単位の整数倍にそろえる。
- 素材
- 灰の面を層として積み、層が変わるところで地の明度を1段動かす。青は操作できる場所にだけ使い、警告の色は別枠に取っておく。
- 注意
- 色を hex で直接書き込むと、明暗のテーマを切り替えたときに層の関係が崩れる。色は役割の名前で選ぶ前提で全体が組み上がっている。
- 関連研究
- Carbon の 2x Grid の解説にある mini unit の考え方 / productive と expressive という2つの型セットの使い分け / White テーマと Gray 100 テーマで層モデルがどう反転するか
関連項目
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/carbon
- Markdown
- [カーボン（Carbon） — デザインスタイル辞典](https://indexstyle.org/ja/styles/carbon)
- HTML
- <a href="https://indexstyle.org/ja/styles/carbon">カーボン（Carbon） — デザインスタイル辞典</a>