# Sistema de design Morningstar ## Prévia da interface sistema de design Morningstar Alterne entre dois modelos de alocação originais e ordene as porcentagens, mantendo as cores associadas às classes de ativos. ## 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. ### Limites da adoção atual | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | UI scope | @mds | Componentes com versões individuais. | | Chart scope | @mce | Elementos de gráfico com escopo separado. | | Vue 3 packages | -vue3 suffix | Use a geração correspondente da biblioteca. | | Registry | artifacts.morningstar.com/repository/npm-prod-group/ | É necessário ter acesso interno. | | Sass | Dart Sass / sass package | Compile os estilos de componente fornecidos. | | CSS Modules | [local]___researchNotebook | Namespace de exemplo da aplicação, não um sufixo oficial obrigatório. | ### Transição para o Intrinsic | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Typeface | Morningstar Intrinsic | Os recursos aprovados devem ser obtidos separadamente. | | Weights | Regular and Bold | Famílias de pesos compatíveis atualmente. | | Thin / Light / Regular | Map to Intrinsic Regular | Nomes antigos de pesos não indicam a existência de três novos arquivos de fonte. | | Bold / Heavy | Map to Intrinsic Bold | Use o destaque com intenção. | | Vue 3 typography | @mds/typography-vue3 | Mixins atualizados. | | Legacy monolith / MBC | No Intrinsic updates | Não baseie uma nova integração no monólito antigo. | ### Cores de texto — snapshot de constantes 3.3.0 | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $mds-text-color-primary | #1e1e1e | Texto principal em fundos claros. | | $mds-text-color-secondary | #5e5e5e | Texto de apoio em fundos claros. | | $mds-text-color-primary-on-dark | #ffffff | Texto principal em fundos escuros. | | $mds-text-color-secondary-on-dark | #ababab | Texto de apoio em fundos escuros. | | $mds-text-color-interactive-primary | #006fba | Texto interativo; para links, prefira o mixin de link. | | $mds-text-color-error | #ca0000 | Texto de erro, distinto de um preenchimento de feedback. | ### Paleta histórica de alocação — v2.37 | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $mds-visualization-color-asset-allocation-equity | #1f55a5 | Segmento de gráfico de ações. | | $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Segmento de gráfico de renda fixa. | | $mds-visualization-color-asset-allocation-cash | #518428 | Segmento de gráfico de caixa. | | $mds-visualization-color-asset-allocation-alternative | #a50032 | Segmento de ativos alternativos. | | $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Segmento não classificado; associe-o a um rótulo. | ### Espaçamento histórico — v2.37 | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | $mds-space-quarter-x | 2px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-half-x | 4px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-1-x | 8px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-1-and-a-half-x | 12px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-2-x | 16px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-3-x | 24px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-4-x | 32px | Constante histórica; confira o pacote instalado antes de adotá-la. | | $mds-space-6-x | 48px | Constante histórica; confira o pacote instalado antes de adotá-la. | ### Controles de composição da tabela | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | row-numbers | Boolean on mds-table | Forneça o número da linha em mds-tr. | | nested-headers | Number of levels | Use os slots mds-thead-group-n. | | multiselection | Boolean on mds-table | Separe os estados de seleção total e parcial. | | mds-thead.indeterminate | Boolean | Representa uma seleção parcial. | | mds-tr.multiselection-label | Row-identifying text | Identifica a caixa de seleção. | | mds-pagination-page-changed | Pagination event | A aplicação fornece a lógica de mudança de página. | ## Guia completo sistema de design Morningstar Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. 1. Confirme o acesso aprovado ao registro interno e às fontes e, em seguida, crie a configuração de projeto isolada mostrada acima. 2. Compile o arquivo de entrada do Sass antes do componente da aplicação e monte o exemplo completo de App.vue. 3. 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. Consulte a especificação de apoio ## 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. ``` 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.

``` Referência de código - 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. ``` ``` Referência de código - O MDS permite que as equipes adaptem suas constantes e linguagem visual sem usar seus componentes Vue. - Este exemplo não inventa deliberadamente imports de MdsTable nem eventos de ordenação não documentados. - A alocação 55/35/10 é fictícia, soma 100 e não representa dados de mercado. ### Separe a escala tipográfica do nível semântico do título O mixin oficial pode estilizar um h1 com escala visual de nível 2 sem alterar seu significado no 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; } ``` Referência de código - 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. ## 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. ``` # 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 ``` 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. ``` ## 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. - Adoção do Vue 3 Registro, Sass, fontes, módulos e constantes. - Anúncio da Intrinsic Transição atual de fontes e exclusões de versões legadas. - Constantes históricas v2.37 Espaçamento e cores de alocação explicitamente históricos. - Constantes de texto 3.3.0 Valores de cor para leitura identificados por versão. - Guia do recurso de tabela Composição, seleção e paginação. - Semântica dos ícones Restrições e uso acessível dos ícones IP. - Sobre o MDS Adoção baseada em constantes, sem componentes nativos. ## Sistema de design Morningstar Recursos relacionados ### Mozilla Protocol Um guia editorial do Protocol com pilhas de fontes e escalas de espaçamento e largura de contêiner reais, uma página de leitura ilustrada e responsiva e um exemplo completo de formulário nativo de CSS. ### Nord sistema de design Inspecione os tokens do tema Therapy do Nord e os contratos de Web Components por meio de um rascunho de solicitação de sala: funções de cor reais, dimensionamento responsivo de campos, validação explícita e resultados preparados localmente. ### Oracle Redwood Conheça a paleta, as funções semânticas, o espaçamento e os limites de densidade reais do Oracle JET 19 Redwood por meio de uma planilha original e completa para revisão de estoque. - [Referência de implementação](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Fonte](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Fonte](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Fonte](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Fonte](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Fonte](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consulte a especificação de apoio](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Consulte a especificação de apoio](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Consulte a especificação de apoio](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Consulte a especificação de apoio](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Consulte a especificação de apoio](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Referência de código](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Referência de código](https://designsystem.morningstar.com/getting-started/about-mds/) - [Referência de código](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Adoção do Vue 3 Registro, Sass, fontes, módulos e constantes.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Anúncio da Intrinsic Transição atual de fontes e exclusões de versões legadas.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Constantes históricas v2.37 Espaçamento e cores de alocação explicitamente históricos.](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Constantes de texto 3.3.0 Valores de cor para leitura identificados por versão.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Guia do recurso de tabela Composição, seleção e paginação.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Semântica dos ícones Restrições e uso acessível dos ícones IP.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Sobre o MDS Adoção baseada em constantes, sem componentes nativos.](https://designsystem.morningstar.com/getting-started/about-mds/)