# Sistema de diseño Morningstar ## Vista previa de la interfaz sistema de diseño Morningstar Alterna entre dos modelos de asignación originales y ordena los porcentajes sin que los colores dejen de corresponder a las clases de activos. ## 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. ### Límite de adopción actual | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | UI scope | @mds | Componentes con versiones individuales. | | Chart scope | @mce | Elementos de gráficos con ámbito independiente. | | Vue 3 packages | -vue3 suffix | Usa la generación correspondiente de la biblioteca. | | Registry | artifacts.morningstar.com/repository/npm-prod-group/ | Se requiere acceso interno. | | Sass | Dart Sass / sass package | Compila los estilos de componentes proporcionados. | | CSS Modules | [local]___researchNotebook | Espacio de nombres de ejemplo para la aplicación; no es un sufijo obligatorio oficial. | ### Transición a Intrinsic | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Typeface | Morningstar Intrinsic | Los recursos aprobados deben obtenerse por separado. | | Weights | Regular and Bold | Familias de grosores compatibles actualmente. | | Thin / Light / Regular | Map to Intrinsic Regular | Los nombres de grosores anteriores no implican que haya tres archivos de fuentes nuevos. | | Bold / Heavy | Map to Intrinsic Bold | Usa el énfasis con intención. | | Vue 3 typography | @mds/typography-vue3 | Mixins actualizados. | | Legacy monolith / MBC | No Intrinsic updates | No bases una nueva integración en el antiguo paquete monolítico. | ### Colores de texto: instantánea de constantes 3.3.0 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $mds-text-color-primary | #1e1e1e | Texto principal sobre fondos claros. | | $mds-text-color-secondary | #5e5e5e | Texto secundario sobre fondos claros. | | $mds-text-color-primary-on-dark | #ffffff | Texto principal sobre fondos oscuros. | | $mds-text-color-secondary-on-dark | #ababab | Texto secundario sobre fondos oscuros. | | $mds-text-color-interactive-primary | #006fba | Texto interactivo; para los enlaces, es preferible usar el mixin de enlaces. | | $mds-text-color-error | #ca0000 | Texto de error, distinto de un fondo de respuesta. | ### Paleta histórica de asignación: v2.37 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $mds-visualization-color-asset-allocation-equity | #1f55a5 | Segmento del gráfico de renta variable. | | $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Segmento del gráfico de renta fija. | | $mds-visualization-color-asset-allocation-cash | #518428 | Segmento del gráfico de efectivo. | | $mds-visualization-color-asset-allocation-alternative | #a50032 | Segmento de activos alternativos. | | $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Segmento sin clasificar; acompáñalo de una etiqueta. | ### Espaciado histórico: v2.37 | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | $mds-space-quarter-x | 2px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-half-x | 4px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-1-x | 8px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-1-and-a-half-x | 12px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-2-x | 16px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-3-x | 24px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-4-x | 32px | Constante histórica; verifica el paquete instalado antes de adoptarla. | | $mds-space-6-x | 48px | Constante histórica; verifica el paquete instalado antes de adoptarla. | ### Controles de composición de tablas | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | row-numbers | Boolean on mds-table | Proporciona el número de fila en mds-tr. | | nested-headers | Number of levels | Usa las ranuras mds-thead-group-n. | | multiselection | Boolean on mds-table | Separa los estados de selección total y parcial. | | mds-thead.indeterminate | Boolean | Representa la selección parcial. | | mds-tr.multiselection-label | Row-identifying text | Asigna un nombre a la casilla de selección. | | mds-pagination-page-changed | Pagination event | La aplicación proporciona la lógica para cambiar de página. | ## Guía completa sistema de diseño Morningstar Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. 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. 2. Compila la entrada de Sass antes del componente de la aplicación y monta el ejemplo completo de App.vue. 3. 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. Consulta la especificación complementaria ## 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. ``` 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.

``` Referencia de código - 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. ``` ``` Referencia de código - MDS permite que los equipos adapten sus constantes y su lenguaje visual sin usar sus componentes de Vue. - Este ejemplo evita deliberadamente inventar importaciones de MdsTable o eventos de ordenación no documentados. - La asignación 55/35/10 es ficticia, suma 100 y no representa datos del mercado. ### Separa la escala tipográfica del nivel semántico del encabezado El mixin oficial puede dar a un h1 la escala visual de nivel 2 sin cambiar su significado en el 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; } ``` Referencia de código - 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. ## 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. ``` # 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 ``` 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. ``` ## 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. - Adopción de Vue 3 Registro, Sass, fuentes, módulos y constantes. - Anuncio intrínseco Transición actual de fuentes y exclusiones heredadas. - Constantes históricas v2.37 Colores históricos de espaciado y asignación, identificados explícitamente. - Constantes de texto 3.3.0 Valores de color de lectura según la versión. - Guía de funciones de tabla Composición, selección y paginación. - Semántica de los iconos Restricciones sobre los iconos de propiedad intelectual y uso accesible. - Acerca de MDS Adopción basada en constantes sin componentes nativos. ## Sistema de diseño Morningstar Recursos relacionados ### Mozilla Protocol Una guía editorial de Protocol con pilas tipográficas, escalas de espaciado y contenedores reales, una página de lectura adaptable con ilustraciones y un ejemplo completo de formulario nativo de CSS. ### Nord sistema de diseño Examina los tokens del tema Therapy de Nord y los contratos de Web Component mediante un borrador de solicitud de sala: roles de color reales, campos de tamaño adaptable, validación explícita y resultados preparados localmente. ### Oracle Redwood Estudia la paleta real, los roles semánticos, el espaciado y los límites de densidad de Oracle JET 19 Redwood con una hoja de revisión de existencias editable y original. - [Referencia de implementación](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Fuente](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Fuente](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Fuente](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Fuente](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Fuente](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consulta la especificación complementaria](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consulta la especificación complementaria](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Consulta la especificación complementaria](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Consulta la especificación complementaria](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Consulta la especificación complementaria](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Referencia de código](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Referencia de código](https://designsystem.morningstar.com/getting-started/about-mds/) - [Referencia de código](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Adopción de Vue 3 Registro, Sass, fuentes, módulos y constantes.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Anuncio intrínseco Transición actual de fuentes y exclusiones heredadas.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Constantes históricas v2.37 Colores históricos de espaciado y asignación, identificados explícitamente.](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Constantes de texto 3.3.0 Valores de color de lectura según la versión.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Guía de funciones de tabla Composición, selección y paginación.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Semántica de los iconos Restricciones sobre los iconos de propiedad intelectual y uso accesible.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Acerca de MDS Adopción basada en constantes sin componentes nativos.](https://designsystem.morningstar.com/getting-started/about-mds/)