01Morningstar 设计系统 界面预览
切换两个原始配置模型并按百分比排序，同时保持颜色与资产类别的对应关系。
离线原生 HTML 解读，采用文中引用的历史 MDS 配置颜色和系统字体。不使用 MDS Vue 运行时、专有评级或实时投资数据。·
实现参考 采用当前 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 | 示例应用命名空间，并非官方要求的后缀。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
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 | 错误文本，与反馈填充色有所区别。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
$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 | 未分类区段；应搭配标签使用。 |
| 名称 / 规则 | 值 / 配置 | 用途 |
|---|
$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 | 应用程序提供页面切换逻辑。 |
03Morningstar 设计系统 完整指南
实用指南，介绍如何为真实界面选择、应用和评审此系统。
DESIGN-morningstar.md完整指导、实现起点和源代码链接。
下载指南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 示例提供了基于常量的具体接入方式；这并不意味着此页面能够授予注册表或字体访问权限。
- 确认已获批的内部注册表和字体访问权限，然后创建上方所示的作用域项目配置。
- 先编译 Sass 入口，再编译应用组件，并挂载完整的 App.vue 示例。
- 在预览中切换资产配置模型，分别按升序和降序排序，并确认标签、数值和总计始终保持同步。
阅读配套规范
Morningstar 设计系统组件示例
完整的独立交互示例
将完整文档保存为 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>代码参考
- MDS 允许团队在不使用其 Vue 组件的情况下调整常量和视觉语言。
- 本示例有意不虚构 MdsTable 导入项或未记录的排序事件。
- 55/35/10 的资产配置为虚构数据，总和为 100，并非市场数据。
将字体排印尺度与语义标题层级分开
官方混入可以将 h1 设置为视觉上的二级标题尺度，同时不改变其文档语义。
scss
@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 覆盖设置会传播到图表中。
04Morningstar 设计系统 AI Agent 配置
实现起点
供获授权团队使用的受限注册表配置。字体路径必须指向应用实际托管且已获许可的文件。请与下方的 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; }
适用于你项目的提示词
Agent 提示词
使用本指南中明确标注的版本边界，创建一个受 Morningstar 启发的研究笔记本。将精确的资产配置数值保留在语义表格中，并让颜色始终对应其资产含义。不要虚构评级，也不要将知识产权图标用作装饰。只有在获批访问权限的情况下，才能使用当前获授权的 Vue 3 常量和字体配置；否则，请明确标注为离线实现。
独立的 OpenDesign 指南。资产配置示例均为虚构内容，不构成财务建议。历史数值常量均标明其来源版本；当前软件包和字体的访问权限仍由 Morningstar 控制。
