Eight components, production-ready
Each one below is used in production today. Each one below is also the subject of at least one open disagreement between the teams who maintain it. Both things are true at once, which is itself very on-brand.
Button
The single most important interactive element in the system, and the one with the least agreement on what it should look like.
All three are correct. Design owns the shadow token. Engineering owns the border-radius token. Nobody owns the color, which is why it's different in each example above — each team pulled it from whichever Figma file (see Principle 03) they had open at the time.
Do
Use one Primary Button per screen to guide the user's next action.
Don't
Ask which of the three above is "the real one" in a shared channel. This has been tried. It did not resolve.
Text Input
Collects a single line of user input, plus whatever validation logic the team implementing it chooses to believe in this quarter.
Do
Always show inline validation errors immediately on blur, so users can correct mistakes without submitting the form.
Don't
Show inline validation errors immediately on blur, as this measurably increases perceived error rate in satisfaction surveys (see Q3 Exec Readout, slide 14). Validate on submit instead.
Both guidelines currently ship, in different products, cited from the same research.
Banner
Communicates system-level status: info, warning, error, or success.
Do
Use sparingly — no more than one banner per page, so each one retains its urgency.
Don't
Stack four banners on a single page, as demonstrated directly above this text.
Navigation
The primary way users move between sections of a product.
Deprecated in v2.0 in favor of Mega Nav. Mega Nav was deprecated in v3.1 in favor of restoring the original navigation, now called "Nav Classic" so that reverting a decision didn't have to be described as reverting a decision.
Card
A contained surface for grouping related content and actions.
Quarterly Summary
A short description of the contents of this card lives here.
The drop-shadow elevation was removed in v4.3.0 after an accessibility audit found no shadow value met contrast requirements against light backgrounds; Card now uses a 1px border instead. The component library in Figma still ships both versions. An estimated 40% of Card instances across the product still use the deprecated shadow — nobody wants to be the team that breaks the Homepage to fix a shadow.
Data Table
Displays structured, sortable data.
| Account | Status | Owner |
|---|---|---|
| Loomcrest Financial | Active | Growth |
| Cascade Mutual | Renewal due | Success |
| Greyworth Logistics | Active | Growth |
Do
Use pagination for lists over 25 items, to keep load times fast and scannable.
Don't
Note: the Home team's primary data table uses infinite scroll instead, because their PM felt pagination "reads as dated." No user has complained about either approach. Nineteen designers have complained about the inconsistency.
Tabs
Organizes related content into switchable views within the same context.
Do
Limit tab groups to five or fewer, so all options remain visible without scrolling.
Don't
Ship eleven, like the Settings page does. This has been flagged in three separate design reviews across two years. It remains open, tracked as "Future Work."
Icon
A small, standalone graphic that communicates meaning at a glance — in theory, one meaning per icon.
Three "Delete" icons, approved in three different quarters. None has been formally deprecated, because deprecating an icon requires filing a Deprecation RFC (see Governance), and no Deprecation RFC has completed the process since it launched.