Salta ai contenuti
Magma Design System
MagmaIl design system del Gruppo Maggioli. Web component standard che funzionano in ogni framework, decisioni di design raccolte nei token e guide che gli agenti AI leggono direttamente dal pacchetto.
Fatto per crescereUn solo sistema per prodotti costruiti in modi diversi, da team diversi, a velocità diverse.
Una libreria, ogni framework
Custom element standard che funzionano in ogni framework.
Compilati una volta sola, da un solo sorgente, funzionano così come sono in JavaScript e in qualunque template. I wrapper per React e Angular, generati da quel sorgente e rilasciati insieme, aggiungono tipi, eventi e form nel modo che ogni framework si aspetta.Solo standard web
Quello che funziona in un file HTML funziona in ogni framework.
Le opzioni sono attributi HTML che prendono stringhe, numeri e booleani, non array, oggetti o callback che solo un framework sa passare. I contenuti vanno negli slot e nei componenti figli, gli eventi sono eventi DOM.Un livello alla volta
Token, stili, componenti e wrapper: si prende solo quello che serve.
Ogni livello funziona da solo: un prodotto prende quello che il suo stack, le sue scadenze e i suoi utenti permettono, e sale quando può.Pronto per gli agenti AI
L'agente lavora con la versione che hai installato, non con quello che ricorda.
I pacchetti dei componenti contengono un AGENTS.md e guide scritte per gli agenti di sviluppo: come installare, l'API di ogni componente, i modi giusti e quelli sbagliati di usarlo.Accessibile e adattivo
Progettato per WCAG 2.x AA e per le preferenze di ogni utente.
Modalità chiara e scura, contrasto più alto, movimento ridotto, basso consumo e temi sono già inclusi: le preferenze si impostano una volta sulla pagina e ogni componente le segue.Una sola fonte per le decisioni di design
Una decisione cambiata una volta arriva a ogni prodotto.
Colori, tipografia, spazi e movimento vivono nei design token, pubblicati per CSS, Tailwind, SCSS, JavaScript e DTCG, per Figma come variabili e per iOS, Android e Flutter. Ogni prodotto riceve le modifiche con il suo prossimo aggiornamento.
Gli stessi componenti, ovunque sviluppiScritti come HTML, usati così come sono in React e Angular: gli stessi nomi, gli stessi attributi, gli stessi eventi. Sono componenti veri: cambia la modalità o il tema dalle preferenze e si adattano.
Struttura
<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);
  }
}
Adottalo al tuo ritmoQuattro livelli, ognuno costruito sul precedente. Fermati dove dicono i tuoi vincoli, sali quando cambiano.
  1. Design token
    design-tokens
    Le decisioni di design come valori: custom property CSS, SCSS, JavaScript, JSON e DTCG, variabili Figma e i formati di iOS, Android e Flutter.    Quando serveIl prodotto ha un suo stack di interfaccia, o non è sul web.
  2. Stili
    styles
    I token come tema e utility di Tailwind 4, con gli stili di base, i font, la modalità scura, il contrasto e i temi.    Quando serveScrivi il tuo markup e vuoi che abbia l'aspetto e il comportamento di Magma.
  3. Web component
    magmasvg-icons
    114 componenti come custom element: caricali tutti, o importa solo quelli che una pagina usa. Icone per nome.    Quando serveHTML semplice, template generati dal server, un CMS, micro-frontend: qualunque pagina in un browser.
  4. Wrapper per i framework
    magma-reactmagma-angular
    Gli stessi componenti come componenti React e componenti standalone Angular, con tipi, eventi e collegamento ai form, e il rendering lato server per React.    Quando serveIl prodotto è un'app React o Angular.
Fatto per lavorare con gli agenti AIGli agenti sviluppano con Magma come fa il tuo team: dalle guide della versione che hai installato. Installa il pacchetto, poi chiedi.
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.
Esplora la documentazioneDalle decisioni alla base di Magma al codice di ogni componente.
FondamentiLe decisioni su cui poggia Magma, prima di qualsiasi componente - principi, accessibilità, colore, tipografia, illustrazione e il modo in cui parlano i prodotti.TokenI token globali di Magma per livello, quale usare, da dove vengono i loro dati e come averli nell'editor.IconeCome Magma chiama e usa le sue icone, e i pacchetti da cui vengono - tre set da cercare e copiare, e il pacchetto icons legacy.ComponentiCome iniziare a usare i web component di Magma in Vanilla JS, React e Angular, e l'elenco di tutti, generato dal pacchetto installato.Building blockLe parti di una schermata che tornano di continuo - l'intestazione di una pagina, una barra di filtri, uno stato vuoto - fatte di componenti Magma, con la loro struttura e il loro layout.PatternSchermate intere costruite con i componenti Magma - liste, dettagli, form - con il loro comportamento, la loro accessibilità e il codice per HTML, React e Angular.Asset del brandI loghi, i simboli, gli avatar e le illustrazioni del Gruppo Maggioli, da scaricare in SVG, PDF, PNG e WebP o da installare con npm.SviluppoInstallare e usare Magma in progetti Vanilla, React e Angular, e le regole da seguire quando lo usi.CommunityDove fare domande su Magma, seguire come cambia e provare i suoi componenti.Storybook di MagmaOgni componente in azione: le varianti e gli stati, le props nei controlli, gli eventi e i controlli di accessibilità.
Modificato 3 giorni faVittorio VittoriDesign System Architect
Creato 2 settimane faVittorio VittoriDesign System Architect