# Дизайн-система Morningstar

## Дизайн-система Morningstar Предпросмотр интерфейса

Переключайтесь между двумя исходными моделями распределения и сортируйте проценты — цвета при этом остаются привязаны к классам активов.

## Дизайн-система Morningstar Справочник по дизайну

Актуальные рекомендации по Vue 3 и Intrinsic за 2025 год, а также ссылки на общедоступные константы с явно указанными версиями. Числовые значения старой версии v2.37 приведены только как исторический справочник и не описывают текущий пакет Vue 3. В примере используются указанные исторические цвета диаграмм и собственная компоновка приложения.

### Границы актуального использования

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| UI scope | @mds | Версии компонентов задаются по отдельности. |
| Chart scope | @mce | Элементы диаграмм подключаются отдельно. |
| Vue 3 packages | -vue3 suffix | Используйте подходящее поколение библиотеки. |
| Registry | artifacts.morningstar.com/repository/npm-prod-group/ | Требуется внутренний доступ. |
| Sass | Dart Sass / sass package | Компилируйте переданные стили компонентов. |
| CSS Modules | [local]___researchNotebook | Пространство имён примера приложения, а не обязательный официальный суффикс. |
### Переход на Intrinsic

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Typeface | Morningstar Intrinsic | Одобренные ресурсы необходимо получить отдельно. |
| Weights | Regular and Bold | Актуальные семейства начертаний. |
| Thin / Light / Regular | Map to Intrinsic Regular | Старые названия начертаний не означают, что доступны три новых файла шрифтов. |
| Bold / Heavy | Map to Intrinsic Bold | Используйте акценты осмысленно. |
| Vue 3 typography | @mds/typography-vue3 | Обновлённые миксины. |
| Legacy monolith / MBC | No Intrinsic updates | Не основывайте новую интеграцию на старом монолитном пакете. |
### Цвета текста — снимок констант версии 3.3.0

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $mds-text-color-primary | #1e1e1e | Основной текст на светлом фоне. |
| $mds-text-color-secondary | #5e5e5e | Вспомогательный текст на светлом фоне. |
| $mds-text-color-primary-on-dark | #ffffff | Основной текст на тёмном фоне. |
| $mds-text-color-secondary-on-dark | #ababab | Вспомогательный текст на тёмном фоне. |
| $mds-text-color-interactive-primary | #006fba | Интерактивный текст; для ссылок предпочтителен миксин link. |
| $mds-text-color-error | #ca0000 | Текст ошибки, не связанный с заливкой обратной связи. |
### Историческая палитра распределения — v2.37

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $mds-visualization-color-asset-allocation-equity | #1f55a5 | Сегмент диаграммы для акций. |
| $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Сегмент диаграммы для облигаций. |
| $mds-visualization-color-asset-allocation-cash | #518428 | Сегмент диаграммы для денежных средств. |
| $mds-visualization-color-asset-allocation-alternative | #a50032 | Сегмент для альтернативных активов. |
| $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Сегмент для неклассифицированных активов; добавьте подпись. |
### Исторические интервалы — v2.37

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| $mds-space-quarter-x | 2px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-half-x | 4px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-1-x | 8px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-1-and-a-half-x | 12px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-2-x | 16px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-3-x | 24px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-4-x | 32px | Историческая константа; перед использованием проверьте установленный пакет. |
| $mds-space-6-x | 48px | Историческая константа; перед использованием проверьте установленный пакет. |
### Элементы управления компоновкой таблицы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| row-numbers | Boolean on mds-table | Укажите номер строки в mds-tr. |
| nested-headers | Number of levels | Используйте слоты mds-thead-group-n. |
| multiselection | Boolean on mds-table | Разделяйте состояния полного и частичного выбора. |
| mds-thead.indeterminate | Boolean | Обозначает частичный выбор. |
| mds-tr.multiselection-label | Row-identifying text | Задаёт подпись флажка выбора. |
| mds-pagination-page-changed | Pagination event | Логика смены страницы реализуется в приложении. |
## Дизайн-система Morningstar Полное руководство

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система 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 — конкретный способ внедрения на основе констант, а не утверждение, что эта страница предоставляет доступ к реестру или шрифтам.

1. Подтвердите доступ к одобренным внутреннему реестру и шрифтам, затем создайте показанную выше конфигурацию проекта с ограниченной областью действия.

2. Скомпилируйте Sass-файл точки входа перед компонентом приложения и подключите полный пример App.vue.

3. Переключите модель распределения в демонстрации, отсортируйте данные в обоих направлениях и проверьте, что подписи, значения и итог остаются согласованными.

Прочитать вспомогательную спецификацию

## Дизайн-система Morningstar Примеры компонентов дизайн-системы

### Полноценный автономный интерактивный пример

Сохраните документ целиком как index.html и откройте в браузере. Автономная нативная интерпретация HTML с историческими цветами распределения MDS, для которых приведены источники, и системным шрифтом. Без среды выполнения MDS Vue, проприетарных рейтингов и актуальных инвестиционных данных.

```
<!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. Сортировка сохраняет числовые значения и сообщает направление.

```
<!-- 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>
```

Справочник по коду

- MDS позволяет командам адаптировать константы и визуальный язык без компонентов Vue.

- В этом примере намеренно не выдуманы импорты MdsTable или недокументированные события сортировки.

- Распределение 55/35/10 вымышленное, в сумме составляет 100 и не является рыночными данными.

### Отделяйте типографическую шкалу от семантического уровня заголовка

Официальный миксин может задать для h1 визуальный размер уровня 2, не меняя его смысла в документе.

```
@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; }
```

Справочник по коду

- Типографические миксины не задают цвет текста.

- Используйте отдельно ограниченные константы MCE для элементов диаграммы; не предполагайте, что переопределения MDS распространяются на диаграммы.

## Дизайн-система Morningstar Настройка AI-агента

### Отправная точка для реализации

Настройка ограниченного реестра для уполномоченных команд. Путь к шрифтам должен указывать на лицензированные файлы, действительно размещённые приложением. Используйте вместе с приведённым ниже App.vue. Это нативная таблица HTML на основе констант, а не утверждение о публичной доступности пакетов MDS или о том, что нативная компиляция проверена.

```
# 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; }
```

### Запрос для вашего проекта

```
Создайте блокнот для исследований в стиле Morningstar, соблюдая явно указанные в руководстве границы версий. Храните точные значения распределения в семантической таблице и закрепите цвета за значениями соответствующих активов. Не выдумывайте рейтинги и не используйте значки интеллектуальной собственности как декор. Используйте актуальную конфигурацию Vue 3 с константами и шрифтами только при наличии одобренного доступа; в противном случае ясно обозначьте автономную реализацию.
```

## Дизайн-система Morningstar Источники и область действия

Независимое руководство OpenDesign. Примеры распределения вымышлены и не являются финансовой рекомендацией. Исторические числовые константы снабжены указанием версии источника; доступ к актуальным пакетам и шрифтам по-прежнему контролируется Morningstar.

- Внедрение Vue 3 Реестр, Sass, шрифты, модули и константы.

- Объявление Intrinsic Переход на актуальные шрифты и исключения для устаревших версий.

- Исторические константы v2.37 Явно обозначенные исторические интервалы и цвета распределения.

- Текстовые константы 3.3.0 Версионируемые значения цветов для текста.

- Руководство по возможностям таблиц Составная компоновка, выбор и пагинация.

- Семантика значков Ограничения на значки интеллектуальной собственности и доступное использование.

- О MDS Внедрение на основе констант без нативных компонентов.

## Дизайн-система Morningstar Связанные ресурсы

### Mozilla Protocol

Редакционное руководство по Protocol с настоящими гарнитурами, шкалами отступов и ширины контейнера, адаптивной иллюстрированной страницей для чтения и полноценным примером формы на нативном CSS.

### Nord дизайн-система

Изучите токены темы Therapy в Nord и контракты веб-компонентов на примере черновика запроса на бронирование комнаты: реальные цветовые роли, адаптивные размеры полей, явная проверка данных и локально подготовленные результаты.

### Oracle Redwood

Изучите реальную палитру, семантические роли, отступы и границы плотности Oracle JET 19 Redwood на примере полноценного оригинального редактируемого листа проверки запасов.


- [Справочник по реализации](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Источник](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Источник](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Источник](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [Источник](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Источник](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Прочитать вспомогательную спецификацию](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Прочитать вспомогательную спецификацию](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Прочитать вспомогательную спецификацию](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Прочитать вспомогательную спецификацию](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [Прочитать вспомогательную спецификацию](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Справочник по коду](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Справочник по коду](https://designsystem.morningstar.com/getting-started/about-mds/)
- [Справочник по коду](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Внедрение Vue 3 Реестр, Sass, шрифты, модули и константы.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Объявление Intrinsic Переход на актуальные шрифты и исключения для устаревших версий.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Исторические константы v2.37 Явно обозначенные исторические интервалы и цвета распределения.](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Текстовые константы 3.3.0 Версионируемые значения цветов для текста.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [Руководство по возможностям таблиц Составная компоновка, выбор и пагинация.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Семантика значков Ограничения на значки интеллектуальной собственности и доступное использование.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [О MDS Внедрение на основе констант без нативных компонентов.](https://designsystem.morningstar.com/getting-started/about-mds/)