domains / families / design / law-of-common-region

law-of-common-region

separate

Apply the Law of Common Region — a shared container, background, or border groups elements regardless of spacing. Use when grouping must survive a tight layout. For grouping by spacing alone, use `law-of-proximity`.

When to use

• grouping elements with shared boundaries
• creating cards and panels
• separating navigation from content
• isolating task contexts in modals
• dividing logical groups in forms
• defining discrete objects like tags
• grouping when proximity is insufficient

When not to use

• grouping by spacing alone
• using cards for everything
• nested common regions deeper than two levels
• adding borders when proximity already communicates grouping

Skill page

Source