Crea una interfaz de investigación donde los números se alineen, los colores de los activos mantengan su significado y la tipografía siga siendo legible. Explora las constantes de MDS, la adopción de Vue 3, la transición a Morningstar Intrinsic y un cuaderno de asignaciones ficticio que se puede ordenar.
Interpretación nativa sin conexión de HTML que usa los colores de asignación históricos citados de MDS y una fuente del sistema. Sin entorno de ejecución de MDS Vue, calificaciones patentadas ni datos de inversión en tiempo real. · Referencia de implementación
02
Referencia de diseño sistema de diseño Morningstar
Adopción actual de Vue 3 y directrices Intrinsic de 2025, con referencias a constantes públicas con versiones explícitas. Los valores numéricos heredados de v2.37 son solo una referencia histórica, no una descripción del paquete actual de Vue 3. El ejemplo usa los colores históricos de gráficos citados y su propia disposición de aplicación.
Sistema de diseño Morningstar Un cuaderno de investigación basado en cifras comparables
Las tablas contienen los valores exactos
El ejemplo original muestra dos modelos de asignación ficticios, una barra apilada y una tabla con valores exactos. La franja visual explica la composición relativa; la tabla sigue siendo la superficie de lectura de referencia. Cada modelo suma el 100 %, y el nombre del modelo seleccionado aparece tanto en el encabezado como en el título de la tabla.
La ordenación cambia el orden de las filas sin alterar el denominador ni los colores de las clases de activos. El lector puede pasar de una impresión general de la asignación al porcentaje exacto sin interpretar un icono de calificación patentado. Es una interacción de investigación concreta, no un producto ni una recomendación de Morningstar inventados.
Sistema de diseño Morningstar Las constantes tienen funciones previstas y límites de versión
No conviertas todos los grises en tokens de texto
MDS distingue las constantes basadas en funciones de los colores genéricos. La guía para ingenieros separa específicamente un color de texto de un neutro genérico cuando se necesita el mismo valor visual para un elemento que no es texto. El ejemplo Sass proporcionado usa el color correspondiente a la función de lectura para el texto y un neutro genérico para una línea personalizada de la tabla.
Las tablas de referencia conservan los límites entre versiones: constants 3.3.0 admite los valores de texto citados, mientras que el archivo público v2.37 contiene los valores históricos de asignación y espaciado. Son útiles para interpretar una interfaz existente, pero no demuestran que todas las constantes actuales de Vue 3 se resuelvan de la misma manera. Inspecciona el paquete instalado autorizado antes de tratar un valor archivado como un requisito de diseño actual.
Sistema de diseño Morningstar Morningstar Intrinsic cambia la base de implementación
Dos familias de pesos tipográficos y actualizaciones coordinadas de componentes
El anuncio de Intrinsic de 2025 equipara los nombres anteriores thin, light y regular con la fuente regular, y bold y heavy con la fuente bold. Cambiar solo la declaración font-family no reproduce esta migración: el anuncio requiere actualizar los componentes, incluidos los paquetes de fuentes y tipografía.
El monolito antiguo morningstar-design-system y Morningstar Base Charts no reciben actualizaciones de Intrinsic. Los ejemplos nuevos no deben combinar esas instrucciones de instalación archivadas con las instrucciones actuales de Vue 3. El cuaderno sin conexión usa una fuente alternativa del sistema y no incluye archivos de fuentes propietarias.
Sistema de diseño Morningstar Compón explícitamente las funciones de la tabla
La selección, los encabezados anidados y la paginación son responsabilidades independientes
MDS ofrece elementos de tabla que permiten componerla, en lugar de concentrar todas las operaciones de datos en una única cuadrícula opaca. Los patrones documentados incluyen números de fila, espacios para encabezados anidados, selección múltiple y paginación. La aplicación sigue siendo responsable de transformar los datos y gestionar el estado de selección.
El ejemplo funcional proporcionado usa intencionadamente una tabla nativa con estilos basados en constants. La referencia documentada de composición de MDS sigue siendo útil al adoptar la familia de componentes nativos: una selección parcial debe reflejarse en el estado indeterminado de la casilla del encabezado, y cada casilla de fila necesita una etiqueta multiselection-label que identifique la fila.
Mantén los porcentajes como valores numéricos hasta darles formato para mostrarlos; no ordenes cadenas con formato.
Alinea a la derecha los encabezados numéricos, igual que sus celdas.
Conserva la etiqueta del activo al ordenar; las posiciones del índice no son identificadores de registro estables.
Sistema de diseño Morningstar Los colores de los activos no son decoración genérica
Asigna un significado fijo y una lectura equivalente en texto
La paleta histórica de asignación distingue entre renta variable, renta fija, efectivo, activos alternativos y elementos sin clasificar. En el ejemplo, los tres colores de activos pertinentes siguen vinculados a sus clases de activo cuando cambia el modelo o el orden de las filas. Los colores no rotan según el segmento que aparezca primero.
La tabla de texto repite todos los valores, así que no hace falta distinguir el azul, el naranja y el verde para entender el modelo. El ejemplo evita las imágenes de estrellas, medallistas o cuadros de estilo de Morningstar: la referencia oficial de iconos reserva los iconos de propiedad intelectual para sus significados establecidos.
Sistema de diseño Morningstar Separa la escala histórica de la disposición de la aplicación
Una superficie de lectura compacta sin columnas ocultas
El archivo documenta un paso base de espaciado de 8 píxeles, con incrementos de un cuarto y de la mitad. El ejemplo utiliza un ritmo moderado de 8/16/24/32, inspirado en esa referencia histórica. El ancho total, la altura de las barras apiladas y el punto de adaptación para móviles son decisiones propias de la aplicación, no constantes oficiales inventadas.
La tabla conserva solo tres columnas: clase de activo, porcentaje y barra de comparación. En pantallas estrechas se oculta la barra de comparación en miniatura, pero se mantienen el activo y su porcentaje exacto. El selector de modelo permanece encima de los datos y su etiqueta sigue visible; no hay ningún filtro representado únicamente por un icono sin etiqueta.
Sistema de diseño Morningstar Adopta la generación actual del paquete respetando los límites de acceso
Configura los recursos reales antes de aplicar estilos al producto
Los equipos autorizados pueden usar el registro interno documentado, el sufijo del paquete de Vue 3 y la configuración de Sass. CSS Los módulos limitan el alcance de los estilos de los componentes para que puedan coexistir distintas versiones; el ejemplo usa un espacio de nombres específico del producto. Los recursos de fuentes alojados deben configurarse antes de aplicar los estilos que los utilizan.
La vista previa pública no requiere ninguno de esos accesos. Es una demostración independiente completa de HTML de la interacción de asignación, con colores históricos respaldados por fuentes y una alternativa explícita de fuente del sistema. El ejemplo independiente de Vue presenta una vía concreta de adopción basada en constants; no afirma que esta página pueda proporcionar acceso al registro o a las fuentes.
Confirma el acceso aprobado al registro interno y a las fuentes y, después, crea la configuración del proyecto con alcance específico que se muestra arriba.
Compila la entrada de Sass antes del componente de la aplicación y monta el ejemplo completo de App.vue.
Cambia el modelo de asignación en la vista previa, ordena en ambas direcciones y comprueba que las etiquetas, los valores y el total sigan sincronizados.
Sistema de diseño Morningstar Ejemplos de componentes del sistema de diseño
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación nativa sin conexión de HTML con colores históricos de asignación de MDS respaldados por fuentes y una fuente del sistema. No incluye el entorno de ejecución de MDS Vue, clasificaciones propietarias ni datos de inversión en tiempo real.
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>
Los valores de asignación son ficticios. Los colores de los activos conservan el significado de su categoría al ordenar; este documento no incluye recursos propietarios de MDS Vue ni fuentes Intrinsic.
Una tabla ordenable completa con un denominador explícito
Una tabla de Vue 3 usa semántica nativa y la configuración del lenguaje visual de MDS presentada arriba. La ordenación conserva los valores numéricos e indica la dirección.
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>
Los mixins tipográficos no establecen el color del texto.
Usa constantes MCE con alcance independiente para los elementos de los gráficos, en lugar de asumir que las sobrescrituras de MDS se propagan a ellos.
04
Sistema de diseño Morningstar Configuración del agente
Punto de partida para la implementación
Configuración del registro restringido para equipos autorizados. La ruta de las fuentes debe apuntar a archivos con licencia alojados realmente por la aplicación. Combínala con el App.vue que aparece abajo. Esta es una tabla nativa de HTML basada en constantes, no una afirmación de que los paquetes MDS estén disponibles públicamente ni de que se haya verificado la compilación nativa.
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; }
Una instrucción para tu proyecto
Instrucción para el agente
Crea un cuaderno de investigación inspirado en Morningstar usando los límites de versión explícitos de esta guía. Mantén los valores exactos de asignación en una tabla semántica y asigna los colores según el significado de sus recursos. No inventes calificaciones ni uses iconos de propiedad intelectual como decoración. Usa la configuración actual autorizada de Vue 3 para constantes y fuentes solo si tienes acceso aprobado; de lo contrario, identifica claramente la implementación sin conexión.
05
Sistema de diseño Morningstar Fuentes y alcance
Guía independiente de OpenDesign. Los ejemplos de asignación son ficticios y no constituyen asesoramiento financiero. Las constantes numéricas históricas están identificadas según su versión de origen; Morningstar mantiene controlado el acceso actual a los paquetes y las fuentes.
