Material Design vs U.S. Web Design System (USWDS)
マテリアルデザイン / 合衆国ウェブデザインシステム
Material Design comes from Google UI and U.S. Web Design System (USWDS) from Design Systems. Both are read here as style. 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.
U.S. Web Design System (USWDS)
The design language of United States federal websites, published by the General Services Administration. Color, spacing, and type size are quantized into a limited set of discrete options instead of the open range CSS allows, and the system ships Public Sans, a neutral face drawn from Libre Franklin, so that every agency site speaks in the same voice.
| Material Design | U.S. Web Design System (USWDS) | |
|---|---|---|
| Era | 2014– | 2015– |
| Family | Google UI | Design Systems |
| 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 | Body text runs large and lines wrap somewhere between 45 and 90 characters / The same two colors recur across agencies, a deep blue #005EA2 and an alert red #D83933 / Spacing never lands on an arbitrary number, only on steps of a fixed scale / Public Sans carries everything from headings to body text, wide set and free of quirks |
| Best used for | Distributing consistent behavior across several platforms · Communicating the depth of a hierarchy visually | Building sites for a public body where separate departments must not drift into separate looks · Producing an application form that has to stay readable for people you cannot choose a device or a connection for |
| Type | Build the hierarchy from one type family and separate levels by weight and size. | Public Sans throughout, body text at 16px or larger, lines held between 45 and 90 characters, line height at least 1.5 for long passages. |
| Composition | Place elements on a grid of multiples of 8 and standardize the spacing. | Every margin and measure is picked off a fixed scale; a single column is the default and the gaps between elements repeat the same steps. |
| Material | Give surfaces elevation and show front and back by the density of the shadow. | Deep blue #005EA2 leads and red #D83933 follows, with grays taken only from the fixed run between #1B1B1B and #F0F0F0, never mixed in between. |
| Caution | Do not add shadow as decoration. The moment the elevation rules break, the hierarchy is telling a lie. | Add one in between value to fill a gap in the scale and the system is gone, because every page then starts inventing measurements of its own. |