# Morningstar Designsystem ## Morningstar Designsystem Interface-Vorschau Wechseln Sie zwischen zwei ursprünglichen Allokationsmodellen und sortieren Sie die Prozentwerte, während die Farben den Anlageklassen zugeordnet bleiben. ## Morningstar Designsystem Designreferenz Aktuelle Einführung von Vue 3 und Intrinsic-Richtlinien von 2025, ergänzt durch explizit versionierte Referenzen auf öffentliche Konstanten. Die numerischen Werte aus v2.37 dienen nur als historische Referenz und sind keine Angaben zum aktuellen Vue-3-Paket. Das Beispiel verwendet die zitierten historischen Diagrammfarben und ein eigenes Anwendungslayout. ### Aktueller Einführungsrahmen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | UI scope | @mds | Einzeln versionierte Komponenten. | | Chart scope | @mce | Separat abgegrenzte Diagrammelemente. | | Vue 3 packages | -vue3 suffix | Die passende Bibliotheksgeneration verwenden. | | Registry | artifacts.morningstar.com/repository/npm-prod-group/ | Interner Zugriff erforderlich. | | Sass | Dart Sass / sass package | Bereitgestellte Komponenten-Styles kompilieren. | | CSS Modules | [local]___researchNotebook | Anwendungs-Namespace des Beispiels, kein offiziell vorgeschriebenes Suffix. | ### Umstellung auf Intrinsic | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Typeface | Morningstar Intrinsic | Zugelassene Assets müssen separat bezogen werden. | | Weights | Regular and Bold | Aktuell unterstützte Schriftschnittfamilien. | | Thin / Light / Regular | Map to Intrinsic Regular | Alte Bezeichnungen für Schriftschnitte bedeuten nicht, dass drei neue Schriftdateien erforderlich sind. | | Bold / Heavy | Map to Intrinsic Bold | Hervorhebungen gezielt einsetzen. | | Vue 3 typography | @mds/typography-vue3 | Aktualisierte Mixins. | | Legacy monolith / MBC | No Intrinsic updates | Neue Integrationen nicht auf dem alten Monolithen aufbauen. | ### Textfarben – Momentaufnahme der Konstanten 3.3.0 | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $mds-text-color-primary | #1e1e1e | Primärtext auf hellem Hintergrund. | | $mds-text-color-secondary | #5e5e5e | Ergänzender Text auf hellem Hintergrund. | | $mds-text-color-primary-on-dark | #ffffff | Primärtext auf dunklem Hintergrund. | | $mds-text-color-secondary-on-dark | #ababab | Ergänzender Text auf dunklem Hintergrund. | | $mds-text-color-interactive-primary | #006fba | Interaktiver Text; für Links vorzugsweise das Link-Mixin verwenden. | | $mds-text-color-error | #ca0000 | Fehlertext, getrennt von einer Feedback-Hintergrundfarbe. | ### Historische Allokationspalette – v2.37 | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $mds-visualization-color-asset-allocation-equity | #1f55a5 | Diagrammsegment für Aktien. | | $mds-visualization-color-asset-allocation-fixed-income | #ef7622 | Diagrammsegment für festverzinsliche Anlagen. | | $mds-visualization-color-asset-allocation-cash | #518428 | Diagrammsegment für Bargeld. | | $mds-visualization-color-asset-allocation-alternative | #a50032 | Segment für alternative Anlagen. | | $mds-visualization-color-asset-allocation-not-classified | #e5e5e5 | Nicht klassifiziertes Segment; mit einer Beschriftung kombinieren. | ### Historischer Abstandswert – v2.37 | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | $mds-space-quarter-x | 2px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-half-x | 4px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-1-x | 8px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-1-and-a-half-x | 12px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-2-x | 16px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-3-x | 24px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-4-x | 32px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | | $mds-space-6-x | 48px | Historische Konstante; vor der Übernahme das installierte Paket prüfen. | ### Steuerung der Tabellenzusammenstellung | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | row-numbers | Boolean on mds-table | Zeilennummer auf mds-tr bereitstellen. | | nested-headers | Number of levels | Slots mds-thead-group-n verwenden. | | multiselection | Boolean on mds-table | Zustände für vollständige und teilweise Auswahl unterscheiden. | | mds-thead.indeterminate | Boolean | Steht für eine teilweise Auswahl. | | mds-tr.multiselection-label | Row-identifying text | Benennt das Auswahlkästchen. | | mds-pagination-page-changed | Pagination event | Die Anwendung stellt die Logik für den Seitenwechsel bereit. | ## Morningstar Designsystem Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Morningstar Designsystem Ein Forschungsnotizbuch mit vergleichbaren Zahlen im Mittelpunkt ### Tabellen enthalten die exakten Werte > Das ursprüngliche Beispiel zeigt zwei fiktive Allokationsmodelle, einen gestapelten Balken und eine Tabelle mit exakten Werten. Die visuelle Leiste veranschaulicht die relative Zusammensetzung; für das genaue Ablesen maßgeblich bleibt die Tabelle. Jedes Modell ergibt insgesamt 100 %, und das ausgewählte Modell wird sowohl in der Überschrift als auch in der Tabellenbeschriftung genannt. Durch Sortieren ändert sich die Reihenfolge der Zeilen, nicht aber der Nenner oder die Farben der Anlageklassen. Leserinnen und Leser können so von einem allgemeinen Eindruck der Allokation zum exakten Prozentwert wechseln, ohne ein proprietäres Bewertungssymbol deuten zu müssen. Das ist eine konkrete Rechercheinteraktion, kein erfundenes Morningstar-Produkt und keine Empfehlung. Unterstützende Spezifikation lesen ## Morningstar Designsystem Konstanten haben festgelegte Rollen und Versionsgrenzen ### Nicht jeden Grauton in ein Text-Token umwandeln MDS unterscheidet rollenbasierte Konstanten von allgemeinen Farben. Der Entwicklerleitfaden trennt ausdrücklich eine Textfarbe von einem allgemeinen Neutralton, wenn derselbe visuelle Wert für ein Element verwendet werden soll, das kein Text ist. Das bereitgestellte Sass-Beispiel verwendet für den Text die Lesefarbe und für eine benutzerdefinierte Tabellenlinie einen allgemeinen Neutralton. Die Referenztabellen behalten ihre Versionsgrenzen bei: Constants 3.3.0 unterstützt die genannten Textwerte, während das öffentliche v2.37-Archiv die historischen Werte für Allokation und Abstände dokumentiert. Diese Werte sind hilfreich, um eine bestehende Benutzeroberfläche zu verstehen, belegen aber nicht, dass jede aktuelle Vue-3-Konstante identisch aufgelöst wird. Prüfen Sie das autorisierte installierte Paket, bevor Sie eine archivierte Zahl als aktuelle Designvorgabe behandeln. Unterstützende Spezifikation lesen ## Morningstar Designsystem Morningstar Intrinsic verändert die Implementierungsgrundlage ### Zwei Schriftschnittfamilien, aufeinander abgestimmte Komponentenaktualisierungen Laut der Ankündigung von Intrinsic aus dem Jahr 2025 werden die früheren Bezeichnungen Thin, Light und Regular der Schrift Regular zugeordnet, Bold und Heavy der Schrift Bold. Eine Aktualisierung allein der font-family-Deklaration bildet diese Migration nicht ab: Die Ankündigung fordert auch Aktualisierungen an Komponenten, darunter an den Schrift- und Typografiepaketen. Der alte Monolith morningstar-design-system und Morningstar Base Charts erhalten keine Intrinsic-Aktualisierungen. Neue Beispiele sollten diese archivierten Installationswege nicht mit aktuellen Vue-3-Anweisungen kombinieren. Das Offline-Notizbuch verwendet eine Systemschrift als Fallback und bindet keine proprietären Schriftdateien ein. Unterstützende Spezifikation lesen ## Morningstar Designsystem Tabellenfunktionen gezielt zusammenstellen ### Auswahl, verschachtelte Überschriften und Seitennavigation sind separate Aufgaben MDS stellt Tabellenelemente zur Zusammenstellung bereit, statt alle Datenoperationen in ein einziges undurchsichtiges Raster zu zwingen. Die dokumentierten Muster unterstützen Zeilennummern, Slots für verschachtelte Überschriften, Mehrfachauswahl und Seitennavigation. Die Anwendung bleibt für ihre Datentransformationen und den Auswahlzustand selbst verantwortlich. Das bereitgestellte funktionierende Beispiel verwendet bewusst eine native Tabelle mit Stilen auf Basis von Konstanten. Die dokumentierte MDS-Zusammenstellungsreferenz bleibt nützlich, wenn Sie zur nativen Komponentenfamilie wechseln: Eine teilweise Auswahl gehört in den unbestimmten Zustand der Kopfzeile, und jedes Zeilenkästchen benötigt ein multiselection-label, das die Zeile eindeutig kennzeichnet. - Prozentwerte bis zur Formatierung für die Anzeige numerisch belassen; formatierte Zeichenfolgen nicht sortieren. - Zahlenüberschriften wie die zugehörigen Zellen rechtsbündig ausrichten. - Die Bezeichnung der Anlageklasse beim Sortieren beibehalten; Indexpositionen sind keine stabilen Datensatzkennungen. Unterstützende Spezifikation lesen ## Morningstar Designsystem Farben der Anlageklassen sind keine allgemeine Dekoration ### Feste Bedeutung und eine gleichwertige Textdarstellung verwenden Die historische Allokationspalette unterscheidet Aktien, festverzinsliche Anlagen, Barmittel, alternative Anlagen und nicht klassifizierte Positionen. Im Beispiel bleiben die drei relevanten Anlagenfarben den jeweiligen Anlageklassen zugeordnet, auch wenn sich das Modell oder die Zeilenreihenfolge ändert. Die Farben wechseln nicht je nachdem, welches Segment zufällig an erster Stelle steht. Eine Tabelle enthält jeden Wert noch einmal in Textform. Daher muss niemand Blau, Orange und Grün unterscheiden können, um das Modell zu verstehen. Das Beispiel verzichtet auf Morningstar-Sterne, Medaillensymbole und Style-Box-Grafiken: Laut der offiziellen Symbolreferenz sind Symbole mit geistigem Eigentum ihren etablierten Bedeutungen vorbehalten. Unterstützende Spezifikation lesen ## Morningstar Designsystem Historisches Rastermaß und Anwendungslayout getrennt behandeln ### Eine kompakte, gut lesbare Oberfläche ohne ausgeblendete Spalten Das Archiv dokumentiert einen Grundabstand von 8 Pixeln sowie Viertel- und Halbschritte. Das Beispiel verwendet einen zurückhaltenden Rhythmus von 8/16/24/32, der von dieser historischen Referenz inspiriert ist. Gesamtbreite, Höhe des gestapelten Balkens und mobiler Schwellenwert sind eigene Entscheidungen für die Anwendung und keine erfundenen offiziellen Konstanten. Die Tabelle enthält nur drei Spalten: Anlageklasse, Prozentwert und Vergleichsbalken. Bei schmalen Ansichten wird der kleine Vergleichsbalken ausgeblendet; Anlageklasse und exakter Prozentwert bleiben sichtbar. Der Modellauswahlschalter bleibt über den Daten, seine Beschriftung ist weiterhin sichtbar. Es gibt keinen unbeschrifteten Filter, der nur aus einem Symbol besteht. Unterstützende Spezifikation lesen ## Morningstar Designsystem Die aktuelle Paketgeneration innerhalb der Zugriffsgrenzen übernehmen ### Die tatsächlichen Ressourcen konfigurieren, bevor das Produkt gestaltet wird Autorisierte Teams können die dokumentierte interne Registry, den Vue-3-Paketsuffix und die Sass-Einrichtung verwenden. CSS Module kapseln Komponentenstile, damit verschiedene Versionen nebeneinander bestehen können; das Beispiel verwendet einen produktspezifischen Namensraum. Gehostete Schriftressourcen müssen konfiguriert werden, bevor sie in den Stilen verwendet werden. Für die öffentliche Vorschau ist keiner dieser Zugriffe erforderlich. Sie ist eine vollständige, unabhängige HTML Demonstration der Allokationsinteraktion mit historischen, durch Quellen belegten Farben und einem expliziten Fallback auf Systemschriften. Das separate Vue-Beispiel zeigt einen konkreten Übernahmeweg auf Basis von Konstanten; es bedeutet nicht, dass diese Seite Zugriff auf die Registry oder Schriftressourcen gewähren kann. 1. Zugriff auf die genehmigte interne Registry und die Schriftressourcen bestätigen und anschließend die oben gezeigte gekapselte Projektkonfiguration erstellen. 2. Den Sass-Einstiegspunkt vor der Anwendungskomponente kompilieren und das vollständige App.vue-Beispiel einbinden. 3. Wechseln Sie in der Vorschau das Allokationsmodell, sortieren Sie in beide Richtungen und prüfen Sie, ob Beschriftungen, Werte und Gesamtsumme synchron bleiben. Unterstützende Spezifikation lesen ## Morningstar Designsystem – Komponentenbeispiele ### Vollständige, eigenständige interaktive Demo Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Offline-Interpretation mit nativer HTML-Darstellung unter Verwendung zitierter historischer MDS-Allokationsfarben und einer Systemschrift. Keine MDS-Vue-Laufzeitumgebung, proprietären Bewertungen oder aktuellen Anlagedaten. ``` Allocation notebook — MDS interpretation
RESEARCH NOTEBOOKIndependent MDS interpretation

One model. Every allocation.

Read the mix at a glance, then inspect the exact numbers. These two original models are fictional.

No market data or investment recommendation
EquityFixed incomeCash
100PERCENT TOTAL
Balanced sample allocation
Asset classShare of model

Sorted by allocation, highest first.

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.

``` Code-Referenz - Die Allokationswerte sind fiktiv. Die Farben der Anlageklassen behalten beim Sortieren ihre jeweilige Bedeutung. Dieses Dokument enthält keine proprietären MDS-Vue-Assets oder Intrinsic-Schriftarten. ### Eine vollständige sortierbare Tabelle mit explizitem Nenner Eine Vue-3-Tabelle verwendet native Semantik und die oben beschriebene Einrichtung der visuellen MDS-Sprache. Beim Sortieren bleiben die Zahlenwerte erhalten, und die Sortierrichtung wird angezeigt. ``` ``` Code-Referenz - MDS erlaubt Teams, seine Konstanten und visuelle Sprache ohne die Vue-Komponenten anzupassen. - Dieses Beispiel erfindet bewusst weder MdsTable-Importe noch undokumentierte Sortierereignisse. - Die Allokation von 55/35/10 ist fiktiv, ergibt insgesamt 100 und stellt keine Marktdaten dar. ### Typografische Skalierung und semantische Überschriftenebene voneinander trennen Das offizielle Mixin kann ein h1 auf der visuellen Ebene 2 gestalten, ohne seine Bedeutung im Dokument zu verändern. ``` @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; } ``` Code-Referenz - Typografie-Mixins legen keine Textfarbe fest. - Verwenden Sie für Diagramme separat abgegrenzte MCE-Konstanten, statt anzunehmen, dass sich MDS-Überschreibungen auf Diagramme übertragen. ## Morningstar Designsystem Agenteneinrichtung ### Ausgangspunkt für die Implementierung Einrichtung einer beschränkten Registry für autorisierte Teams. Der Schriftartenpfad muss auf lizenzierte Dateien verweisen, die tatsächlich von der Anwendung bereitgestellt werden. Zusammen mit dem folgenden App.vue verwenden. Dies ist eine native HTML-Tabelle auf Konstantenbasis – keine Behauptung, dass MDS-Pakete öffentlich verfügbar sind oder die native Kompilierung überprüft wurde. ``` # 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; } ``` ### Ein Prompt für dein Projekt ``` Erstellen Sie ein von Morningstar inspiriertes Recherche-Notizbuch und beachten Sie dabei die in diesem Leitfaden ausdrücklich genannten Versionsgrenzen. Führen Sie exakte Allokationswerte in einer semantischen Tabelle auf und ordnen Sie die Farben fest den jeweiligen Anlageklassen zu. Erfinden Sie keine Bewertungen und verwenden Sie IP-Symbole nicht als Dekoration. Verwenden Sie die aktuelle autorisierte Konfiguration für Vue 3, Konstanten und Schriftarten nur mit genehmigtem Zugriff; andernfalls kennzeichnen Sie die Offline-Implementierung eindeutig. ``` ## Morningstar Designsystem Quellen und Geltungsbereich Unabhängiger OpenDesign-Leitfaden. Die Allokationsbeispiele sind fiktiv und stellen keine Finanzberatung dar. Historische numerische Konstanten sind mit ihrer Quellversion gekennzeichnet. Der aktuelle Zugriff auf Pakete und Schriftarten unterliegt weiterhin den Zugriffskontrollen von Morningstar. - Einführung von Vue 3 Registry, Sass, Schriftarten, Module und Konstanten. - Ankündigung zu Intrinsic Aktueller Schriftartenwechsel und Ausschluss älterer Versionen. - Historische Konstanten v2.37 Ausdrücklich historische Abstände und Allokationsfarben. - Textkonstanten 3.3.0 Farbwerte für Lesetexte nach Version. - Leitfaden zu Tabellenfunktionen Zusammensetzung, Auswahl und Seitennummerierung. - Bedeutung von Symbolen Einschränkungen für IP-Symbole und barrierefreie Verwendung. - Über MDS Einführung auf Konstantenbasis ohne native Komponenten. ## Morningstar Designsystem Weiterführende Ressourcen ### Mozilla Protocol Ein redaktioneller Leitfaden zu Protocol mit echten Schriftfamilien, Abstands- und Container-Skalen, einer responsiven, illustrierten Leseseite und einem vollständigen Formularbeispiel mit nativen CSS-Komponenten. ### Nord Designsystem Untersuchen Sie die Token des Nord-Therapy-Themes und die Web-Component-Verträge anhand eines Entwurfs für eine Raumanfrage: echte Farbrollen, responsive Feldgrößen, explizite Validierung und lokal vorbereitete Ergebnisse. ### Oracle Redwood Untersuchen Sie die tatsächliche Farbpalette, semantische Rollen sowie Grenzen für Abstände und Dichte von Oracle JET 19 Redwood anhand eines vollständigen, eigenständigen und bearbeitbaren Arbeitsblatts zur Aktienanalyse. - [Implementierungsreferenz](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Quelle](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Quelle](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Quelle](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Quelle](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Quelle](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Unterstützende Spezifikation lesen](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Unterstützende Spezifikation lesen](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Unterstützende Spezifikation lesen](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Unterstützende Spezifikation lesen](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Unterstützende Spezifikation lesen](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Code-Referenz](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Code-Referenz](https://designsystem.morningstar.com/getting-started/about-mds/) - [Code-Referenz](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Einführung von Vue 3 Registry, Sass, Schriftarten, Module und Konstanten.](https://designsystem.morningstar.com/getting-started/for-engineers/?tab=vue-3) - [Ankündigung zu Intrinsic Aktueller Schriftartenwechsel und Ausschluss älterer Versionen.](https://designsystem.morningstar.com/whats-new/blog/introducing-morningstar-intrinsic/) - [Historische Konstanten v2.37 Ausdrücklich historische Abstände und Allokationsfarben.](https://designsystem.morningstar.com/legacy/visual-language/constants.html) - [Textkonstanten 3.3.0 Farbwerte für Lesetexte nach Version.](https://designsystem.morningstar.com/component-docs/constants/3.3.0/color.html?tab=text) - [Leitfaden zu Tabellenfunktionen Zusammensetzung, Auswahl und Seitennummerierung.](https://designsystem.morningstar.com/components/how-to-use-data-tables/?tab=examples) - [Bedeutung von Symbolen Einschränkungen für IP-Symbole und barrierefreie Verwendung.](https://designsystem.morningstar.com/ui-elements-docs/icon-vue3/2.0.0/index.html) - [Über MDS Einführung auf Konstantenbasis ohne native Komponenten.](https://designsystem.morningstar.com/getting-started/about-mds/)