component-family-consistencylisted

# Component Family Consistency Every interactive component in a product — buttons, inputs, selects, checkboxes, radio buttons, pills, badges, tags, calendars, date pickers, sliders, toggles — belongs to the same visual family. They share a common design DNA. A user should be able to look at any component and feel that it belongs to the same product as every other component. When components are designed in isolation without shared tokens, the product feels assembled from parts rather than built as a whole. ## The Shared DNA Define these tokens once. Every component inherits from them. ### Border-Radius All interactive components use the same base radius token. Variations are derived, not invented. ```css --radius-base: 8px; /* buttons, inputs, selects */ --radius-sm: 4px; /* checkboxes, small badges */ --radius-lg: 12px; /* cards, modals, large panels */ --radius-full: 9999px; /* pills, tags, avatar chips */ ``` A button and an input on the same form must have the same radius. A pill is always `--radius-full`. A badge is `--radius-sm` or `--radius-full` depending on brand tone — but consistent across all badges. ### Border Style Borders across all form components and containers should use a highly restricted set of tokens. **The 2-Step Rule:** Limit border widths to at most two options (e.g., `1px` and `4px`, or `1px` and `8px`). Do not use an incremental scale like `1px, 2px, 3px, 4px...`. A limited choice makes the hierarchy clear and the produ