Material Design vs Solarized
マテリアルデザイン / ソラライズド
Material Design comes from Google UI and Solarized from UI Expression. They are reached for with some of the same intent, which is where they get confused.
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. The 2021 revision added colour derived from the device wallpaper, so the palette differs from one user to the next.
Solarized
.png)
Solarized is a sixteen colour scheme for terminal and GUI applications published by Ethan Schoonover with every value in the open, eight monotones and eight accents. The monotones hold symmetric CIELAB lightness differences, so moving between the light and the dark background keeps the same perceived contrast. It lowers brightness contrast on purpose and lets hue relations, not brightness, separate one token from the next.
| Material Design | Solarized | |
|---|---|---|
| Era | 2014– | 2011– |
| Family | Google UI | UI Expression |
| Kind | Style | Style |
| Cues | Hierarchy and shadow expressed by elevation / Surfaces overlapping like sheets of paper / Motion that shows cause and effect / A standardized unit of spacing | Backgrounds that are neither pure black nor pure white, one leaning teal and one leaning cream / A small lightness gap between body text and ground, softer than black on white / Eight accents at close to equal lightness, told apart by hue alone / The same accent holding the same role after the background is flipped from dark to light |
| Best used for | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually | Giving an editor or terminal one reading feel across both light and dark backgrounds · Separating elements on a screen someone stares at for hours, without raising contrast |
| Type | Build the hierarchy from one type family and separate levels by weight and size. | One monospaced face, carrying emphasis in colour rather than in weight or slant. |
| Composition | Place elements on a grid of multiples of 8 and standardize the spacing. | Divide regions by shifting the ground one step instead of drawing rules, and leave the ground generous. |
| Material | Give surfaces elevation and show front and back by the density of the shadow. | Hold to the eight monotones and eight accents, anchoring the ends at #002b36 and #fdf6e3 and taking body text from the middle greys. |
| Caution | Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. | Borrowing only the backgrounds and inventing your own accents breaks the matched CIELAB lightness, and the scheme loses the very mechanism that lets hue do the separating. |