Carbon vs Material Design
カーボン / マテリアルデザイン
Carbon comes from Design Systems and Material Design from Google UI. Both are read here as style. They are reached for with some of the same intent, which is where they get confused.
Carbon
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.
Material Design
A design system that reduces the physical metaphor of paper and ink to rules of shadow and overlap. Elements are given elevation, shadow states the hierarchy, and motion carries physical cause and effect. It became the model for UI design being distributed as a system.
| Carbon | Material Design | |
|---|---|---|
| Era | 2016– | 2014– |
| Family | Design Systems | Google UI |
| Kind | Style | Style |
| 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 | Hierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing |
| Best used for | 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 | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually |
| 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. | Build the hierarchy from one type family and separate levels by weight and size. |
| Composition | 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. | Place elements on a grid of multiples of 8 and standardize the spacing. |
| 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. | Give surfaces elevation and show front and back by the density of the shadow. |
| Caution | 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. | Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. |