Kristóf Poduszló

More design systems should use utilities over style components. 🚫 <Box as="section" bg="red-400"> <Text font="body-xl"> <HeadlessButton as={Box} bg="blue-400" /> ✅ <section className="bg-red-400"> <span className="font-body-xl"> <HeadlessButton className="bg-blue-400" /> This might look slightly longer, but gives you flexibility to apply styles to any component or element, with no need for polymorphism (which might not even be supported on every component). You can also create utility functions that apply multiple properties, and give you autocomplete, type checking, and design system constraints: <ul className={stack({density: 'spacious'})}> Separating reusable styles and reusable behavior (e.g. headless components) makes it super flexible to apply the design system anywhere you need to. This makes it extensible to new use cases with much less complexity.