# Morningstar 设计系统

## Morningstar 设计系统 界面预览

切换两个原始配置模型并按百分比排序，同时保持颜色与资产类别的对应关系。

## Morningstar 设计系统 设计参考

采用当前 Vue 3 的方式，并参考 2025 年 Intrinsic 指南，同时明确标注公开常量的版本。旧版 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 | 更新后的 mixin。 |
| Legacy monolith / MBC | No Intrinsic updates | 新集成不要基于旧的单体软件包。 |
### 文本颜色 — constants 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 mixin。 |
| $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 示例将阅读角色用于文本，将通用中性色用于自定义表格分隔线。

参考表保留了各自的版本边界：constants 3.3.0 支持文中引用的文本值，公开的 v2.37 存档支持历史配置和间距值。这些内容有助于理解现有界面，但不能证明当前 Vue 3 中的每个常量都能以相同方式解析。将存档数值视为当前设计要求前，请检查获准使用的软件包。

阅读配套规范

## Morningstar 设计系统 Morningstar Intrinsic 改变了实现基准

### 两个字重系列，组件协同更新

2025 年的 Intrinsic 公告将旧有的 thin、light 和 regular 名称对应到 regular 字体，将 bold 和 heavy 对应到 bold 字体。仅更新 font-family 声明并不能完成这次迁移：公告要求更新组件，包括字体和排版软件包。

旧版 morningstar-design-system 单体软件包和 Morningstar Base Charts 不会获得 Intrinsic 更新。新示例不应将这些已存档的安装路径与当前 Vue 3 指引混用。此离线笔记本使用系统回退字体，不嵌入专有字体文件。

阅读配套规范

## Morningstar 设计系统 显式组合表格功能

### 选择、嵌套表头和分页各自承担不同职责

MDS 提供用于组合的表格元素，而不是将所有数据操作强行塞进一个不透明的数据网格。文档中的模式支持行号、嵌套表头插槽、多选和分页。应用仍需自行负责数据转换和选择状态。

提供的工作示例有意采用基于常量样式的原生表格。转向原生组件系列时，文档中的 MDS 组合参考仍然有用：部分选中状态应体现在表头的不确定状态中，每个行复选框都需要一个用于标识行的多选标签。

- 百分比值应保持数值类型，直到显示格式化时再处理；不要对格式化后的字符串排序。

- 数值列标题应与其单元格一样右对齐。

- 排序时保留资产标签；索引位置不是稳定的记录标识符。

阅读配套规范

## Morningstar 设计系统 资产颜色不是通用装饰

### 固定颜色含义，并提供对应的文本说明

历史资产配置配色区分股票、固定收益、现金、另类资产和未分类资产。在示例中，这三种相关资产颜色始终对应各自的资产类别，不因模型或行顺序变化而改变。颜色不会根据恰好排在首位的分段轮换。

文本表格会重复列出每个数值，因此用户无需分辨蓝色、橙色和绿色，也能理解该模型。示例避免使用 Morningstar 星级、Medalist 或风格箱图像：官方图标参考规定，知识产权图标只能用于其既定含义。

阅读配套规范

## 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 设置为视觉上的二级标题尺度，同时不改变其文档语义。

```
@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 Agent 配置

### 实现起点

供获授权团队使用的受限注册表配置。字体路径必须指向应用实际托管且已获许可的文件。请与下方的 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 设计系统

通过房间请求草稿，查看 Nord 的 Therapy 主题令牌和 Web Component 契约：真实的颜色角色、响应式字段尺寸、明确的验证，以及在本地准备的结果。

### 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/)