# Sistema di design Morningstar ## Sistema di design Morningstar Anteprima dell’interfaccia Alterna due modelli di allocazione originali e ordina le percentuali, mantenendo i colori associati alle classi di asset. ## Sistema di design Morningstar Riferimento di progettazione Indicazioni attuali per l’adozione di Vue 3 e linee guida Intrinsic del 2025, con riferimenti alle costanti pubbliche esplicitamente legati alla versione. I valori numerici legacy v2.37 sono solo riferimenti storici, non affermazioni sul pacchetto Vue 3 attuale. L’esempio usa i colori storici dei grafici citati e un layout applicativo proprio. ### Limiti dell’adozione attuale | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | UI scope | @mds | Componenti con versioni individuali. | | Chart scope | @mce | Elementi del grafico con ambito separato. | | Vue 3 packages | -vue3 suffix | Usa la generazione corrispondente della libreria. | | Registry | artifacts.morningstar.com/repository/npm-prod-group/ | È necessario l’accesso interno. | | Sass | Dart Sass / sass package | Compila gli stili dei componenti forniti. | | CSS Modules | [local]___researchNotebook | Namespace applicativo di esempio, non suffisso ufficialmente richiesto. | ### Transizione a Intrinsic | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Typeface | Morningstar Intrinsic | Gli asset approvati devono essere ottenuti separatamente. | | Weights | Regular and Bold | Famiglie di pesi attualmente supportate. | | Thin / Light / Regular | Map to Intrinsic Regular | I vecchi nomi dei pesi non implicano l’esistenza di tre nuovi file di font. | | Bold / Heavy | Map to Intrinsic Bold | Usa l’enfasi con criterio. | | Vue 3 typography | @mds/typography-vue3 | Mixin aggiornati. | | Legacy monolith / MBC | No Intrinsic updates | Non basare una nuova integrazione sul vecchio monolite. | ### Colori del testo — snapshot delle costanti 3.3.0 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $mds-text-color-primary | #1e1e1e | Testo principale su sfondi chiari. | | $mds-text-color-secondary | #5e5e5e | Testo di supporto su sfondi chiari. | | $mds-text-color-primary-on-dark | #ffffff | Testo principale su sfondi scuri. | | $mds-text-color-secondary-on-dark | #ababab | Testo di supporto su sfondi scuri. | | $mds-text-color-interactive-primary | #006fba | Testo interattivo; per i link preferisci il mixin dei link. | | $mds-text-color-error | #ca0000 | Testo di errore, distinto da un riempimento di feedback. | ### Palette storica di allocazione — v2.37 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $mds-visualization-color-asset-allocation-equity | #1f55a5 | Segmento del grafico azionario. | | $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Segmento del grafico a reddito fisso. | | $mds-visualization-color-asset-allocation-cash | #518428 | Segmento del grafico delle disponibilità liquide. | | $mds-visualization-color-asset-allocation-alternative | #a50032 | Segmento degli asset alternativi. | | $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Segmento non classificato; abbinalo a un’etichetta. | ### Spaziatura storica — v2.37 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $mds-space-quarter-x | 2px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-half-x | 4px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-1-x | 8px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-1-and-a-half-x | 12px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-2-x | 16px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-3-x | 24px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-4-x | 32px | Costante storica; verifica il pacchetto installato prima di adottarla. | | $mds-space-6-x | 48px | Costante storica; verifica il pacchetto installato prima di adottarla. | ### Controlli di composizione della tabella | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | row-numbers | Boolean on mds-table | Fornisci il numero di riga con mds-tr. | | nested-headers | Number of levels | Usa gli slot mds-thead-group-n. | | multiselection | Boolean on mds-table | Distingui gli stati di selezione completa e parziale. | | mds-thead.indeterminate | Boolean | Indica una selezione parziale. | | mds-tr.multiselection-label | Row-identifying text | Assegna un nome alla casella di selezione. | | mds-pagination-page-changed | Pagination event | L’applicazione fornisce la logica per cambiare pagina. | ## Sistema di design Morningstar Guida completa Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Morningstar Un quaderno di ricerca basato su numeri confrontabili ### Le tabelle riportano i valori esatti > L’esempio originale mostra due modelli di allocazione immaginari, una barra impilata e una tabella con i valori esatti. La fascia visiva illustra la composizione relativa; la tabella resta il riferimento autorevole per la lettura. Ogni modello totalizza il 100% e il modello selezionato è indicato sia nell’intestazione sia nella didascalia della tabella. L’ordinamento cambia l’ordine delle righe senza modificare il denominatore o i colori delle classi di asset. Chi legge può passare da una panoramica generale dell’allocazione alla percentuale esatta, senza dover interpretare un’icona di rating proprietaria. È un’interazione concreta di ricerca, non un prodotto Morningstar né una raccomandazione inventati. Leggi la specifica di supporto ## Sistema di design Morningstar Le costanti hanno ruoli definiti e limiti di versione ### Non trasformare ogni grigio in un token di testo MDS distingue le costanti basate sul ruolo dai colori generici. La guida per gli sviluppatori separa in modo esplicito un colore del testo da un neutro generico quando lo stesso valore visivo serve per un elemento non testuale. L’esempio Sass fornito usa il ruolo di lettura per il testo e un neutro generico per una regola personalizzata della tabella. Le tabelle di riferimento mantengono i limiti delle rispettive versioni: le costanti 3.3.0 supportano i valori di testo citati, mentre l’archivio pubblico v2.37 documenta i valori storici di allocazione e spaziatura. Sono riferimenti utili per leggere un’interfaccia esistente, ma non dimostrano che ogni costante attuale di Vue 3 abbia una risoluzione identica. Esamina il pacchetto installato e autorizzato prima di considerare un valore archiviato un requisito di progettazione attuale. Leggi la specifica di supporto ## Sistema di design Morningstar Morningstar Intrinsic modifica le basi dell’implementazione ### Due famiglie di pesi e aggiornamenti coordinati dei componenti L’annuncio di Intrinsic del 2025 associa i nomi precedenti thin, light e regular al font regular, e bold e heavy al font bold. Aggiornare solo la dichiarazione font-family non riproduce questa migrazione: l’annuncio prevede aggiornamenti dei componenti, inclusi i pacchetti dei font e della tipografia. Il vecchio monolite morningstar-design-system e Morningstar Base Charts non ricevono aggiornamenti Intrinsic. I nuovi esempi non dovrebbero combinare quei percorsi di installazione archiviati con le istruzioni attuali per Vue 3. Il notebook offline usa un carattere di sistema di riserva e non include file di font proprietari. Leggi la specifica di supporto ## Sistema di design Morningstar Componi esplicitamente le funzionalità della tabella ### La selezione, le intestazioni annidate e la paginazione sono responsabilità separate MDS offre elementi per comporre le tabelle, anziché costringere tutte le operazioni sui dati in un’unica griglia opaca. I pattern documentati espongono numeri di riga, slot per intestazioni annidate, selezione multipla e paginazione. La trasformazione dei dati e lo stato della selezione restano a carico dell’applicazione. L’esempio funzionante fornito usa intenzionalmente una tabella nativa con stili basati su costanti. Il riferimento documentato per la composizione MDS resta utile quando si passa alla famiglia di componenti nativi: una selezione parziale va indicata con lo stato indeterminato dell’intestazione, e ogni casella di selezione deve avere un’etichetta multiselezione che identifichi la riga. - Mantieni i valori percentuali numerici fino alla formattazione per la visualizzazione; non ordinare stringhe formattate. - Allinea a destra le intestazioni numeriche, come i relativi valori nelle celle. - Quando ordini, conserva l’etichetta dell’asset: le posizioni degli indici non sono identificatori di record stabili. Leggi la specifica di supporto ## Sistema di design Morningstar I colori degli asset non sono decorazioni generiche ### Assegna loro un significato fisso e una descrizione testuale equivalente La tavolozza storica per l’allocazione distingue azioni, obbligazioni, liquidità, investimenti alternativi e voci non classificate. Nell’esempio, i tre colori degli asset pertinenti restano associati alle rispettive classi di asset anche quando cambia il modello o l’ordine delle righe. I colori non ruotano in base al segmento che si trova per caso al primo posto. Una tabella testuale riporta ogni valore, quindi non è necessario distinguere il blu, l’arancione e il verde per comprendere il modello. L’esempio evita immagini di stelle, medaglie o style box Morningstar: il riferimento ufficiale delle icone riserva quelle di proprietà intellettuale ai significati loro assegnati. Leggi la specifica di supporto ## Sistema di design Morningstar Distingui la scala storica dal layout dell’applicazione ### Una superficie di lettura compatta, senza colonne nascoste L’archivio documenta un passo di spaziatura base di 8 pixel, con incrementi di un quarto e di metà. L’esempio adotta un ritmo contenuto di 8/16/24/32 ispirato a quel riferimento storico. La larghezza complessiva, l’altezza della barra impilata e il limite per i dispositivi mobili sono scelte originali dell’applicazione, non costanti ufficiali inventate. La tabella mantiene solo tre colonne: classe di asset, percentuale e barra di confronto. Sugli schermi stretti, la barra di confronto in miniatura viene rimossa, mentre restano l’asset e la percentuale esatta. Il selettore del modello rimane sopra i dati e la sua etichetta è sempre visibile; non c’è alcun filtro composto da un’icona senza etichetta. Leggi la specifica di supporto ## Sistema di design Morningstar Adotta la generazione attuale dei pacchetti rispettandone i limiti di accesso ### Configura gli asset effettivi prima di definire lo stile di un prodotto I team autorizzati possono usare il registry interno documentato, il suffisso del pacchetto Vue 3 e la configurazione Sass. CSS I moduli circoscrivono gli stili dei componenti, consentendo la coesistenza di versioni diverse; l’esempio usa uno spazio dei nomi specifico del prodotto. Gli asset dei font ospitati devono essere configurati prima degli stili che li utilizzano. L’anteprima pubblica non richiede nessuno di questi accessi. È una dimostrazione HTML completa e indipendente dell’interazione di allocazione, con colori storici documentati e un fallback esplicito ai font di sistema. L’esempio Vue separato mostra un percorso concreto di adozione basato su costanti; non implica che questa pagina possa fornire accesso al registry o ai font. 1. Verifica l’accesso approvato al registry interno e ai font, quindi crea la configurazione del progetto circoscritta mostrata sopra. 2. Compila il file Sass d’ingresso prima del componente dell’applicazione e monta l’esempio App.vue completo. 3. Cambia il modello di allocazione nell’anteprima, ordina in entrambe le direzioni e verifica che le etichette, i valori e il totale restino sincronizzati. Leggi la specifica di supporto ## Sistema di design Morningstar Esempi di componenti del sistema di progettazione ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione HTML nativa e offline con i colori di allocazione MDS storici citati e un font di sistema. Nessun runtime Vue di MDS, valutazione proprietaria o dato d’investimento in tempo reale. ``` Allocation notebook — MDS interpretation
RESEARCH NOTEBOOKIndependent MDS interpretation

One model. Every allocation.

Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.

No market data or investment recommendation
EquityFixed incomeCash
100PERCENT TOTAL
Balanced sample allocation
Asset classShare of model

Sorted by allocation, highest first.

Historical MDS v2.37 allocation colors; original application layout and system-font fallback. No Morningstar ratings, proprietary font assets or native Vue components are included.

``` Riferimento del codice - I valori di allocazione sono fittizi. I colori degli asset mantengono il significato della categoria anche quando si ordina; questo documento non include asset proprietari di MDS Vue né font Intrinsic. ### Una tabella ordinabile completa con denominatore esplicito Una tabella Vue 3 usa la semantica nativa e la configurazione del linguaggio visivo MDS descritta sopra. L’ordinamento mantiene i valori numerici e ne indica la direzione. ``` ``` Riferimento del codice - MDS consente ai team di adattarne le costanti e il linguaggio visivo senza usare i suoi componenti Vue. - Questo esempio non inventa intenzionalmente importazioni di MdsTable né eventi di ordinamento non documentati. - L’allocazione 55/35/10 è fittizia, totalizza 100 e non rappresenta dati di mercato. ### Distingui la scala tipografica dal livello semantico delle intestazioni Il mixin ufficiale può dare a un h1 la scala visiva del livello 2 senza modificarne il significato nel documento. ``` @use '@mds/constants-vue3' as *; @use '@mds/typography-vue3' as *; h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; } p { @include mds-body-text-m(); color:$mds-text-color-primary; } ``` Riferimento del codice - I mixin tipografici non impostano il colore del testo. - Usa costanti MCE circoscritte separatamente per gli elementi del grafico, senza presumere che le personalizzazioni MDS si applichino anche ai grafici. ## Sistema di design Morningstar Configurazione dell’agente AI ### Punto di partenza per l’implementazione Configurazione del registry riservata ai team autorizzati. Il percorso dei font deve puntare a file con licenza effettivamente ospitati dall’applicazione. Da abbinare all’App.vue qui sotto. Questa è una tabella nativa HTML basata su costanti, non una dichiarazione che i pacchetti MDS siano disponibili pubblicamente o che la compilazione nativa sia stata verificata. ``` # Authorized Morningstar teams only: project .npmrc @mds:registry=https://artifacts.morningstar.com/repository/npm-prod-group/ @mce:registry=https://artifacts.morningstar.com/repository/npm-prod-group/ # Within a Vite Vue 3 project with approved registry access pnpm add @mds/constants-vue3 @mds/typography-vue3 @mds/fonts-vue3 pnpm add -D sass // vite.config.js import {defineConfig} from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins:[vue()], css:{modules:{generateScopedName:'[local]___researchNotebook'}} }); // src/main.js import {createApp} from 'vue'; import './main.scss'; import App from './App.vue'; createApp(App).mount('#app'); // src/main.scss — host licensed font files at this application path first @use '@mds/fonts-vue3/scss/config' with ($font-path:'/fonts/morningstar-intrinsic'); @use '@mds/fonts-vue3'; @use '@mds/constants-vue3' as *; @use '@mds/typography-vue3' as *; h1 { @include mds-level-2-heading($bold:true); color:$mds-text-color-primary; } p,td,th { @include mds-body-text-m(); color:$mds-text-color-primary; } main { margin:$mds-space-4-x; } table { width:100%;border-collapse:collapse; } th,td { text-align:left; border-bottom:1px solid $mds-color-neutral-37; } .numeric { text-align:right;font-variant-numeric:tabular-nums; } button { font:inherit;cursor:pointer; } ``` ### Un prompt per il tuo progetto ``` Crea un notebook di ricerca ispirato a Morningstar, rispettando i confini di versione esplicitati in questa guida. Riporta i valori esatti dell’allocazione in una tabella semantica e mantieni i colori associati ai rispettivi significati per gli asset. Non inventare valutazioni né usare icone di proprietà intellettuale come decorazione. Usa la configurazione attuale autorizzata di Vue 3 per le costanti e i font solo con l’accesso approvato; altrimenti identifica chiaramente l’implementazione offline. ``` ## Sistema di design Morningstar Fonti e ambito Guida OpenDesign indipendente. Gli esempi di allocazione sono fittizi e non costituiscono consulenza finanziaria. Le costanti numeriche storiche sono attribuite alla versione di riferimento; l’accesso ai pacchetti e ai font attuali resta sotto il controllo di Morningstar. - Adozione di Vue 3 Registry, Sass, font, moduli e costanti. - Annuncio di Intrinsic Transizione attuale dei font ed esclusioni legacy. - Costanti storiche v2.37 Spaziatura e colori di allocazione esplicitamente storici. - Costanti del testo 3.3.0 Valori cromatici di lettura con versione indicata. - Guida alle funzionalità delle tabelle Composizione, selezione e paginazione. - Semantica delle icone Limitazioni per le icone di proprietà intellettuale e uso accessibile. - Informazioni su MDS Adozione basata su costanti, senza componenti nativi. ## Sistema di design Morningstar Risorse correlate ### Mozilla Protocol Una guida editoriale Protocol con stack di font reali, scale di spaziatura e larghezza dei contenitori, una pagina di lettura illustrata e responsiva e un esempio completo di modulo nativo CSS. ### Nord sistema di design Esamina i token del tema Therapy di Nord e i contratti dei Web Component attraverso una bozza di richiesta per una sala: ruoli cromatici reali, dimensionamento responsive dei campi, convalida esplicita e risultati preparati localmente. ### Oracle Redwood Esamina la palette effettiva, i ruoli semantici, le spaziature e i limiti di densità di Oracle JET 19 Redwood attraverso un foglio di lavoro originale, completo e modificabile per la revisione delle scorte. - [Riferimento per l’implementazione](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Fonte](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Fonte](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Fonte](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Fonte](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Fonte](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Leggi la specifica di supporto](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Leggi la specifica di supporto](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Leggi la specifica di supporto](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Leggi la specifica di supporto](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Leggi la specifica di supporto](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Riferimento del codice](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Riferimento del codice](https://designsystem.morningstar.com/getting-started/about-mds/) - [Riferimento del codice](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Adozione di Vue 3 Registry, Sass, font, moduli e costanti.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Annuncio di Intrinsic Transizione attuale dei font ed esclusioni legacy.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Costanti storiche v2.37 Spaziatura e colori di allocazione esplicitamente storici.](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Costanti del testo 3.3.0 Valori cromatici di lettura con versione indicata.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Guida alle funzionalità delle tabelle Composizione, selezione e paginazione.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Semantica delle icone Limitazioni per le icone di proprietà intellettuale e uso accessibile.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Informazioni su MDS Adozione basata su costanti, senza componenti nativi.](https://designsystem.morningstar.com/getting-started/about-mds/)