Design System Abstraction Layers

Spotify's design system (Encore) has evolved to offer multiple layers of abstraction (Config, Slots, Custom) to cater to diverse user needs, balancing out-of-the-box utility with customization flexibility. This approach enhances reuse, reduces static implementations, and democratizes default configurations by analyzing usage patterns. This post details a collaboration with the accessibility team to improve out-of-the-box accessibility in components and provide guidance where enforcement isn't possible. The post specifically explores the trade-offs between customization (low abstraction, direct CSS/HTML manipulation) and configuration (high abstraction, semantic parameters) for evolving design systems, emphasizing how feature and product maturity, timelines, and reusability influence the choice between these approaches. Spotify's value of team autonomy leads them to generally lean towards customization, while acknowledging configuration as another valuable tool.