# 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 | 업데이트된 믹스인. |
| 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 디자인 시스템 비교 가능한 수치로 구성한 리서치 노트

### 표에는 정확한 값이 담깁니다

> 원본 예시에는 가상의 자산 배분 모델 2개, 누적 막대 그래프, 정확한 값을 보여 주는 표가 있습니다. 시각적 막대는 구성 비율을 상대적으로 보여 주고, 표는 정확한 값을 확인하는 기준이 됩니다. 각 모델의 합계는 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 조합 참조를 활용할 수 있습니다. 일부 선택 상태는 헤더의 indeterminate 상태로 표시하고, 각 행의 체크박스에는 행을 식별하는 multiselection-label을 지정해야 합니다.

- 표시 형식을 적용하기 전까지 백분율 값은 숫자 형식으로 유지하세요. 형식이 적용된 문자열을 정렬하지 마세요.

- 숫자 열의 제목도 해당 셀과 마찬가지로 오른쪽 정렬하세요.

- 정렬해도 자산 레이블은 유지하세요. 인덱스 위치는 안정적인 레코드 식별자가 아닙니다.

지원 사양 읽기

## Morningstar 디자인 시스템 자산 색상은 일반적인 장식이 아닙니다

### 색상의 의미를 고정하고 텍스트로도 확인할 수 있게 하세요

이전 버전의 자산 배분 팔레트는 주식, 채권, 현금, 대체 자산, 미분류 항목을 구분합니다. 예시에서는 모델이나 행 순서가 바뀌어도 세 가지 관련 자산 색상이 각 자산군에 그대로 연결됩니다. 어떤 구간이 첫 번째인지에 따라 색상을 바꾸지 않습니다.

표에서 모든 값을 텍스트로도 보여 주므로, 사용자가 파란색, 주황색, 초록색을 구분하지 않아도 모델을 이해할 수 있습니다. 이 예시는 Morningstar 별점, 메달리스트, 스타일 박스 이미지를 사용하지 않습니다. 공식 아이콘 참조에서는 지식재산권으로 보호되는 아이콘을 정해진 의미에만 사용하도록 안내합니다.

지원 사양 읽기

## Morningstar 디자인 시스템 이전 버전의 간격 기준과 애플리케이션 레이아웃을 구분하세요

### 숨겨진 열이 없는 간결한 읽기 화면

아카이브 문서에는 8픽셀 기본 간격 단위와 4분의 1 및 절반 단위가 안내되어 있습니다. 이 예시는 그 이전 버전의 기준에서 착안해 8/16/24/32 간격 체계를 절제된 방식으로 사용합니다. 전체 너비, 누적 막대 높이, 모바일 전환 기준은 공식 상수를 임의로 만들어 낸 것이 아니라 애플리케이션에서 자체적으로 정한 값입니다.

표에는 자산군, 비율, 비교 막대의 세 열만 둡니다. 화면이 좁을 때는 작은 비교 막대만 제거하고 자산과 정확한 비율은 그대로 표시합니다. 모델 선택기는 데이터 위에 두고 레이블도 계속 표시합니다. 레이블 없이 아이콘만 있는 필터는 사용하지 않습니다.

지원 사양 읽기

## Morningstar 디자인 시스템 접근 범위를 준수하면서 최신 패키지 세대를 적용하세요

### 제품 스타일을 적용하기 전에 실제 에셋을 구성하세요

승인된 팀은 문서에 안내된 내부 레지스트리, Vue 3 패키지 접미사, Sass 설정을 사용할 수 있습니다. CSS 모듈은 컴포넌트 스타일을 범위에 따라 구분하므로 서로 다른 버전을 함께 사용할 수 있습니다. 예시에서는 제품별 네임스페이스를 사용합니다. 호스팅된 글꼴 에셋을 사용하는 스타일보다 먼저 해당 에셋을 구성해야 합니다.

공개 미리보기에는 이러한 접근 권한이 필요하지 않습니다. 자산 배분 인터랙션을 독립적으로 보여 주는 완전한 HTML 예시로, 출처가 명시된 이전 버전의 색상과 시스템 글꼴 대체 설정을 사용합니다. 별도의 Vue 예시는 상수 기반으로 적용하는 구체적인 방법입니다. 이 페이지에서 레지스트리나 글꼴 접근 권한을 제공한다는 의미는 아닙니다.

1. 승인된 내부 레지스트리 및 글꼴에 접근할 수 있는지 확인한 다음, 위에 나온 범위 지정 프로젝트 설정을 구성하세요.

2. 애플리케이션 컴포넌트보다 먼저 Sass 엔트리를 컴파일한 뒤, App.vue 예시 전체를 마운트하세요.

3. 미리보기에서 배분 모델을 전환하고, 양방향으로 정렬한 다음 레이블과 값, 합계가 계속 일치하는지 확인하세요.

지원 사양 읽기

## Morningstar 디자인 시스템 컴포넌트 예제

### 완전한 독립형 인터랙티브 예제

문서 전체를 index.html로 저장한 뒤 브라우저에서 여세요. 인용된 과거 MDS 배분 색상과 시스템 글꼴을 사용한 오프라인 네이티브 HTML 해석입니다. 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; }
```

코드 참조

- 타이포그래피 믹스인은 텍스트 색상을 설정하지 않습니다.

- MDS 재정의가 차트에도 적용된다고 가정하지 말고, 차트 요소에는 별도로 범위가 지정된 MCE 상수를 사용하세요.

## 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에서 영감을 얻은 리서치 노트를 만드세요. 정확한 배분 값을 시맨틱 표에 넣고, 색상은 자산의 의미에 따라 고정하세요. 등급을 임의로 만들거나 IP 아이콘을 장식용으로 사용하지 마세요. 승인된 액세스 권한이 있을 때만 현재 승인된 Vue 3 상수 및 글꼴 설정을 사용하고, 그렇지 않으면 오프라인 구현임을 명확히 표시하세요.
```

## Morningstar 디자인 시스템 출처 및 범위

독립적으로 작성된 OpenDesign 가이드입니다. 배분 예시는 허구이며 재무 조언이 아닙니다. 과거의 숫자 상수에는 출처 버전이 표시되어 있습니다. 현재 패키지와 글꼴에 대한 액세스는 Morningstar의 관리 대상입니다.

- Vue 3 도입 레지스트리, Sass, 글꼴, 모듈 및 상수.

- Intrinsic 출시 안내 현재 글꼴 전환 및 제외된 레거시 항목.

- 과거 상수 v2.37 과거 간격 및 배분 색상임을 명시합니다.

- 텍스트 상수 3.3.0 버전이 지정된 읽기 색상 값.

- 표 기능 가이드 구성, 선택 및 페이지 매김.

- 아이콘의 의미 IP 아이콘 제한 및 접근성 있는 사용.

- 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)
- [아이콘의 의미 IP 아이콘 제한 및 접근성 있는 사용.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [MDS 소개 네이티브 컴포넌트 없이 상수 기반으로 도입하는 방법.](https://designsystem.morningstar.com/getting-started/about-mds/)