Système de design Morningstar.

Système de design Morningstar Un carnet de recherche fondé sur des chiffres comparables

Les tableaux affichent les valeurs exactes

L’exemple d’origine présente deux modèles de répartition fictifs, une barre empilée et un tableau de valeurs exactes. La représentation visuelle explique la composition relative ; le tableau reste la référence pour consulter les données. Chaque modèle totalise 100 %, et le modèle sélectionné est indiqué dans le titre comme dans la légende du tableau.

Le tri modifie l’ordre des lignes sans changer le dénominateur ni les couleurs des classes d’actifs. Le lecteur peut passer d’une vue d’ensemble de la répartition à un pourcentage exact sans avoir à interpréter une icône de notation propriétaire. Il s’agit d’une interaction concrète de recherche, et non d’un produit ou d’une recommandation Morningstar inventés.

Consultez la spécification associée

Système de design Morningstar Les constantes ont des rôles définis et des limites de version

Ne transformez pas chaque gris en jeton de couleur du texte

MDS distingue les constantes définies par rôle des couleurs génériques. Le guide destiné aux ingénieurs distingue spécifiquement une couleur de texte d’un ton neutre générique lorsque la même valeur visuelle est nécessaire pour un élément non textuel. L’exemple Sass fourni utilise le rôle de lecture pour le texte et un ton neutre générique pour une règle de tableau personnalisée.

Les tableaux de référence conservent leurs limites de version : les constantes 3.3.0 prennent en charge les valeurs de texte citées, tandis que l’archive publique v2.37 contient les valeurs historiques de répartition et d’espacement. Elles sont utiles pour comprendre une interface existante, mais ne prouvent pas que toutes les constantes actuelles de Vue 3 produisent les mêmes résultats. Consultez le package installé autorisé avant de considérer une valeur archivée comme une exigence actuelle du design system.

Consultez la spécification associée

Système de design Morningstar Morningstar Intrinsic modifie la base de référence de l’implémentation

Deux familles de graisses, mises à jour coordonnées des composants

L’annonce Intrinsic de 2025 associe les anciens noms thin, light et regular à la police regular, et les noms bold et heavy à la police bold. Modifier uniquement la déclaration de font-family ne suffit pas à reproduire cette migration : l’annonce préconise des mises à jour des composants, notamment des packages de polices et de typographie.

L’ancien monolithe morningstar-design-system et Morningstar Base Charts ne bénéficient pas des mises à jour Intrinsic. Les nouveaux exemples ne doivent pas associer ces anciennes méthodes d’installation aux instructions actuelles pour Vue 3. Le carnet hors ligne utilise une police de remplacement système et n’intègre aucun fichier de police propriétaire.

Consultez la spécification associée

Système de design Morningstar Composez explicitement les fonctionnalités du tableau

La sélection, les en-têtes imbriqués et la pagination relèvent de responsabilités distinctes

MDS propose des éléments de tableau à composer, plutôt que d’imposer toutes les opérations sur les données dans une seule grille opaque. Les modèles documentés exposent les numéros de ligne, les emplacements d’en-têtes imbriqués, la sélection multiple et la pagination. L’application reste responsable de la transformation des données et de l’état de sélection.

L’exemple fonctionnel fourni utilise volontairement un tableau HTML natif avec des styles fondés sur les constantes. La référence documentée de composition MDS reste utile lors du passage à la famille de composants native : une sélection partielle doit être représentée par l’état indéterminé de la case à cocher d’en-tête, et chaque case de ligne doit avoir un libellé de sélection multiple qui identifie la ligne.

• Conservez les pourcentages sous forme numérique jusqu’au formatage d’affichage ; ne triez pas les chaînes formatées.
• Alignez les en-têtes numériques à droite, comme les cellules correspondantes.
• Préservez le libellé de l’actif lors du tri ; les positions dans un tableau ne sont pas des identifiants d’enregistrement stables.

Consultez la spécification associée

Système de design Morningstar Les couleurs des actifs ne sont pas de simples éléments décoratifs

Utilisez une signification fixe et une équivalence textuelle

La palette historique de répartition distingue les actions, les titres à revenu fixe, les liquidités, les actifs alternatifs et les éléments non classés. Dans l’exemple, les trois couleurs d’actifs concernées restent associées à leurs classes d’actifs, quel que soit le modèle ou l’ordre des lignes. Les couleurs ne changent pas en fonction du segment qui se trouve en première position.

Un tableau textuel reprend chaque valeur ; l’utilisateur n’a donc pas besoin de distinguer le bleu, l’orange et le vert pour comprendre le modèle. L’exemple évite les étoiles, les icônes de médaillé et les images de style box Morningstar : la référence officielle des icônes réserve les icônes de propriété intellectuelle à leurs significations établies.

Consultez la spécification associée

Système de design Morningstar Distinguez l’échelle historique de la mise en page de l’application

Une surface de lecture compacte, sans colonnes masquées

L’archive documente un espacement de base de 8 pixels, avec des pas d’un quart et d’une moitié. L’exemple adopte un rythme sobre de 8/16/24/32, inspiré de cette référence historique. La largeur totale, la hauteur de la barre empilée et le seuil mobile sont des choix propres à l’application, et non des constantes officielles inventées.

Le tableau ne comporte que trois colonnes : classe d’actifs, pourcentage et barre comparative. Sur les écrans étroits, la barre comparative miniature est supprimée, tandis que l’actif et son pourcentage exact restent visibles. Le sélecteur de modèle reste au-dessus des données et son libellé demeure visible ; aucun filtre n’est représenté par une icône seule sans libellé.

Consultez la spécification associée

Système de design Morningstar Adoptez la génération actuelle du package dans les limites d’accès prévues

Configurez les ressources réellement utilisées avant de styliser un produit

Les équipes autorisées peuvent utiliser le registre interne documenté, le suffixe de package Vue 3 et la configuration Sass. CSS Les modules isolent les styles des composants afin que différentes versions puissent coexister ; l’exemple utilise un espace de noms propre au produit. Les ressources de polices hébergées doivent être configurées avant les styles qui les utilisent.

L’aperçu public ne nécessite aucun de ces accès. Il s’agit d’une démonstration complète et autonome HTML de l’interaction d’allocation, avec des couleurs historiques étayées par des sources et une police système explicitement définie comme solution de repli. L’exemple Vue distinct propose une méthode d’adoption concrète basée sur des constantes ; il ne prétend pas que cette page puisse donner accès au registre ou aux polices.

1. Confirmez que vous disposez des accès autorisés au registre interne et aux polices, puis créez la configuration de projet isolée présentée ci-dessus.
2. Compilez le point d’entrée Sass avant le composant de l’application, puis montez l’exemple App.vue complet.
3. Changez de modèle d’allocation dans l’aperçu, triez dans les deux sens et vérifiez que les libellés, les valeurs et le total restent cohérents.

Consultez la spécification associée

Exemples de composants du système de design système de design Morningstar

<!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>

<!-- 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>

@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; }