Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Morningstar.
Crea un’interfaccia di ricerca in cui i numeri siano allineati, i colori degli asset mantengano il loro significato e la tipografia resti leggibile. Esplora le costanti MDS, l’adozione di Vue 3, la transizione a Morningstar Intrinsic e un quaderno fittizio di allocazione ordinabile.
Interpretazione offline indipendente di HTML che usa i colori storici di allocazione MDS citati e un font di sistema. Nessun runtime MDS Vue, rating proprietari o dati d’investimento in tempo reale. · Riferimento per l’implementazione
02
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.
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.
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.
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.
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.
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.
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.
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.
Verifica l’accesso approvato al registry interno e ai font, quindi crea la configurazione del progetto circoscritta mostrata sopra.
Compila il file Sass d’ingresso prima del componente dell’applicazione e monta l’esempio App.vue completo.
Cambia il modello di allocazione nell’anteprima, ordina in entrambe le direzioni e verifica che le etichette, i valori e il totale restino sincronizzati.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Allocation notebook — MDS interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fff;color:#1e1e1e;font:16px/1.45 Arial,sans-serif}.app{max-width:1100px;margin:auto;padding:32px}.mast{border-bottom:2px solid #333;display:flex;justify-content:space-between;padding-bottom:16px;gap:16px}.mast b{letter-spacing:.06em}.mast span,.muted{color:#5e5e5e;font-size:13px}h1{font-size:36px;font-weight:400;line-height:1.2;margin:28px 0 10px}.intro{max-width:600px;color:#5e5e5e;margin:0 0 24px}.controls{background:#f2f2f2;display:flex;align-items:center;gap:16px;padding:16px;margin-bottom:24px}select{font:inherit;padding:8px 32px 8px 10px;background:white;border:1px solid #808080;border-radius:2px}button:focus-visible,select:focus-visible{outline:3px solid #006fba;outline-offset:3px}.chart{display:grid;grid-template-columns:1fr 90px;gap:24px;align-items:center;margin:28px 0 32px}.stack{display:flex;height:42px;overflow:hidden}.segment{min-width:0}.total{text-align:right;font-size:30px}.total small{display:block;font-size:11px;color:#5e5e5e}.legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;margin-top:12px}.legend i{display:inline-block;width:8px;height:8px;margin-right:6px}table{width:100%;border-collapse:collapse}caption{text-align:left;font-size:20px;padding-bottom:12px}th,td{padding:16px 8px;border-bottom:1px solid #e5e5e5;text-align:left;font-weight:400}thead th{border-top:2px solid #333;border-bottom:1px solid #808080;font-size:13px}.numeric{text-align:right;font-variant-numeric:tabular-nums}.sort{border:0;background:none;color:#006fba;cursor:pointer;padding:0;font:inherit;text-align:right}.spark{width:35%}.track{height:6px;background:#f2f2f2}.fill{height:6px}.status{font-size:12px;min-height:20px;color:#5e5e5e}.foot{margin-top:32px;padding-top:16px;border-top:1px solid #ccc;font-size:12px;color:#5e5e5e}@media(max-width:600px){.app{padding:20px}.mast{flex-direction:column;gap:4px}h1{font-size:30px}.controls{align-items:flex-start;flex-direction:column;gap:8px}.chart{grid-template-columns:1fr 70px;gap:12px}.spark{display:none}.numeric{width:35%}th,td{padding:16px 4px}.legend{gap:10px}}</style><main class="app"><header class="mast"><b>RESEARCH NOTEBOOK</b><span>Independent MDS interpretation</span></header><h1>One model. Every allocation.</h1><p class="intro">Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.</p><div class="controls"><label for="model">Sample model</label><select id="model"><option value="balanced">Balanced sample</option><option value="reserve">Reserve sample</option></select><span class="muted">No market data or investment recommendation</span></div><div class="chart"><div><div class="stack" id="stack" aria-hidden="true"></div><div class="legend"><span><i style="background:#1f55a5"></i>Equity</span><span><i style="background:#ef7622"></i>Fixed income</span><span><i style="background:#518428"></i>Cash</span></div></div><div class="total">100<small>PERCENT TOTAL</small></div></div><table><caption id="caption">Balanced sample allocation</caption><thead><tr><th scope="col">Asset class</th><th scope="col" id="sorthead" class="numeric" aria-sort="descending"><button class="sort" id="sort">Allocation (%) ↓</button></th><th scope="col" class="spark">Share of model</th></tr></thead><tbody id="rows"></tbody></table><p class="status" id="status" role="status">Sorted by allocation, highest first.</p><p class="foot">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.</p></main><script>const models={balanced:[55,35,10],reserve:[20,45,35]},assets=[{name:'Equity',color:'#1f55a5'},{name:'Fixed income',color:'#ef7622'},{name:'Cash',color:'#518428'}];let ascending=false;const model=document.querySelector('#model');function render(){const entries=assets.map((a,i)=>({...a,value:models[model.value][i]}));document.querySelector('#stack').innerHTML=entries.map(a=>`<div class="segment" style="width:${a.value}%;background:${a.color}"></div>`).join('');document.querySelector('#caption').textContent=model.selectedOptions[0].textContent+' allocation';document.querySelector('#rows').innerHTML=[...entries].sort((a,b)=>ascending?a.value-b.value:b.value-a.value).map(a=>`<tr><th scope="row">${a.name}</th><td class="numeric">${a.value.toFixed(1)}%</td><td class="spark"><div class="track"><div class="fill" style="width:${a.value}%;background:${a.color}"></div></div></td></tr>`).join('');document.querySelector('#sorthead').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Allocation (%) '+(ascending?'↑':'↓');document.querySelector('#status').textContent='Sorted by allocation, '+(ascending?'lowest first.':'highest first.')}model.onchange=render;document.querySelector('#sort').onclick=()=>{ascending=!ascending;render()};render();</script></html>
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.
vue
<!-- src/App.vue — native table styled with MDS constants, not MdsTable -->
<script setup>
import {computed,ref} from 'vue';
const ascending=ref(false);
const rows=[{name:'Sample Equity',allocation:55},{name:'Sample Bonds',allocation:35},{name:'Sample Cash',allocation:10}];
const sorted=computed(()=>[...rows].sort((a,b)=>ascending.value?a.allocation-b.allocation:b.allocation-a.allocation));
</script>
<template>
<main><h1>Research notebook</h1><p>Fictional allocation; not an investment recommendation.</p>
<table><caption>Sample allocation, total 100%</caption><thead><tr><th scope="col">Asset</th><th scope="col" class="numeric" :aria-sort="ascending?'ascending':'descending'"><button type="button" @click="ascending=!ascending">Allocation (%) {{ascending?'↑':'↓'}}</button></th></tr></thead>
<tbody><tr v-for="row in sorted" :key="row.name"><th scope="row">{{row.name}}</th><td class="numeric">{{row.allocation.toFixed(1)}}%</td></tr></tbody></table>
<p role="status">Sorted by allocation, {{ascending?'lowest first':'highest first'}}.</p></main>
</template>
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.
04
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.
shell / javascript / scss
# 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
Prompt per l’agente
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.
05
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.
