Shape
Radius, rule weights and the three permitted shadows. The restraint here is the whole difference between a newspaper and a SaaS dashboard.
Radius
The old frontend used rounded-xl 354 times and rounded-full 289 times. Nothing in this system goes past 4px except pill, which is for tags and chips only. A test fails the build on any radius token over 4px.
--p234-radius-none | 0 | ||
--p234-radius-sm | 2px | ||
--p234-radius-md | 4px | ||
--p234-radius-pill | 999px |
Rules
Rules carry the layout. The hairline separates stories, the thick rule heads a section, the heavy rule is the masthead and the live band.
--p234-border-hairline | 1px | Default rule between stories. | |
--p234-border-thick | 2px | Section heading underline. | |
--p234-border-heavy | 4px | Masthead rule and the live band. |
The three weights in order
HTML
<hr class="p234-rule">
<hr class="p234-rule p234-rule--section">
<hr class="p234-rule p234-rule--masthead">Shadow
Three, and two of them are for things that genuinely float. An editorial page separates with rules. If a card needs a shadow to feel separate, it needed a rule.
--p234-shadow-none | none | ||
--p234-shadow-raise | 0 1px 2px rgba(26, 26, 24, 0.06) | Sticky masthead once the page scrolls. | |
--p234-shadow-overlay | 0 8px 24px rgba(26, 26, 24, 0.16) | Menus, dialogs, the search panel. |
What this rules out
- Rounded cards with a drop shadow as the default container. Use a rule and some space.
- A pill-shaped anything that is not a tag or a chip.
- A border radius chosen per component. There are four values and they cover the site.