Design Principle
Boards, toolbars, counters, and button groups need predefined sizing rules.
Principle
Boards, toolbars, counters, and button groups need predefined sizing rules.
Design action
Set min/max, aspect-ratio, grid tracks, and text wrapping/truncation rules for toolbars, cards, list rows, and controls.
Examples
Positive example: Dashboards, creation tools, games, and admin lists. Counterexample: Card height changes on hover.
Apply when
Dashboards, creation tools, games, and admin lists. Dynamic text, hover states, or loading changes content.
Source notes
Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries. GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Carbon Patterns: https://carbondesignsystem.com/patterns/ Shopify Polaris: https://polaris-react.shopify.com/ Atlassian Design System: https://atlassian.design/ Design Systems Repo: https://designsystemsrepo.com/
Agent Directive
Set min/max, aspect-ratio, grid tracks, and text wrapping/truncation rules for toolbars, cards, list rows, and controls.