# Morningstar tasarım sistemi

## Morningstar tasarım sistemi Arayüz Önizlemesi

İki özgün varlık dağılımı modelini değiştirin ve yüzdeleri sıralayın; bu sırada renklerin varlık sınıflarıyla eşleşmesi korunsun.

## Morningstar tasarım sistemi Tasarım Referansı

Vue 3'ün güncel benimsenme durumu ve 2025 Intrinsic kılavuzu; herkese açık sabit referansları açıkça sürümlendirilmiştir. Eski v2.37 sayısal değerleri yalnızca tarihsel referanstır; güncel Vue 3 paketine ilişkin iddia değildir. Örnek, atıf yapılan tarihsel grafik renklerini ve kendi uygulama yerleşimini kullanır.

### Güncel benimsenme sınırı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| UI scope | @mds | Bileşenler ayrı ayrı sürümlendirilmiştir. |
| Chart scope | @mce | Grafik öğeleri ayrı kapsamlarla tanımlanmıştır. |
| Vue 3 packages | -vue3 suffix | Eşleşen kitaplık neslini kullanın. |
| Registry | artifacts.morningstar.com/repository/npm-prod-group/ | Dahili erişim gerekir. |
| Sass | Dart Sass / sass package | Sağlanan bileşen stillerini derleyin. |
| CSS Modules | [local]___researchNotebook | Örnek uygulama ad alanı; resmî olarak zorunlu bir son ek değildir. |
### Intrinsic geçişi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Typeface | Morningstar Intrinsic | Onaylı varlıklar ayrıca edinilmelidir. |
| Weights | Regular and Bold | Güncel olarak desteklenen kalınlık aileleri. |
| Thin / Light / Regular | Map to Intrinsic Regular | Eski kalınlık adları üç yeni yazı tipi dosyasının varlığını göstermez. |
| Bold / Heavy | Map to Intrinsic Bold | Vurguyu bilinçli kullanın. |
| Vue 3 typography | @mds/typography-vue3 | Güncellenmiş mixin'ler. |
| Legacy monolith / MBC | No Intrinsic updates | Yeni bir entegrasyonu eski monolit üzerine kurmayın. |
### Metin renkleri — constants 3.3.0 anlık görüntüsü

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $mds-text-color-primary | #1e1e1e | Açık arka planlardaki birincil metin. |
| $mds-text-color-secondary | #5e5e5e | Açık arka planlardaki destekleyici metin. |
| $mds-text-color-primary-on-dark | #ffffff | Koyu arka plandaki birincil metin. |
| $mds-text-color-secondary-on-dark | #ababab | Koyu arka plandaki destekleyici metin. |
| $mds-text-color-interactive-primary | #006fba | Etkileşimli metin; bağlantılar için link mixin'ini tercih edin. |
| $mds-text-color-error | #ca0000 | Hata metni; geri bildirim dolgusu ile karıştırılmamalıdır. |
### Tarihsel varlık dağılımı paleti — v2.37

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $mds-visualization-color-asset-allocation-equity | #1f55a5 | Hisse senedi grafik dilimi. |
| $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Sabit getirili menkul kıymetler grafik dilimi. |
| $mds-visualization-color-asset-allocation-cash | #518428 | Nakit grafik dilimi. |
| $mds-visualization-color-asset-allocation-alternative | #a50032 | Alternatif varlık dilimi. |
| $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Sınıflandırılmamış dilim; etiketle birlikte kullanın. |
### Tarihsel boşluk değerleri — v2.37

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| $mds-space-quarter-x | 2px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-half-x | 4px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-1-x | 8px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-1-and-a-half-x | 12px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-2-x | 16px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-3-x | 24px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-4-x | 32px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
| $mds-space-6-x | 48px | Tarihsel sabit; kullanmadan önce yüklü paketi doğrulayın. |
### Tablo bileşimi kontrolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| row-numbers | Boolean on mds-table | mds-tr için satır numarası belirtin. |
| nested-headers | Number of levels | mds-thead-group-n yuvalarını kullanın. |
| multiselection | Boolean on mds-table | Tümünün seçili ve kısmen seçili durumlarını birbirinden ayırın. |
| mds-thead.indeterminate | Boolean | Kısmi seçimi belirtir. |
| mds-tr.multiselection-label | Row-identifying text | Seçim kutusunu adlandırır. |
| mds-pagination-page-changed | Pagination event | Sayfa değiştirme mantığını uygulama sağlar. |
## Morningstar tasarım sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Morningstar tasarım sistemi Karşılaştırılabilir sayılar etrafında oluşturulmuş bir araştırma not defteri

### Tablolar kesin değerleri sunar

> Özgün örnekte iki kurgusal varlık dağılımı modeli, yığılmış bir çubuk ve kesin değerleri gösteren bir tablo yer alır. Görsel şerit göreli dağılımı açıklar; tablodaki değerler ise başvurulacak asıl kaynaktır. Her modelin toplamı %100'dür ve seçilen modelin adı hem başlıkta hem de tablo açıklamasında belirtilir.

Sıralama, paydayı veya varlık sınıfı renklerini değiştirmeden satırların sırasını değiştirir. Okuyucu, tescilli bir derecelendirme simgesini yorumlamaya gerek kalmadan genel dağılım izleniminden kesin yüzdeye geçebilir. Bu, uydurma bir Morningstar ürünü veya tavsiyesi değil, somut bir araştırma etkileşimidir.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Sabitlerin belirlenmiş rolleri ve sürüm sınırları vardır

### Her gri tonunu metin tokenına dönüştürmeyin

MDS, role dayalı sabitleri genel renklerden ayırır. Mühendis kılavuzu, metin rengiyle aynı görsel değer metin dışı bir öğede gerektiğinde metin renginin genel nötr renkten ayrı tutulmasını özellikle belirtir. Sağlanan Sass örneğinde metin için okuma rolü, özel tablo çizgisi içinse genel nötr renk kullanılır.

Referans tabloları sürüm sınırlarını korur: constants 3.3.0, atıfta bulunulan metin değerlerini; herkese açık v2.37 arşivi ise tarihsel varlık dağılımı ve boşluk değerlerini destekler. Bunlar mevcut bir arayüzü anlamaya yardımcı olur, ancak güncel Vue 3 sabitlerinin tümünün aynı şekilde çözümleneceğini kanıtlamaz. Arşivlenmiş bir sayıyı güncel bir tasarım gereksinimi saymadan önce yetkili yüklü paketi inceleyin.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Morningstar Intrinsic uygulama temelini değiştiriyor

### İki kalınlık ailesi, eşgüdümlü bileşen güncellemeleri

2025 Intrinsic duyurusu, eski thin, light ve regular adlarını regular yazı tipine; bold ve heavy adlarını ise bold yazı tipine eşler. Yalnızca font-family bildirimini güncellemek bu geçişi yeniden oluşturmaz: duyuru, yazı tipi ve tipografi paketleri dahil bileşen güncellemeleri gerektiğini belirtir.

Eski morningstar-design-system monoliti ve Morningstar Base Charts, Intrinsic güncellemelerini almaz. Yeni örneklerde arşivlenmiş kurulum yolları güncel Vue 3 yönergeleriyle birleştirilmemelidir. Çevrimdışı not defteri, sistem yedeği yazı tipini kullanır ve tescilli yazı tipi dosyalarını içermez.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Tablo özelliklerini açıkça bir araya getirin

### Seçim, iç içe başlıklar ve sayfalama ayrı sorumluluklardır

MDS, tüm veri işlemlerini tek ve kapalı bir ızgaraya zorlamak yerine, bileşim için tablo öğeleri sunar. Belgelenen kalıplar satır numaralarını, iç içe başlık yuvalarını, çoklu seçimi ve sayfalamayı kapsar. Veri dönüşümünden ve seçim durumundan yine uygulama sorumludur.

Sunulan çalışan örnek, bilerek sabit tabanlı stillere sahip yerel bir tablo kullanır. Yerel bileşen ailesine geçerken belgelenen MDS bileşim başvurusu yararlı olmaya devam eder: kısmi seçim, üstbilgideki belirsiz durumuyla gösterilmeli ve her satır onay kutusuna satırı tanımlayan bir çoklu seçim etiketi verilmelidir.

- Yüzde değerlerini görüntüleme biçimine dönüştürene kadar sayısal tutun; biçimlendirilmiş dizeleri sıralamayın.

- Sayısal sütun başlıklarını hücreleriyle aynı şekilde sağa hizalayın.

- Sıralama sırasında varlık etiketini koruyun; dizin konumları kararlı kayıt tanımlayıcıları değildir.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Varlık renkleri genel amaçlı süslemeler değildir

### Anlamlarını sabit tutun ve metinle de ifade edin

Tarihsel tahsis paleti; hisse senetleri, sabit getirili menkul kıymetler, nakit, alternatifler ve sınıflandırılmamış varlıkları birbirinden ayırır. Örnekteki üç ilgili varlık rengi, model veya satır sırası değişse de kendi varlık sınıflarına bağlı kalır. Renkler, ilk sırada hangi segmentin bulunduğuna göre değişmez.

Metin tablosu her değeri tekrarlar; böylece kullanıcı modelin ne olduğunu anlamak için mavi, turuncu ve yeşili ayırt etmek zorunda kalmaz. Örnek, Morningstar yıldızlarını, madalyalı simgelerini veya stil kutusu görsellerini kullanmaz: resmî simge başvurusu, fikrî mülkiyete tabi simgeleri yalnızca yerleşik anlamları için ayırır.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Tarihsel ölçeği uygulama yerleşiminden ayrı tutun

### Gizli sütunlar içermeyen, kompakt bir okuma yüzeyi

Arşivde, temel aralık adımının 8 piksel olduğu; çeyrek ve yarım adımların da kullanıldığı belgelenmiştir. Örnek, bu tarihsel başvurudan esinlenen ölçülü bir 8/16/24/32 ritmi kullanır. Genel genişlik, yığılmış çubuk yüksekliği ve mobil eşik, resmî sabitler gibi sunulmayan özgün uygulama tercihleridir.

Tabloda yalnızca üç sütun bulunur: varlık sınıfı, yüzde ve karşılaştırma çubuğu. Dar ekranlarda varlık ve kesin yüzde korunurken minyatür karşılaştırma çubuğu kaldırılır. Model seçici verilerin üzerinde kalır ve etiketi görünür olur; etiketsiz, yalnızca simgeden oluşan bir filtre yoktur.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Mevcut paket neslini erişim sınırları içinde kullanın

### Bir ürünü biçimlendirmeden önce gerçek varlıkları yapılandırın

Yetkili ekipler, belgelenen dahili kayıt defterini, Vue 3 paket sonekini ve Sass kurulumunu kullanabilir. CSS Modüller, farklı sürümlerin bir arada bulunabilmesi için bileşen stillerini kapsama alır; örnek, ürüne özgü bir ad alanı kullanır. Barındırılan yazı tipi varlıkları, bunları kullanan stillerden önce yapılandırılmalıdır.

Herkese açık önizleme için bu erişimlerin hiçbiri gerekmez. Önizleme, tahsis etkileşimini gösteren ve kaynaklarla desteklenen tarihsel renkleri ve açıkça belirtilmiş sistem yazı tipi yedeğini kullanan, bağımsız ve eksiksiz bir HTML örnektir. Ayrı Vue örneği, sabit tabanlı bir benimseme yolunu somutlaştırır; bu sayfanın kayıt defterine veya yazı tiplerine erişim sağlayabildiği iddiasında bulunmaz.

1. Yukarıda gösterilen kapsamlı proje yapılandırmasını oluşturmadan önce onaylı dahili kayıt defterine ve yazı tipi erişimine sahip olduğunuzu doğrulayın.

2. Uygulama bileşeninden önce Sass giriş dosyasını derleyin ve App.vue örneğinin tamamını bağlayın.

3. Önizlemede tahsis modelini değiştirin, her iki yönde sıralayın ve etiketlerin, değerlerin ve toplamın eşzamanlı kaldığını doğrulayın.

Destekleyici belirtimi okuyun

## Morningstar tasarım sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedin ve tarayıcıda açın. Kaynakları belirtilen tarihsel MDS tahsis renklerini ve sistem yazı tipini kullanan, çevrimdışı ve yerel bir HTML yorumu. MDS Vue çalışma zamanı, tescilli derecelendirmeler veya canlı yatırım verileri içermez.

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

Kod referansı

- Tahsis değerleri kurgusaldır. Varlık renkleri sıralama sırasında kategori anlamlarını korur; bu belge tescilli MDS Vue varlıklarını veya Intrinsic yazı tiplerini içermez.

### Açıkça belirtilmiş bir paydası olan, sıralanabilir eksiksiz bir tablo

Vue 3 tablosu, yerel anlamsal yapıyı ve yukarıdaki MDS görsel dili kurulumunu kullanır. Sıralama, sayısal değerleri korur ve sıralama yönünü belirtir.

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

Kod referansı

- MDS, ekiplerin Vue bileşenlerini kullanmadan sabitlerini ve görsel dilini uyarlamasına olanak tanır.

- Bu örnek, bilerek MdsTable içe aktarımları veya belgelenmemiş sıralama olayları uydurmaz.

- %55/%35/%10 tahsisi kurgusaldır, toplamı 100'dür ve piyasa verisi değildir.

### Tipografik ölçeği anlamsal başlık düzeyinden ayrı tutun

Resmî karışım, belgedeki anlamı değiştirmeden h1 öğesini görsel olarak 2. düzey ölçeğinde biçimlendirebilir.

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

Kod referansı

- Tipografi karışımları metin rengini belirlemez.

- MDS geçersiz kılmalarının grafiklere de uygulanacağını varsaymak yerine, grafik öğeleri için ayrı kapsamlı MCE sabitleri kullanın.

## Morningstar tasarım sistemi AI Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Yetkili ekipler için kısıtlı kayıt defteri kurulumu. Yazı tipi yolu, uygulamanın gerçekten barındırdığı lisanslı dosyalara yönelmelidir. Aşağıdaki App.vue ile birlikte kullanın. Bu, sabit tabanlı yerel bir HTML tablosudur; MDS paketlerinin herkese açık olduğunu veya yerel derlemenin doğrulandığını iddia etmez.

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

### Projeniz İçin Bir İstem

```
Bu kılavuzda belirtilen açık sürüm sınırlarını kullanarak Morningstar'dan esinlenen bir araştırma not defteri oluşturun. Tahsis değerlerini anlamsal bir tabloda tutun ve renkleri varlık anlamlarına sabitleyin. Derecelendirme uydurmayın veya fikrî mülkiyete tabi simgeleri süsleme amacıyla kullanmayın. Güncel yetkili Vue 3 sabit/yazı tipi yapılandırmasını yalnızca onaylı erişiminiz varsa kullanın; aksi hâlde çevrimdışı uygulamayı açıkça bu şekilde tanımlayın.
```

## Morningstar tasarım sistemi Kaynaklar ve Kapsam

Bağımsız OpenDesign kılavuzu. Tahsis örnekleri kurgusaldır ve finansal tavsiye değildir. Tarihsel sayısal sabitlerin kaynak sürümü belirtilmiştir; güncel paket ve yazı tipi erişimi Morningstar tarafından denetlenir.

- Vue 3'ü benimseme Kayıt defteri, Sass, yazı tipleri, modüller ve sabitler.

- Intrinsic duyurusu Mevcut yazı tipi geçişi ve eski sürüm kapsamı dışında bırakılanlar.

- Tarihsel sabitler v2.37 Aralık ve tahsis renkleri açıkça tarihsel olarak belirtilmiştir.

- Metin sabitleri 3.3.0 Sürümü belirtilmiş okuma rengi değerleri.

- Tablo özellikleri kılavuzu Birleştirme, seçim ve sayfalama.

- Simge anlamları Fikrî mülkiyete tabi simgelerde kısıtlamalar ve erişilebilir kullanım.

- MDS hakkında Yerel bileşenler olmadan sabit tabanlı benimseme.

## Morningstar tasarım sistemi İlgili Kaynaklar

### Mozilla Protocol

Gerçek yazı tipi aileleri, boşluk ve kapsayıcı ölçekleri, duyarlı ve görselli bir okuma sayfası ve eksiksiz yerel CSS form örneği içeren editoryal bir Protocol kılavuzu.

### Nord tasarım sistemi

Bir oda talebi taslağı üzerinden Nord’un Therapy tema belirteçlerini ve Web Component sözleşmelerini inceleyin: gerçek renk rolleri, duyarlı alan boyutları, açık doğrulama ve yerel olarak hazırlanan sonuçlar.

### Oracle Redwood

Eksiksiz ve özgün, düzenlenebilir bir stok inceleme çalışma sayfası üzerinden Oracle JET 19 Redwood’un gerçek paletini, anlamsal rollerini, aralıklarını ve yoğunluk sınırlarını inceleyin.


- [Uygulama başvurusu](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Kaynak](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Kaynak](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Kaynak](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [Kaynak](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Kaynak](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Destekleyici belirtimi okuyun](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Destekleyici belirtimi okuyun](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Destekleyici belirtimi okuyun](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Destekleyici belirtimi okuyun](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [Destekleyici belirtimi okuyun](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Kod referansı](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Kod referansı](https://designsystem.morningstar.com/getting-started/about-mds/)
- [Kod referansı](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Vue 3'ü benimseme Kayıt defteri, Sass, yazı tipleri, modüller ve sabitler.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3)
- [Intrinsic duyurusu Mevcut yazı tipi geçişi ve eski sürüm kapsamı dışında bırakılanlar.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/)
- [Tarihsel sabitler v2.37 Aralık ve tahsis renkleri açıkça tarihsel olarak belirtilmiştir.](https://designsystem.morningstar.com/legacy/visual-language/constants.html)
- [Metin sabitleri 3.3.0 Sürümü belirtilmiş okuma rengi değerleri.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text)
- [Tablo özellikleri kılavuzu Birleştirme, seçim ve sayfalama.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples)
- [Simge anlamları Fikrî mülkiyete tabi simgelerde kısıtlamalar ve erişilebilir kullanım.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html)
- [MDS hakkında Yerel bileşenler olmadan sabit tabanlı benimseme.](https://designsystem.morningstar.com/getting-started/about-mds/)