Crie uma interface de pesquisa em que os números se alinham, as cores dos recursos mantêm seu significado e a tipografia permanece legível. Explore as constantes do MDS, a adoção do Vue 3, a transição do Morningstar Intrinsic e um caderno fictício de alocação com opções de ordenação.
Interpretação nativa e offline de HTML, com cores de alocação históricas do MDS citadas e fonte do sistema. Sem runtime Vue do MDS, classificações proprietárias ou dados de investimento em tempo real. · Referência de implementação
02
Referência de design sistema de design Morningstar
Adoção atual do Vue 3 e orientações do Intrinsic de 2025, com referências a constantes públicas explicitamente identificadas por versão. Os valores numéricos antigos da v2.37 são apenas referências históricas, não afirmações sobre o pacote atual do Vue 3. O exemplo usa as cores históricas de gráficos citadas e seu próprio layout de aplicação.
Sistema de design Morningstar Um caderno de pesquisa baseado em números comparáveis
As tabelas apresentam os valores exatos
O exemplo original mostra dois modelos fictícios de alocação, uma barra empilhada e uma tabela com valores exatos. A faixa visual explica a composição relativa; a tabela continua sendo a referência para a leitura. Cada modelo totaliza 100%, e o modelo selecionado é identificado tanto no título quanto na legenda da tabela.
A ordenação altera a ordem das linhas sem mudar o denominador nem as cores das classes de ativos. O leitor pode passar de uma visão geral da alocação ao percentual exato sem interpretar um ícone proprietário de classificação. Esta é uma interação de pesquisa concreta, não um produto ou recomendação inventados da Morningstar.
Sistema de design Morningstar As constantes têm funções definidas e limites de versão
Não transforme todo tom de cinza em um token de texto
O MDS diferencia constantes baseadas em função de cores genéricas. O guia de engenharia separa especificamente uma cor de texto de um tom neutro genérico quando o mesmo valor visual é necessário para um elemento não textual. O exemplo Sass fornecido usa a função de leitura para o texto e um tom neutro genérico para uma linha personalizada da tabela.
As tabelas de referência mantêm os limites entre versões: constants 3.3.0 oferece suporte aos valores de texto citados, enquanto o arquivo público da v2.37 contém os valores históricos de alocação e espaçamento. Eles são úteis para ler uma interface existente, mas não comprovam que todas as constantes atuais do Vue 3 tenham a mesma resolução. Inspecione o pacote instalado e autorizado antes de tratar um número arquivado como requisito atual de design.
Sistema de design Morningstar O Morningstar Intrinsic altera a base de implementação
Duas famílias de pesos, atualizações coordenadas de componentes
O anúncio do Intrinsic de 2025 associa os nomes antigos thin, light e regular à fonte regular, e bold e heavy à fonte bold. Atualizar apenas a declaração de font-family não reproduz essa migração: o anúncio pede atualizações de componentes, incluindo os pacotes de fonte e tipografia.
O monólito antigo morningstar-design-system e o Morningstar Base Charts não recebem atualizações do Intrinsic. Novos exemplos não devem combinar esses caminhos de instalação arquivados com as instruções atuais do Vue 3. O caderno offline usa uma fonte substituta do sistema e não inclui arquivos de fontes proprietárias.
Sistema de design Morningstar Componha os recursos da tabela explicitamente
Seleção, cabeçalhos aninhados e paginação são responsabilidades distintas
O MDS oferece elementos de tabela para composição, sem obrigar que todas as operações de dados sejam reunidas em uma grade opaca. Os padrões documentados incluem números de linha, slots para cabeçalhos aninhados, seleção múltipla e paginação. A aplicação continua responsável pela transformação dos dados e pelo estado de seleção.
O exemplo funcional fornecido usa intencionalmente uma tabela nativa com estilos baseados em constantes. A referência documentada de composição do MDS continua sendo útil ao migrar para a família de componentes nativos: uma seleção parcial deve aparecer no estado indeterminado do cabeçalho, e cada caixa de seleção de linha precisa de um rótulo de seleção múltipla que identifique a linha.
Mantenha os valores percentuais como números até formatá-los para exibição; não ordene strings formatadas.
Alinhe à direita os cabeçalhos numéricos, assim como as células correspondentes.
Preserve o rótulo do ativo ao ordenar; as posições dos índices não são identificadores estáveis de registros.
Sistema de design Morningstar As cores dos ativos não são decoração genérica
Mantenha um significado fixo e uma leitura equivalente em texto
A paleta histórica de alocação diferencia ações, renda fixa, caixa, alternativas e ativos não classificados. No exemplo, as três cores relevantes dos ativos permanecem associadas às respectivas classes quando o modelo ou a ordem das linhas muda. As cores não se alternam conforme o segmento que aparece primeiro.
Uma tabela textual repete todos os valores, então o usuário não precisa diferenciar azul, laranja e verde para entender o modelo. O exemplo evita imagens de estrelas, medalhas ou style boxes da Morningstar: a referência oficial de ícones reserva os ícones de propriedade intelectual para seus significados estabelecidos.
Sistema de design Morningstar Separe a escala histórica do layout da aplicação
Uma área de leitura compacta sem colunas ocultas
O arquivo documenta um intervalo-base de espaçamento de 8 pixels, com incrementos de um quarto e de metade desse valor. O exemplo usa uma sequência contida de 8/16/24/32, inspirada nessa referência histórica. A largura total, a altura das barras empilhadas e o limite para dispositivos móveis são escolhas originais da aplicação, não constantes oficiais inventadas.
A tabela tem apenas três colunas: classe de ativo, percentual e barra comparativa. Em telas estreitas, a barra comparativa em miniatura é removida, enquanto o ativo e o percentual exato permanecem. O seletor de modelo fica acima dos dados e seu rótulo continua visível; não há filtro representado apenas por um ícone sem rótulo.
Sistema de design Morningstar Adote a geração atual do pacote dentro dos limites de acesso
Configure os ativos reais antes de estilizar um produto
Equipes autorizadas podem usar o registro interno documentado, o sufixo do pacote para Vue 3 e a configuração do Sass. CSS Os módulos isolam os estilos dos componentes, permitindo que diferentes versões coexistam; o exemplo usa um namespace específico do produto. Os ativos de fontes hospedados devem ser configurados antes dos estilos que os utilizam.
A prévia pública não exige nenhum desses acessos. É uma demonstração HTML completa e independente da interação de alocação, com cores históricas respaldadas por fontes e uma alternativa explícita de fonte do sistema. O exemplo separado para Vue é um caminho concreto de adoção baseado em constantes, não uma afirmação de que esta página pode conceder acesso ao registro ou às fontes.
Confirme o acesso aprovado ao registro interno e às fontes e, em seguida, crie a configuração de projeto isolada mostrada acima.
Compile o arquivo de entrada do Sass antes do componente da aplicação e monte o exemplo completo de App.vue.
Alterne o modelo de alocação na prévia, ordene nos dois sentidos e verifique se os rótulos, os valores e o total continuam sincronizados.
Sistema de design Morningstar Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação nativa e offline HTML que usa as cores históricas de alocação do MDS citadas e uma fonte do sistema. Não inclui o runtime Vue do MDS, classificações proprietárias nem dados de investimento em tempo 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>
Os valores de alocação são fictícios. As cores dos ativos mantêm o significado de cada categoria durante a ordenação; este documento não inclui ativos proprietários do Vue do MDS nem fontes Intrinsic.
Uma tabela completa e ordenável com denominador explícito
Uma tabela em Vue 3 usa semântica nativa e a configuração de linguagem visual do MDS apresentada acima. A ordenação preserva os valores numéricos e indica a direção.
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>
Os mixins tipográficos não definem a cor do texto.
Use constantes MCE isoladas para os elementos do gráfico, em vez de presumir que as substituições do MDS se propagam para os gráficos.
04
Sistema de design Morningstar Configuração do AI agent
Ponto de partida para implementação
Configuração de registro restrito para equipes autorizadas. O caminho da fonte deve apontar para arquivos licenciados e realmente hospedados pela aplicação. Combine com o App.vue abaixo. Esta é uma tabela nativa HTML baseada em constantes, não uma afirmação de que os pacotes MDS estão disponíveis publicamente ou de que a compilação nativa foi verificada.
terminal / 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; }
Um prompt para seu projeto
Prompt para agente de IA
Crie um caderno de pesquisa inspirado na Morningstar usando os limites de versão explícitos deste guia. Mantenha os valores exatos de alocação em uma tabela semântica e associe as cores às categorias de ativos correspondentes. Não invente classificações nem use ícones IP como decoração. Use a configuração atual de fontes, constantes e Vue 3 autorizada somente com acesso aprovado; caso contrário, identifique claramente a implementação offline.
05
Sistema de design Morningstar Fontes e escopo
Guia independente OpenDesign. Os exemplos de alocação são fictícios e não constituem aconselhamento financeiro. As constantes numéricas históricas são identificadas pela versão de origem; o acesso atual aos pacotes e às fontes continua sob controle da Morningstar.
