Magma Design System

A component ecosystem, guidelines and patterns to build consistent, accessible, high-quality user interfaces.

before

after

A product ecosystem

Magma was built to help Maggioli Spa bring consistency across its product suite. Not a style library, but a structured system of decisions: every component, every pattern, every token carries an explicit reason and constraint.

Agnostic, everywhere

Designed to adapt to different technologies — React, Angular, WordPress — through the flexibility and scalability of Web Components. Every component is consumable from any stack without dependencies. Angular and React wrappers are automatically generated, so every team can adopt Magma without rewriting their product.

Maggioli develops software for different markets: publishing, public administration, enterprise software. Separate teams, separate stacks, separate visual choices.

The result was products that felt unrelated to each other, development costs duplicated on already-solved problems, and inconsistent UX from project to project.

The instinctive answer would have been an external library. The right answer was something that could grow with the products and adapt to the brand identity of a complex group.

Structure

Frontend

An architecture designed for gradual adoption

The most important constraint in a company with legacy products is not technology — it's migration. A monolith demands total commitment that most teams simply cannot afford.

The right level of adoption

A team can start with Design Tokens alone as CSS custom properties, add one component at a time, without touching the rest of their product. This made adoption possible even on Angular products with years of existing code, on WordPress projects, and on new React products — all consuming the same tokens and the same components.

Mixed stacks

Single stack