Sayıların hizalandığı, varlık renklerinin anlamını koruduğu ve tipografinin okunaklı kaldığı bir araştırma arayüzü oluşturun. MDS sabitlerini, Vue 3 kullanımını, Morningstar Intrinsic geçişini ve sıralanabilir, kurgusal bir varlık dağılımı not defterini inceleyin.
Atıfta bulunulan tarihsel MDS varlık dağılımı renklerini ve sistem yazı tipini kullanan çevrimdışı, yerel HTML yorumu. MDS Vue çalışma zamanı, tescilli derecelendirmeler veya canlı yatırım verileri yoktur. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
Uygulama bileşeninden önce Sass giriş dosyasını derleyin ve App.vue örneğinin tamamını bağlayın.
Ö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.
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.
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 geçersiz kılmalarının grafiklere de uygulanacağını varsaymak yerine, grafik öğeleri için ayrı kapsamlı MCE sabitleri kullanın.
04
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.
kabuk / 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; }
Projeniz İçin Bir İstem
Ajan İstemi
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.
05
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.
