The components, the tokens and the icons of Magma are the result of a few decisions taken before them: who the products are for, what they must never get wrong, how they look and how they speak. This section writes those decisions down, so that a team can apply them where no component reaches, and argue with them when they no longer fit. One set of principles holds them together. Every other page is a domain of decisions: each decision says what it serves, and none adds principles of its own.

Base

PrinciplesThe four principles behind every decision of Magma - inclusive, enabling, intuitive, flexible - what each asks in practice, and which one wins when they disagree.AccessibilityThe accessibility target of Magma, what the components take care of and what is left to the product, and the decisions on contrast, keyboard, focus, preferences and text.

Design

ColorWhat color means in Magma - neutrals for the interface, an accent for actions and one for AI, four states, labels and brands for data - and the contrast ladder under all of them.TypographyWhy Magma sets text in four families, when to use each style of the scale, and the fonts to download for design tools and to serve in products.IllustrationWhen an illustration helps and when it gets in the way, where it goes in a product, and the rules for drawing or choosing one.Using iconsWhen an icon helps, which set to take it from, how to keep one icon per concept, and what to do before drawing a new one.

Content

Voice and toneHow Maggioli's products speak - the four traits of the voice, the writing decisions that follow from them, and how the tone changes from one situation to the next.Inclusive languageWords that do not leave anyone out - about disability, gender, origin and age - with the decisions specific to Italian, the language of most of Maggioli's products.