2481Building permit2477Parking permit2469Change of residence

Sent on 12 November

Assigned to Luca Ferri

Luca FerriCase officer

Request 2481

Building permit

Step 2 of 4

Email me the updates

We will write to you as soon as it moves on.

Built to scaleOne system for products built in different ways, by different teams, at different speeds.

One library, every framework

Standard custom elements that work in every framework.

Compiled once, from one source, they run as they are in plain JavaScript and in any template. The React and Angular wrappers, generated from that source and released with it, add types, events and forms the way each framework expects.Web standards, nothing else

What works in a plain HTML file works in every framework.

Options are HTML attributes that take strings, numbers and booleans, not arrays, objects or callbacks that only a framework can pass. Content goes into slots and child components, events are DOM events.Adopt it a level at a time

Tokens, styles, components and wrappers: take only what you need.

Each level works on its own: a product takes what its stack, its deadlines and its users allow, and moves up when it can.Ready for AI agents

Agents work with the version you installed, not with what they remember.

The component packages ship an AGENTS.md and guides written for coding agents: how to install, the API of every component, the right and the wrong ways to use it.Accessible and adaptive

Designed for WCAG 2.x AA and for the preferences of every user.

Light and dark mode, higher contrast, reduced motion, low consumption and themes come built in: the preferences are set once on the page, and every component follows them.One source for design decisions

A decision changed once reaches every product.

Color, type, space and motion live in design tokens, published for CSS, Tailwind, SCSS, JavaScript and DTCG, for Figma as variables, and for iOS, Android and Flutter. Every product gets the changes with its next update.

The same components, wherever you buildWritten as HTML, used as they are in React and Angular: the same names, the same attributes, the same events. These are live: change the mode or the theme from the preferences, and they follow.

SurfaceStructureStructure

mds-cardAnna ContiContent designer

Forms that forgiveKeep what people typed, say what went wrong and how to fix it, right next to the field.

mds-card-headermds-card-contentmds-card-footerAnna ContiContent designer

Forms that forgiveKeep what people typed, say what went wrong and how to fix it, right next to the field.

mds-authormds-textmds-textmds-buttonAnna ContiContent designer

Forms that forgiveKeep what people typed, say what went wrong and how to fix it, right next to the field.

mds-imgAnna ContiContent designer

Forms that forgiveKeep what people typed, say what went wrong and how to fix it, right next to the field.

<mds-input-field label="Email">
  <mds-input name="email" type="email" placeholder="name@example.com"></mds-input>
</mds-input-field>
<mds-button label="Send" icon="mi/baseline/send" variant="primary"></mds-button>

<script type="module">
  document.querySelector('mds-input').addEventListener('mdsInputChange', (event) => {
    console.log(event.detail.value);
  });
</script>

import { MdsButton, MdsInput, MdsInputField } from '@maggioli-design-system/magma-react';

export function Subscribe() {
  return (
    <>
      <MdsInputField label="Email">
        <MdsInput
          name="email"
          type="email"
          placeholder="name@example.com"
          onMdsInputChange={(event) => console.log(event.detail.value)}
        />
      </MdsInputField>
      <MdsButton label="Send" icon="mi/baseline/send" variant="primary" />
    </>
  );
}

import { Component } from '@angular/core';
import { MdsButton, MdsInput, MdsInputField } from '@maggioli-design-system/magma-angular';

@Component({
  selector: 'app-subscribe',
  imports: [MdsButton, MdsInput, MdsInputField],
  template: `
    <mds-input-field label="Email">
      <mds-input
        name="email"
        type="email"
        placeholder="name@example.com"
        (mdsInputChange)="onChange($event)"
      ></mds-input>
    </mds-input-field>
    <mds-button label="Send" icon="mi/baseline/send" variant="primary"></mds-button>
  `,
})
export class SubscribeComponent {
  onChange(event: CustomEvent) {
    console.log(event.detail.value);
  }
}

Adopt it at your paceFour levels, each built on the one before. Stop where your constraints say, move up when they change.

1. Design tokens
   design-tokens
   The design decisions as values: CSS custom properties, SCSS, JavaScript, JSON and DTCG, Figma variables, and the formats of iOS, Android and Flutter.Fits whenThe product has its own interface stack, or is not on the web.
2. Styles
   styles
   The tokens as a Tailwind 4 theme and utilities, with the base styles, the fonts, dark mode, contrast and themes.Fits whenYou write your own markup and want it to look and behave like Magma.
3. Web components
   magmasvg-icons
   114 components as custom elements: load them all, or import only the ones a page uses. Icons by name.Fits whenPlain HTML, server-rendered templates, a CMS, micro-frontends: any page in a browser.
4. Framework wrappers
   magma-reactmagma-angular
   The same components as React components and Angular standalone components, with types, events and form bindings, and server rendering for React.Fits whenThe product is a React or an Angular app.

Made to work with AI agentsAgents build with Magma the way your team does: from the guides of the version you installed. Install the package, then ask.

Prompt

Read node_modules/@maggioli-design-system/magma/AGENTS.md and follow it to install Magma into this project.

Prompt

Read node_modules/@maggioli-design-system/magma-react/AGENTS.md and follow it to install Magma into this project.

Prompt

Read node_modules/@maggioli-design-system/magma-angular/AGENTS.md and follow it to install Magma into this project.

Explore the documentationFrom the decisions behind Magma to the code of every component.

FoundationThe decisions Magma is built on, before any component - principles, accessibility, color, type, illustration and the way products speak.TokensThe global tokens of Magma by tier, which one to use, where their data comes from and how to get them in your editor.IconsHow Magma names and uses its icons, and the packages they come from - three sets to search and copy, and the legacy icons package.ComponentsHow to start using the web components of Magma in Vanilla JS, React and Angular, and the list of all of them, generated from the installed package.Building blocksThe parts of a screen that come back again and again - the header of a page, a bar of filters, an empty state - made of Magma components, with their structure and their layout.PatternsWhole screens built with Magma components - lists, details, forms - with their behavior, their accessibility and the code for HTML, React and Angular.Brand assetsThe logos, symbols, avatars and illustrations of the Maggioli Group, to download in SVG, PDF, PNG and WebP or to install with npm.DevelopmentInstalling and using Magma in Vanilla, React and Angular projects, and the rules to follow when you build with it.CommunityWhere to ask about Magma, follow how it changes and try its components.Magma StorybookEvery component in action: its variants and states, its props in the controls, its events and its accessibility checks.