Your design system has a coupling problem

I write bluntly, I value your time, it's not to everyone's taste. Less waffle more value. Let's go. Pick a popular component library, find the Button component. You'll find semantic HTML with ARIA attributes (structure), JavaScript handling focus and keyboard events (interaction), and then the skin — color values, spacing, font size, border radius, hover transitions, and variants for good measure (xl, lg, md, primary, secondary etc). That's one thing doing three jobs (structure, interactivity, skin/aesthetic). Structure — the semantic HTML and accessibility contract. What element is it? What ARIA role does it have? What does it declare to assistive technology? Interaction — the behavioural logic. Focus management, disclosure state, keyboard navigation, scroll locking (i.e modal open). Aesthetics — the visual treatment. Colors, spacing, typography, border radius, elevation. Everything that defines the look of a digital interface....the brand. These "3 pillars" are subject to constant ch