# Visa Product Designsystem ## Visa Product Designsystem-Oberflächenvorschau Wählen Sie Format und Häufigkeit aus, prüfen Sie die lokale Einstellung und setzen Sie sie zurück. ## Visa Product Designsystem-Designreferenz Veröffentlichte Stile von @visa/nova-styles 1.6.5, Visa-Theme und Metadaten des Beispiels. Standard-/helle Werte sind von alternativen und dunklen Überschreibungen getrennt. Die Vorschau bettet das offizielle CSS lokal ein, entfernt entfernte @font-face-Regeln und verwendet eine Systemschrift als Fallback. ### Standardpalette | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --palette-default-active | #1434cb | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-active-hover | #173be8 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-active-pressed | #0f2595 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-active-accent | #fcc015 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-surface-1 | #ffffff | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-surface-2 | #f5f5f5 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-surface-3 | #f0f0f0 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-text | #000000 | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-text-subtle | #4a4a4a | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-text-on-active | #ffffff | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --palette-default-border | rgba(0, 0, 0, 0.1) | Referenz für das Visa-Standard-/helle Theme 1.6.5. | ### Theme-Größe und -Typografie | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --theme-font-size | 14px | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --theme-border-radius | 6px | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-headline-1-font-size | 2.2857142857rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-headline-2-font-size | 1.7857142857rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-headline-3-font-size | 1.4285714286rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-body-1-font-size | 1.1428571429rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-body-2-font-size | 1rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | | --typography-body-3-font-size | 0.8571428571rem | Referenz für das Visa-Standard-/helle Theme 1.6.5. | ### Skalierbare Abmessungen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | | --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | Skalierbare Basisabmessung; in responsiven Kontexten kann ein zusätzlicher Faktor angewendet werden. | ### Veröffentlichte Utility- und Komponentenklassen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | v-flex | Flex layout | Für Abstandsbeispiele erforderliches übergeordnetes Element. | | v-gap-20 | Gap utility | Im offiziellen Beispiel für den Standardabstand gezeigt. | | v-col-gap-20 | Column gap utility | Trennt Spalten. | | v-button | Primary button | Verwenden Sie ein natives Button-Element. | | v-button-secondary | Secondary modifier | Unterstützende Reset-Aktion im Beispiel. | | v-radio | Native radio style | Gemeinsamen Namen und unterschiedliche Werte beibehalten. | | v-label | Label style | Ein zugeordnetes Label oder ein umschließendes Label beibehalten. | | v-alternate | Alternate palette context | Wird auf einer Oberfläche oder Schaltfläche angezeigt. | | v-typography-headline-1 | Headline visual role | Auf das semantische h1 dieser Seite anwenden. | ### Kompositionsvertrag | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Radio group | One shared name per question | Format und Häufigkeit sind unabhängige Gruppen. | | fieldset / legend | Group question | Erläutern, worauf sich die Optionen beziehen. | | checked | Native selected state | CSS nicht allein für die Auswahl verwenden. | | disabled | Native unavailable state | Eine sichtbare Erklärung beibehalten, falls die Option nicht verfügbar ist. | | aria-describedby | Optional supporting description | Zusätzlichen Text verknüpfen, wenn er nicht Teil des Labels ist. | ## Visa Product 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. ## Visa Product Designsystem – Eine Aufgabe zur Auswahl mit übersichtlicher Überprüfungsansicht ### Jede Frage unabhängig halten > Im Beispiel werden das Abrechnungsformat und die Häufigkeit der Zusammenfassung abgefragt. Dafür gibt es zwei getrennte Radio-Gruppen: Eine Änderung der Häufigkeit hebt die Formatwahl nicht auf. Vor der Hauptaktion wiederholt die Zusammenfassung beide ausgewählten Optionen. So kann die nutzende Person das Ergebnis prüfen, ohne ein Symbol deuten oder einen verborgenen Standardwert berücksichtigen zu müssen. Die Bestätigung der Einstellung speichert lediglich eine lokale Bestätigung. Die Seite fordert keine Kartennummer an, ruft kein Konto ab, erstellt keine Abrechnung und ändert keine Einstellung eines Finanzdienstes. Dadurch bleibt das Beispiel auf das Auswahl- und Feedbackverhalten des Designsystems fokussiert. Unterstützende Spezifikation lesen ## Visa Product Designsystem-Stile und das Visa-Theme werden separat importiert ### Die Struktur allein bildet nicht das gesamte Theme ab Die offizielle Installationsanleitung zeigt zuerst styles.css und danach themes/visa/index.css. Die erste Datei stellt die Komponenten- und Utility-Regeln bereit; die zweite liefert das Visa-Theme. Nur eine der beiden Dateien zu laden, ist keine vollständige Integration. Das eigenständige Beispiel und der Importausschnitt behalten beide diese Reihenfolge bei. Das geprüfte Paket hat die Version 1.6.5. Das Beispiel bettet sein CSS lokal ein, sodass beim Aufrufen keine Anfrage an ein Stylesheet eines Drittanbieters erforderlich ist. Entfernte @font-face-Deklarationen wurden entfernt und die Anwendung verwendet ausdrücklich eine Systemschrift als Fallback. Dies ist ein natives Nova-CSS mit offengelegtem Ersatz der Schriftart, keine Behauptung einer exakten Übereinstimmung mit der proprietären Schrift. Unterstützende Spezifikation lesen ## Visa Product Designsystem-Standard- und alternative Paletten enthalten jeweils passende Vordergrundfarben ### Eine Füllfarbe nicht ohne die zugehörige Textrolle übernehmen Die aktive Farbe des Standard-/hellen Themes ist #1434cb, bei Hover #173be8 und im gedrückten Zustand #0f2595. Die zugehörige Textfarbe auf der aktiven Fläche ist Weiß. Im alternativen Theme-Kontext ändert sich die Zuordnung der Rollen. Deshalb verwendet das Beispiel v-alternate auf der Kopfzeilenfläche, statt nur deren Hintergrund zu überschreiben. Akzentfarbe #fcc015 ist keine universelle Füllfarbe für Schaltflächen. Der Theme-Kontext bestimmt, wie Akzent- und Aktivrollen verwendet werden. Die Referenztabelle beschreibt die Standardpalette; die später im selben Stylesheet definierten dunklen und alternativen Werte werden nicht zu einer irreführenden einheitlichen Wertemenge zusammengefasst. Unterstützende Spezifikation lesen ## Visa Product Designsystem-rem-Skala im Verhältnis zum Theme-Stammverzeichnis lesen ### Ein 14-Pixel-Theme-Stammverzeichnis verändert die gewohnten rem-Annahmen Das Visa-Theme definiert eine Schriftgrößenbasis von 14 Pixeln. Der Wert für headline-1 von ungefähr 2.285714rem entspricht bei dieser Basis also 32 Pixeln und nicht dem Wert, der sich bei einer angenommenen Basis von 16 Pixeln ergibt. body-1 entspricht ungefähr 1.142857rem, body-2 dagegen 1rem. Skalierbare Größentokens geben einen Pixelwert multipliziert mit dem Skalierungsfaktor des Themes an. In responsiven Kontexten kann ein zweiter Faktor hinzukommen. Übernimm den Ausdruck, wenn du Abstände an eine Anwendung anpasst: Wird nur der standardmäßig berechnete Wert kopiert, geht dieser Zusammenhang verloren. Das Beispiel verwendet offizielle Gap-Hilfsklassen für die Häufigkeitsoptionen und ursprüngliche Anwendungsmaße für das gesamte geteilte Layout. Unterstützende Spezifikation lesen ## Visa Product Designsystem Native Radiobutton-Semantik mit Nova-Darstellung ### Ein gestalteter Kreis ist keine Radiogruppe Die öffentlichen Metadaten verwenden v-radio für ein echtes input type="radio" und verknüpfen es mit einem Label. Die Vorschau behält diese native Struktur bei und umschließt die sichtbare Beschreibung jeder Option mit ihrem Label. Mit den Pfeiltasten lässt sich innerhalb einer Gruppe navigieren; der Auswahlzustand bleibt für den Browser und unterstützende Technologien verfügbar. Ein Fieldset und eine Legende benennen jeweils eine Frage. Die Formatoptionen erläutern ihre Konsequenzen: Eine PDF-Datei ist eine herunterladbare Leseprobe, während HTML als umfließbarer Text beschrieben wird. Die konkreten Produktinhalte sind eigens erstellt; Aufbau und Klassen der Steuerelemente stammen aus der nativen Bibliothek. - Verwende für die beiden Formatoptionen denselben Namen und für die Häufigkeit einen anderen. - Halte den Radiowert getrennt vom sichtbaren Text, damit die Zusammenfassung ein dauerhaft eindeutiges Label verwenden kann. - Verwende für Zustände die Attribute checked und disabled statt nur eine dekorative Klasse. Unterstützende Spezifikation lesen ## Visa Product Designsystem Nova CSS gestaltet die Steuerelemente; das native HTML verwaltet die Auswahl ### Gruppierung und Prüfablauf gehören nicht ins Stylesheet Das Beispiel verwendet Novas Klasse v-radio für echte Radio-Inputs. Gemeinsame name-Attribute machen die Formatauswahl exklusiv; ein anderer Name trennt die Häufigkeitsgruppe. Fieldset und Legend liefern den Gruppenkontext, und ein zugeordnetes Label sorgt dafür, dass der vollständige Optionstext Teil des zugänglichen Namens des Steuerelements ist. Das Paket CSS wählt keine Option aus, verwaltet keine dauerhafte Speicherung in der Anwendung und erstellt keinen Prüfdatensatz. Das bereitgestellte Skript liest die beiden nativen Gruppen aus und erstellt eine lokale Zusammenfassung. Bei einer Änderung wird diese Zusammenfassung gelöscht, da die vorherigen Werte nicht mehr der aktuellen Auswahl entsprechen. Binde sowohl das strukturelle Stylesheet als auch das Visa-Theme in die Implementierung ein. Für den alternativen Header wird v-alternate verwendet; das Formular bleibt im standardmäßigen Farbkontext. Imitiere den Header nicht, indem du nur seinen Hintergrund änderst und die Rollen der Vordergrundfarben ungeklärt lässt. Unterstützende Spezifikation lesen ## Visa Product Designsystem Ein Lesefluss bei jeder Bildschirmbreite ### Verschiebe die Zusammenfassung, ohne die Aufgabenreihenfolge zu ändern Auf breiten Bildschirmen stehen die Auswahlgruppen und die Zusammenfassung der aktuellen Auswahl nebeneinander. Auf schmalen Bildschirmen folgt die Zusammenfassung auf das Formular. Die ursprüngliche Dokumentillustration entfällt, da sie keine Informationen zur Aufgabe beiträgt; alle Labels, Erläuterungen und Aktionen bleiben erhalten. Die Bibliothek CSS unterstützt moderne Evergreen-Browser. Die offiziellen Entwicklungshinweise versprechen keine Kompatibilität mit älteren Browsern. Ein Produktionsteam sollte daher die tatsächlich unterstützten Versionen testen, statt eine erfolgreiche Vorschau in einem modernen Browser als allgemeine Kompatibilitätsgarantie zu betrachten. 1. Binde die festgelegte strukturelle CSS und das Visa-Theme ein und ergänze anschließend die Layoutstile der Anwendung. 2. Wähle Accessible HTML und Quarterly aus, prüfe die Auswahl und vergewissere dich, dass beide in der Zusammenfassung erscheinen. 3. Ändere eine der beiden Auswahlen und bestätige, dass die Prüfbestätigung zurückgesetzt wird. Teste anschließend Reset und das schmale Layout. Unterstützende Spezifikation lesen ## Visa Product Designsystem – Beispiele für Designsystem-Komponenten ### Vollständige Nova CSS-Auswahl zusammenstellen Zwei native Radiogruppen aktualisieren sofort eine Zusammenfassung; die primäre Aktion setzt einen expliziten lokalen Prüfstatus. ``` Statement preference

ACCOUNT PREFERENCES / SAMPLE

Choose how you read
your statement.

One clear choice, with the details visible before you confirm.

Statement format

This page stores a demonstration preference only.

Summary frequency
``` Code-Referenz - CSS liefert die Darstellung der Komponenten; das kleine Skript ergänzt das Anwendungsverhalten. - Durch eine Änderung der Auswahl wird der vorherige Prüfstatus gelöscht. - Der alternative Header verwendet einen echten Theme-Kontext und ist keine handgemalte Nachbildung der Farbpalette. - Speichere die vollständige HTML als index.html und öffne sie in einem Browser, der auf die festgelegten öffentlichen CSS-URLs zugreifen kann. Die eingebettete Vorschau in dieser Anleitung hält diese Styles lokal. ### Struktur und Theme gemeinsam laden Importiere in einer gebündelten Anwendung beide Ebenen einmalig vor dem Stylesheet der Anwendung. ``` import '@visa/nova-styles/styles.css'; import '@visa/nova-styles/themes/visa/index.css'; import './application.css'; ``` Code-Referenz - Fehlt die Theme-Datei, können strukturelle Klassen vorhanden sein, ohne dass die vorgesehenen Visa-Tokens zur Verfügung stehen. ## Visa Product Designsystem – Agent einrichten ### Ausgangspunkt für die Implementierung Die vollständige HTML verwendet die verifizierten Pfade styles.css und themes/visa/index.css. Beide Dateien sind erforderlich. Im Iframe sind diese Styles lokal eingebettet; offizielle remote font-face-Deklarationen entfallen dort. ``` npm create vite@latest statement-preference -- --template vanilla cd statement-preference npm install npm install @visa/nova-styles@1.6.5 # Replace index.html with the complete example below. npm run dev ``` ### Ein Prompt für dein Projekt ``` Erstelle das Visa-Nova-Beispiel zur Auswahl des Abrechnungsformats mit der festgelegten strukturellen CSS und dem zugehörigen Theme. Behalte native Radiogruppen, aussagekräftige Legenden und zugeordnete Labels bei. Trenne die Rollen des Standard-Themes von denen des alternativen Themes und berücksichtige beim Lesen der rem-Werte die Schriftgrößenbasis von 14 px. Halte die Prüfung lokal, lösche nach Änderungen veraltete Bestätigungen und ordne die Zusammenfassung auf schmalen Bildschirmen unter dem Formular an. ``` ## Visa Product Designsystem – Quellen und Geltungsbereich Eigenständige OpenDesign-Anleitung mit nativen Nova-CSS. Diese fiktive Auswahlaufgabe verwendet keine Kontodaten und ändert keine Finanzdienstleistung. In der Vorschau wird auf Systemschriftarten als Ersatz hingewiesen. - Nova-Repository Offizielle Installationsanleitung und Einbindung des Themes. - Styles 1.6.5 Native Komponentenregeln und skalierbare Maße. - Visa-Theme 1.6.5 Exakte Farbpalette und Typografie des Themes. - Beispielmetadaten Verifizierter Aufbau der HTML-Klassen. - CSS – Erste Schritte Öffentliche Integrationshinweise. - Browserunterstützung Geltungsbereich der Evergreen-Unterstützung. ## Visa Product Designsystem – Verwandte Ressourcen ### Volvo Cars Web Designsystem Untersuche Volvos HTML-orientierte Web-Grundlage, die tatsächlichen Tokens für den hellen Modus und das native Styling auswählbarer Karten anhand eines vollständigen Beispiels zur Packungsplanung mit unabhängigen Auswahlmöglichkeiten, Theme-Wechsel und Zurücksetzen. ### Wonderflow Wanda Verwenden Sie Wandas echte Theme-Rollen und Token-Syntax in einem vollständigen Arbeitsbereich zum Lesen von Feedback – mit Themenfiltern, aufklappbarem Belegkontext und einem dauerhaft verfügbaren lokalen Notizbuch. ### Workday Canvas Erstelle einen lokalen Lernplan mit Canvas Kits zusammengesetztem FormField, einem kontrollierten TextInput und PrimaryButton. Unterscheide dabei zwischen aktuellen semantischen Token-Quellen und älteren space.x4-Migrationsbeispielen. - [Implementierungsreferenz](https://github.com/visa/nova-styles) - [Quelle](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Quelle](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Quelle](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Quelle](https://design.visa.com/components/radio/) - [Unterstützende Spezifikation lesen](https://design.visa.com/components/radio/) - [Unterstützende Spezifikation lesen](https://github.com/visa/nova-styles) - [Unterstützende Spezifikation lesen](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Unterstützende Spezifikation lesen](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Unterstützende Spezifikation lesen](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Unterstützende Spezifikation lesen](https://design.visa.com/developing/) - [Code-Referenz](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Code-Referenz](https://github.com/visa/nova-styles) - [Nova-Repository Offizielle Installationsanleitung und Einbindung des Themes.](https://github.com/visa/nova-styles) - [Styles 1.6.5 Native Komponentenregeln und skalierbare Maße.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Visa-Theme 1.6.5 Exakte Farbpalette und Typografie des Themes.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Beispielmetadaten Verifizierter Aufbau der HTML-Klassen.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [CSS – Erste Schritte Öffentliche Integrationshinweise.](https://design.visa.com/developing/styles-css/) - [Browserunterstützung Geltungsbereich der Evergreen-Unterstützung.](https://design.visa.com/developing/)