Создайте исследовательский интерфейс с выровненными числами, осмысленными цветами ресурсов и удобной для чтения типографикой. Изучите константы MDS, переход на Vue 3, переход на Morningstar Intrinsic и сортируемый блокнот распределения активов на вымышленных данных.
Автономная интерпретация HTML на основе исторических цветов распределения MDS, указанных в источниках, и системного шрифта. Без среды выполнения MDS Vue, закрытых рейтинговых данных и актуальных инвестиционных данных. · Справочник по реализации
02
Дизайн-система Morningstar Справочник по дизайну
Актуальные рекомендации по Vue 3 и Intrinsic за 2025 год, а также ссылки на общедоступные константы с явно указанными версиями. Числовые значения старой версии v2.37 приведены только как исторический справочник и не описывают текущий пакет Vue 3. В примере используются указанные исторические цвета диаграмм и собственная компоновка приложения.
Дизайн-система Morningstar Исследовательский блокнот с сопоставимыми числовыми данными
Таблицы содержат точные значения
В исходном примере показаны две вымышленные модели распределения, составная полоса и таблица точных значений. Графическая полоса показывает относительную структуру, а таблица остаётся основным способом прочитать данные. Сумма в каждой модели составляет 100%; выбранная модель указана и в заголовке, и в подписи к таблице.
Сортировка меняет порядок строк, не меняя знаменатель или цвета классов активов. Читатель может перейти от общего представления о распределении к точному процентному значению, не пытаясь интерпретировать закрытый значок рейтинга. Это наглядный исследовательский сценарий, а не вымышленный продукт или рекомендация Morningstar.
Дизайн-система Morningstar У констант есть свои назначения и границы версий
Не превращайте каждый оттенок серого в токен текста
В MDS константы, привязанные к ролям, отделены от общих цветов. В руководстве для инженеров отдельно подчёркивается: если то же визуальное значение требуется для нетекстового элемента, следует использовать общий нейтральный цвет, а не цвет текста. В приведённом примере Sass для текста используется цвет, предназначенный для чтения, а для пользовательской линии таблицы — общий нейтральный цвет.
В справочных таблицах сохранены границы версий: константы 3.3.0 поддерживают указанные значения текста, а общедоступный архив v2.37 — исторические значения цветов распределения и интервалов. Они полезны для анализа существующего интерфейса, но не подтверждают, что каждая константа в актуальном Vue 3 разрешается точно так же. Прежде чем считать архивное значение текущим требованием к дизайну, проверьте установленный пакет, доступный в вашей среде.
Дизайн-система Morningstar Morningstar Intrinsic меняет базовый подход к реализации
Два семейства начертаний, согласованные обновления компонентов
В объявлении Intrinsic за 2025 год указано соответствие: старые названия thin, light и regular заменяются начертанием regular, а bold и heavy — начертанием bold. Одной смены названия гарнитуры недостаточно для такого перехода: в объявлении говорится о необходимости обновить компоненты, включая пакеты шрифтов и типографики.
Монолит старой версии morningstar-design-system и Morningstar Base Charts не получают обновлений Intrinsic. В новых примерах не следует сочетать архивные пути установки с актуальными инструкциями для Vue 3. В автономном ноутбуке используется системный шрифт-запасной вариант; проприетарные файлы шрифтов в него не встроены.
Дизайн-система Morningstar Явно задавайте составные возможности таблицы
Выбор, вложенные заголовки и пагинация — отдельные задачи
MDS предлагает элементы таблицы для составной компоновки, а не сводит все операции с данными к одной непрозрачной сетке. В описанных шаблонах предусмотрены номера строк, слоты для вложенных заголовков, множественный выбор и пагинация. Преобразование данных и состояние выбора по-прежнему остаются ответственностью приложения.
В приведённом рабочем примере намеренно используется нативная таблица со стилями на основе констант. Описанный пример составной компоновки MDS пригодится при переходе на нативные компоненты: частичный выбор обозначается неопределённым состоянием флажка в заголовке, а метка каждого флажка строки для множественного выбора должна указывать на соответствующую строку.
Оставляйте процентные значения числовыми до форматирования для отображения; не сортируйте строки с форматированными значениями.
Выровняйте числовые заголовки по правому краю, как и соответствующие ячейки.
При сортировке сохраняйте название актива; позиции в индексе не являются устойчивыми идентификаторами записей.
Дизайн-система Morningstar Цвета активов — не универсальный декор
Закрепите значение за каждым цветом и продублируйте его текстом
Историческая палитра распределения различает акции, инструменты с фиксированным доходом, денежные средства, альтернативные активы и неклассифицированные активы. В примере три относящихся к делу цвета активов остаются привязаны к своим классам независимо от изменения модели или порядка строк. Цвета не меняются в зависимости от того, какой сегмент оказался первым.
В текстовой таблице повторяется каждое значение, поэтому пользователю не нужно различать синий, оранжевый и зелёный, чтобы понять модель. В примере не используются изображения звёзд, медалистов или стилевых категорий Morningstar: в официальном справочнике значки интеллектуальной собственности предназначены только для закреплённых за ними значений.
Дизайн-система Morningstar Отделяйте историческую шкалу от компоновки приложения
Компактная область для чтения без скрытых столбцов
В архиве описан базовый шаг интервалов в 8 пикселей, а также четвертные и половинные шаги. В примере использован сдержанный ритм 8/16/24/32, вдохновлённый этой исторической рекомендацией. Общая ширина, высота составной полосы и порог для мобильной версии — оригинальные решения приложения, а не вымышленные официальные константы.
В таблице всего три столбца: класс активов, процент и полоса сравнения. На узких экранах миниатюрная полоса сравнения скрывается, а название актива и точное процентное значение остаются. Переключатель модели расположен над данными, и его подпись видна; фильтра в виде значка без подписи нет.
Дизайн-система Morningstar Используйте актуальное поколение пакета с учётом ограничений доступа
Настройте реальные ресурсы до стилизации продукта
Уполномоченные команды могут использовать описанные внутренний реестр, суффикс пакета для Vue 3 и настройку Sass. CSS Модули ограничивают область действия стилей компонентов, позволяя сосуществовать разным версиям; в примере используется пространство имён конкретного продукта. Прежде чем подключать стили, использующие шрифты, настройте размещение файлов этих шрифтов.
Для публичной демонстрации такой доступ не требуется. Это полноценный независимый пример HTML взаимодействия с распределением активов, в котором используются исторические цвета из источников и явно указан системный шрифт как запасной вариант. Отдельный пример для Vue — конкретный способ внедрения на основе констант, а не утверждение, что эта страница предоставляет доступ к реестру или шрифтам.
Подтвердите доступ к одобренным внутреннему реестру и шрифтам, затем создайте показанную выше конфигурацию проекта с ограниченной областью действия.
Скомпилируйте Sass-файл точки входа перед компонентом приложения и подключите полный пример App.vue.
Переключите модель распределения в демонстрации, отсортируйте данные в обоих направлениях и проверьте, что подписи, значения и итог остаются согласованными.
Сохраните документ целиком как index.html и откройте в браузере. Автономная нативная интерпретация HTML с историческими цветами распределения MDS, для которых приведены источники, и системным шрифтом. Без среды выполнения MDS Vue, проприетарных рейтингов и актуальных инвестиционных данных.
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>
Значения распределения вымышлены. Цвета активов сохраняют значение соответствующих категорий при сортировке; в документ не встроены проприетарные ресурсы MDS Vue или шрифты Intrinsic.
Полная таблица с сортировкой и явным знаменателем
В таблице Vue 3 используются нативная семантика и описанная выше настройка визуального языка MDS. Сортировка сохраняет числовые значения и сообщает направление.
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>
Используйте отдельно ограниченные константы MCE для элементов диаграммы; не предполагайте, что переопределения MDS распространяются на диаграммы.
04
Дизайн-система Morningstar Настройка AI-агента
Отправная точка для реализации
Настройка ограниченного реестра для уполномоченных команд. Путь к шрифтам должен указывать на лицензированные файлы, действительно размещённые приложением. Используйте вместе с приведённым ниже App.vue. Это нативная таблица HTML на основе констант, а не утверждение о публичной доступности пакетов MDS или о том, что нативная компиляция проверена.
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; }
Запрос для вашего проекта
Промпт для AI-агента
Создайте блокнот для исследований в стиле Morningstar, соблюдая явно указанные в руководстве границы версий. Храните точные значения распределения в семантической таблице и закрепите цвета за значениями соответствующих активов. Не выдумывайте рейтинги и не используйте значки интеллектуальной собственности как декор. Используйте актуальную конфигурацию Vue 3 с константами и шрифтами только при наличии одобренного доступа; в противном случае ясно обозначьте автономную реализацию.
05
Дизайн-система Morningstar Источники и область действия
Независимое руководство OpenDesign. Примеры распределения вымышлены и не являются финансовой рекомендацией. Исторические числовые константы снабжены указанием версии источника; доступ к актуальным пакетам и шрифтам по-прежнему контролируется Morningstar.
