The Best Mid-Sized Design Systems – Platform-Agnostic & Flexible
Design systems have become an essential part of modern digital products. While major standards like Material Design or Fluent UI dominate the market, many mid-sized companies rely on tailor-made solutions that fit their specific needs. Particularly interesting are platform-agnostic design systems, which operate independently of specific technologies or frameworks.
When it comes to design systems for mid-sized and specialized companies, there are some exciting yet often overlooked alternatives. These systems sit in the sweet spot between well-established industry standards like Material Design and smaller open-source projects, offering a unique balance of flexibility, scalability, and brand identity.
What Does Platform-Agnostic Mean?
A platform-agnostic design system can be used across different development environments without being tied to a specific frontend framework.
✅ Flexibility:
It works with React, Vue, Angular, or even Vanilla JavaScript.
✅ Future-Proof:
Technology updates or infrastructure changes won’t disrupt your design system.
✅ Seamless Integration:
Companies with diverse tech stacks can continue using their existing systems without friction.
For mid-sized companies with legacy IT structures, this approach is particularly valuable.
Here are some of the best platform-agnostic design systems built for professional, brand-specific digital solutions—ones you won’t find on every UX design blog. 😎
Porsche Design System
Developer: Porsche AG
Technology: Web Components, SCSS
Key Feature: Performance-optimized UI components
with a multi-framework, platform-agnostic approach.
Why Is It Relevant?
The Porsche Design System delivers an elegant, performance-driven UI library for premium digital experiences. Its focus on minimalist, functional design ensures seamless integration into digital ecosystems, making it an ideal choice for companies that prioritize high design consistency and brand identity.
Platform-Agnostic?
Yes! Thanks to Web Components, the Porsche Design System seamlessly integrates with React, Angular, Vue, or native web projects.
Its architecture allows effortless adoption across different frontend stacks, including:
- React (easily embedded as Custom Elements or via wrappers)
- Angular (using Angular Elements)
- Vue (as native Web Components or with Vue wrappers)
- Native Web Projects (pure HTML, CSS, and JavaScript applications without additional frameworks)
Why Is This a Game-Changer?
✅ Maximum Flexibility:
Teams can work with different technologies without having to rebuild the design system.
✅ Reusability: The same components function across all platforms, ensuring a consistent UX.
✅ Longevity & Future-Proofing: Since Web Components are a native web standard, the system remains stable and independent of framework updates.
The Porsche Design System enables scalable, consistent, and efficient development, regardless of the technological environment.
Who Is a Design System Like This For?
Companies with a strong brand identity that develop digital applications—ranging from websites and dashboards to e-commerce platforms and in-car infotainment systems.
The flexibility and centralized quality control of components make a design system highly effective, ensuring consistency, scalability, and efficiency across all digital touchpoints.
👉 Website: https://designsystem.porsche.com/
Design System for Schleswig-Holstein
Developer: IT-Verbund Schleswig-Holstein (ITVSH)
Technology: Web Components, Angular
Key Feature: Unified Design System for
Digital Administration Platforms
Why Is It Relevant?
The ITVSH Design System was created to provide a consistent and user-friendly UI for public IT systems in Schleswig-Holstein. It combines modern web design principles with accessibility, ensuring a unified user experience across various administrative platforms.
At the same time, it serves as a benchmark for digital transformation in Germany, demonstrating how public IT systems can be efficiently modernized and made accessible to all user groups.
Particularly in terms of accessibility, this design system enables future-proof digitalization, ensuring that administrative services are intuitive, inclusive, and easy to use for everyone.
Platform-Agnostic?
Yes! Thanks to Web Components, the ITVSH Design System is independent of specific frontend frameworks and can be used with React, Angular, Vue, and native web applications.
It integrates effortlessly into various technologies, including:
- React (direct embedding as Custom Elements or via wrappers)
- Angular (using Angular Elements)
- Vue (as native Web Components or with Vue wrappers)
- Native Web Applications (pure HTML, CSS, and JavaScript projects without framework dependencies)
Why Is This Beneficial?
✅ Framework Independence – Developed once, usable everywhere.
✅ Consistency Across Platforms – Unified UI design and user experience.
✅ Longevity & Maintainability – Future-proof thanks to native web technology.
✅ Seamless Integration – Easily adaptable to existing and future technologies.
By leveraging Web Components, the ITVSH Design System enables scalable, efficient, and future-proof frontend development.
Who Is a Design System Like This For?
Public administrations, e-government solutions, and digital citizen portals. Cultural institutions can also benefit from such systems, enabling them to execute projects cost-effectively while maintaining high usability and accessibility standards.
Consistency Across Public Services – A unified design language improves usability and accessibility for all users.
Cost Efficiency – Reusable components reduce development time and ensure sustainable digital infrastructure.
Future-Proof & Scalable – Adapts to evolving government needs and integrates seamlessly across different platforms.
👉 Website: https://www.design-system.sh/
Liquid Design System – Digital Consistency for Science & Pharma
Developer: Merck KGaA#
Technology: Web Components, Angular, React
Key Feature: Unified design system for
science, healthcare, and pharma.
Why Is It Relevant?
The Liquid Design System was developed by Merck to create a consistent digital identity across various applications—ranging from internal tools to customer portals. It combines scientific precision with modern UX principles, enabling efficient and scalable digital product development in the healthcare and science sectors.
Plattform-agnostisch?
Yes! Liquid is built on Web Components, making it compatible with React, Angular, Vue, and native web projects.
It seamlessly integrates into various technologies, including:
- React (directly as Custom Elements or with wrappers)
- Angular (via Angular Elements)
- Vue (as native Web Components or with Vue wrappers)
- Native Web Projects (pure HTML, CSS, and JavaScript without framework dependencies)
Why Is This a Game-Changer?
✅ Framework Independence – Developed once, usable everywhere.
✅ Consistent UX Across Platforms – Unified design and user experience.
✅ Future-Proof & Scalable – Stable and maintainable thanks to native web technology.
✅ Seamless Integration – Easily adaptable to evolving tech stacks.
By using Web Components, Merck’s Liquid Design System enables scalable, efficient, and modern frontend development across multiple platforms.
Who Is a Design System Like This For?
Companies in healthcare, life sciences, chemistry, and pharma that require a cohesive digital design language.
Liquid demonstrates how digital transformation in science and healthcare can be accelerated. Particularly in handling structured scientific data and ensuring accessibility, this design system ensures intuitive and efficient digital platform usage—a crucial foundation for the future of digital healthcare and research technologies.
👉 Website: https://liquid.merck.design/liquid/
