# Sistema de diseño Visa Product ## Vista previa de la interfaz sistema de diseño Visa Product Selecciona un formato y una frecuencia, revisa la preferencia local y restablécela. ## Referencia de diseño sistema de diseño Visa Product Estilos publicados de @visa/nova-styles 1.6.5, tema de Visa y metadatos de ejemplo. Los valores predeterminados/claros se separan de las variantes alternativas y oscuras. La vista previa integra localmente CSS oficial y elimina las reglas remotas de font-face, usando una fuente de sistema como alternativa. ### Paleta predeterminada | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --palette-default-active | #1434cb | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-active-hover | #173be8 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-active-pressed | #0f2595 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-active-accent | #fcc015 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-surface-1 | #ffffff | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-surface-2 | #f5f5f5 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-surface-3 | #f0f0f0 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-text | #000000 | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-text-subtle | #4a4a4a | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-text-on-active | #ffffff | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --palette-default-border | rgba(0, 0, 0, 0.1) | Referencia del tema predeterminado/claro de Visa 1.6.5. | ### Tamaño y tipografía del tema | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --theme-font-size | 14px | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --theme-border-radius | 6px | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-headline-1-font-size | 2.2857142857rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-headline-2-font-size | 1.7857142857rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-headline-3-font-size | 1.4285714286rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-body-1-font-size | 1.1428571429rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-body-2-font-size | 1rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | | --typography-body-3-font-size | 0.8571428571rem | Referencia del tema predeterminado/claro de Visa 1.6.5. | ### Dimensiones escalables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --size-scalable-4 | calc(4px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-8 | calc(8px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-12 | calc(12px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-16 | calc(16px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-24 | calc(24px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-32 | calc(32px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | | --size-scalable-40 | calc(40px * var(--theme-scale-factor)) | Dimensión escalable base; los contextos adaptables pueden aplicar un factor adicional. | ### Clases publicadas de utilidades y componentes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | v-flex | Flex layout | Elemento padre necesario para los ejemplos de separación. | | v-gap-20 | Gap utility | Se muestra en el ejemplo oficial de separación predeterminada. | | v-col-gap-20 | Column gap utility | Separa las columnas. | | v-button | Primary button | Usa un elemento de botón nativo. | | v-button-secondary | Secondary modifier | Acción de restablecimiento de apoyo en el ejemplo. | | v-radio | Native radio style | Conserva el mismo nombre y valores distintos. | | v-label | Label style | Mantén una etiqueta asociada o envolvente. | | v-alternate | Alternate palette context | Se muestra sobre una superficie o un botón. | | v-typography-headline-1 | Headline visual role | Aplícalo al h1 semántico de esta página. | ### Contrato de composición | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Radio group | One shared name per question | El formato y la frecuencia son grupos independientes. | | fieldset / legend | Group question | Indica qué pregunta responden las opciones. | | checked | Native selected state | No uses CSS por sí solo para seleccionar. | | disabled | Native unavailable state | Conserva una explicación visible si la opción no está disponible. | | aria-describedby | Optional supporting description | Vincula el texto adicional cuando no forme parte de la etiqueta. | ## Guía completa de sistema de diseño Visa Product Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Sistema de diseño Visa Product: una tarea de preferencias con un estado de revisión fácil de leer ### Haz que cada pregunta sea independiente > El ejemplo pregunta por el formato del extracto y la frecuencia del resumen. Son grupos de opciones independientes: cambiar la frecuencia no deselecciona el formato. El resumen repite ambas opciones antes de la acción principal, para que el usuario pueda revisar el resultado sin tener que interpretar un icono ni un valor predeterminado oculto. Revisar la preferencia solo registra una confirmación local. La página no solicita un número de tarjeta, accede a una cuenta, genera un extracto ni cambia la configuración de un servicio financiero. Así, el ejemplo se centra en el comportamiento de selección y respuesta del sistema de diseño. Consulta la especificación complementaria ## Sistema de diseño Visa Product: los estilos de Nova y el tema de Visa se importan por separado ### La estructura no constituye todo el tema La instalación oficial muestra primero styles.css y después themes/visa/index.css. El primero aporta las reglas de componentes y utilidades; el segundo, el tema de Visa. Cargar solo uno da lugar a una integración incompleta. Tanto el ejemplo independiente como el fragmento de importación conservan ese orden. La versión comprobada del paquete es la 1.6.5. El ejemplo integra localmente su CSS, de modo que no depende de una solicitud de hoja de estilos a terceros al visualizarse. Se eliminan las declaraciones remotas de font-face y la aplicación usa explícitamente una fuente de sistema como alternativa; se trata de CSS nativo de Nova con una sustitución de fuente declarada, no de una afirmación de equivalencia exacta con la fuente propietaria. Consulta la especificación complementaria ## Sistema de diseño Visa Product: las paletas predeterminada y alternativa combinan colores de primer plano con sus respectivos fondos ### No traslades un color de relleno sin su función de texto El color activo predeterminado/claro es #1434cb, #173be8 al pasar el puntero y #0f2595 al presionar. El color del texto sobre el estado activo es blanco. El contexto del tema alternativo cambia la asignación de funciones; por eso el ejemplo usa v-alternate en la superficie del encabezado en lugar de sobrescribir solo el fondo. El color de acento #fcc015 no es un color de relleno universal para botones. El contexto del tema determina cómo se usan las funciones de acento y de estado activo. La tabla de referencia describe la paleta predeterminada; las definiciones posteriores de los temas oscuro y alternativo en la misma hoja de estilos no se combinan en un único conjunto de valores engañoso. Consulta la especificación complementaria ## Sistema de diseño Visa Product: interpreta la escala rem con respecto a la raíz del tema ### Una raíz del tema de 14 píxeles cambia las suposiciones habituales sobre rem El tema Visa define un tamaño de fuente raíz de 14 píxeles. Por lo tanto, el valor de headline-1, de aproximadamente 2.285714rem, equivale a 32 píxeles con ese tamaño raíz, no al valor que se obtendría suponiendo un tamaño raíz de 16 píxeles. body-1 es aproximadamente 1.142857rem, mientras que body-2 es 1rem. Los tokens de tamaño escalable expresan una cantidad en píxeles multiplicada por el factor de escala del tema. En contextos adaptables puede incorporarse un segundo factor. Conserva la expresión al adaptar el espaciado a una aplicación; copiar solo el número calculado predeterminado pierde esa relación. El ejemplo usa las utilidades oficiales de separación en los controles de frecuencia y dimensiones originales de la aplicación para la disposición dividida general. Consulta la especificación complementaria ## Sistema de diseño Visa Product Semántica de botones de opción nativos con la presentación de Nova ### Un círculo con estilo no es un grupo de botones de opción Los metadatos públicos colocan v-radio en un input type="radio" real y lo vinculan con una etiqueta. La vista previa conserva esa estructura nativa y envuelve en la etiqueta la descripción visible de cada opción. Las flechas del teclado permiten desplazarse por el grupo, y el estado seleccionado sigue estando disponible para el navegador y las tecnologías de asistencia. Un fieldset y un legend identifican cada pregunta. Las opciones de formato explican sus consecuencias: un PDF es una muestra descargable, mientras que HTML se describe como adaptable al flujo del texto. El contenido específico del producto es original; la estructura de los controles y las clases provienen de la biblioteca nativa. - Usa un nombre para las dos opciones de formato y otro para la frecuencia. - Mantén el valor del botón de opción separado del texto visible para que el resumen pueda usar una etiqueta estable. - Usa los atributos checked y disabled para indicar el estado, en lugar de depender únicamente de una clase decorativa. Consulta la especificación complementaria ## Sistema de diseño Visa Product Nova CSS aplica estilos a los controles; HTML nativo gestiona la selección ### Mantén la agrupación y la lógica de revisión fuera de la hoja de estilos El ejemplo usa la clase v-radio de Nova en botones de opción reales. Los atributos name compartidos hacen que las opciones de formato sean excluyentes, mientras que otro nombre distinto separa el grupo de frecuencia. Fieldset y legend proporcionan el contexto del grupo; una etiqueta asociada integra el texto completo de la opción en el nombre accesible del control. El paquete CSS no elige una opción, no gestiona la persistencia de la aplicación ni crea un registro de revisión. El script proporcionado lee los dos grupos nativos y genera un resumen local. Cualquier cambio borra ese resumen, ya que los valores anteriores dejan de describir la preferencia actual. Incluye en la implementación tanto la hoja de estilos estructural como el tema Visa. El encabezado alternativo usa v-alternate, mientras que el formulario mantiene el contexto de color predeterminado; no imites el encabezado cambiando solo el fondo y dejando sin resolver los roles del primer plano. Consulta la especificación complementaria ## Sistema de diseño Visa Product Un único orden de lectura en todos los anchos ### Mueve el resumen sin cambiar la secuencia de la tarea En pantallas anchas, los grupos de opciones y el resumen de la selección actual aparecen uno al lado del otro. En pantallas pequeñas, el resumen va después del formulario. La ilustración original del documento desaparece porque no aporta información a la tarea, mientras que se mantienen todas las etiquetas, explicaciones y acciones. La biblioteca CSS es compatible con los navegadores modernos de actualización automática. La documentación oficial de desarrollo no garantiza la compatibilidad con navegadores antiguos, por lo que los equipos de producción deben probar las versiones que admiten realmente, en lugar de asumir que una vista previa moderna que funciona garantiza compatibilidad universal. 1. Carga CSS estructural y el tema Visa, ambos fijados, y luego añade los estilos de disposición de la aplicación. 2. Selecciona Accessible HTML y Trimestral, revisa la preferencia y comprueba que ambas opciones aparezcan en el resumen. 3. Cambia cualquiera de las opciones, confirma que se restablezca la indicación de revisión y, luego, prueba Restablecer y la disposición en una pantalla estrecha. Consulta la especificación complementaria ## Ejemplos de componentes del sistema de diseño de sistema de diseño Visa Product ### Composición completa de preferencias con Nova CSS Dos grupos nativos de botones de opción actualizan un resumen al instante; la acción principal crea un estado de revisión local explícito. ``` 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
``` Referencia de código - CSS proporciona la presentación de los componentes; el pequeño script aporta el comportamiento de la aplicación. - Al cambiar una preferencia, se borra el estado de revisión anterior. - El encabezado alternativo es un contexto de tema real, no una imitación de la paleta pintada a mano. - Guarda el HTML completo como index.html y ábrelo en un navegador con acceso a las URL públicas fijadas de CSS. La vista previa integrada en esta guía mantiene esos estilos en local. ### Carga juntos la estructura y el tema En una aplicación compilada, importa ambas capas una sola vez antes de la hoja de estilos de la aplicación. ``` import '@visa/nova-styles/styles.css'; import '@visa/nova-styles/themes/visa/index.css'; import './application.css'; ``` Referencia de código - Si falta el archivo del tema, puede que las clases estructurales estén presentes sin los tokens de Visa previstos. ## Configuración del agente de sistema de diseño Visa Product ### Punto de partida para la implementación El HTML completo usa las rutas verificadas styles.css y themes/visa/index.css. Ambas son necesarias. El iframe incorpora estos estilos localmente; allí se omiten las declaraciones oficiales de font-face remoto. ``` 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 ``` ### Una instrucción para tu proyecto ``` Crea el ejemplo de preferencias de estado de cuenta de Visa Nova con CSS estructural y de tema, fijados. Conserva los grupos nativos de botones de opción, los títulos de grupo claros y las etiquetas asociadas. Separa los roles del tema predeterminado de los del alternativo y ten en cuenta el tamaño raíz de 14 px al interpretar los valores rem. Mantén la revisión en local, borra las confirmaciones obsoletas tras los cambios y apila el resumen en pantallas pequeñas. ``` ## Fuentes y alcance de sistema de diseño Visa Product Guía independiente de OpenDesign con Nova CSS nativo. Esta tarea ficticia sobre preferencias no usa datos de la cuenta ni modifica ningún servicio financiero. La vista previa informa de que sustituye la fuente del sistema. - Repositorio de Nova Instrucciones oficiales de instalación y carga del tema. - Styles 1.6.5 Reglas de componentes nativos y dimensiones escalables. - Tema Visa 1.6.5 Paleta y tipografía exactas del tema. - Metadatos del ejemplo Estructura de clases de HTML verificada. - CSS: primeros pasos Guía pública de integración. - Compatibilidad con navegadores Límites de compatibilidad con navegadores modernos de actualización automática. ## Recursos relacionados con sistema de diseño Visa Product ### Volvo Cars Web sistema de diseño Examina la base web de Volvo Cars, centrada en HTML, sus tokens reales del modo claro y el estilo nativo de las tarjetas seleccionables mediante un ejemplo completo de plan de equipaje, con opciones independientes, cambio de tema y restablecimiento. ### Wonderflow Wanda Usa los roles de tema y la sintaxis de tokens reales de Wanda en un espacio de trabajo completo para leer comentarios, con filtros por tema, contexto de evidencia desplegable y un cuaderno local persistente. ### Workday Canvas Crea un plan de aprendizaje local con el FormField compuesto, el TextInput controlado y el PrimaryButton de Canvas Kit, y distingue las fuentes actuales de tokens semánticos de los ejemplos de migración antiguos de space.x4. - [Referencia de implementación](https://github.com/visa/nova-styles) - [Fuente](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Fuente](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Fuente](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Fuente](https://design.visa.com/components/radio/) - [Consulta la especificación complementaria](https://design.visa.com/components/radio/) - [Consulta la especificación complementaria](https://github.com/visa/nova-styles) - [Consulta la especificación complementaria](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Consulta la especificación complementaria](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Consulta la especificación complementaria](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Consulta la especificación complementaria](https://design.visa.com/developing/) - [Referencia de código](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [Referencia de código](https://github.com/visa/nova-styles) - [Repositorio de Nova Instrucciones oficiales de instalación y carga del tema.](https://github.com/visa/nova-styles) - [Styles 1.6.5 Reglas de componentes nativos y dimensiones escalables.](https://unpkg.com/@visa/nova-styles@1.6.5/styles.css) - [Tema Visa 1.6.5 Paleta y tipografía exactas del tema.](https://unpkg.com/@visa/nova-styles@1.6.5/themes/visa/index.css) - [Metadatos del ejemplo Estructura de clases de HTML verificada.](https://unpkg.com/@visa/nova-styles@1.6.5/data.json) - [CSS: primeros pasos Guía pública de integración.](https://design.visa.com/developing/styles-css/) - [Compatibilidad con navegadores Límites de compatibilidad con navegadores modernos de actualización automática.](https://design.visa.com/developing/)