Usa Nova CSS de Visa para crear una preferencia clara de formato de extracto, con controles de opción nativos, un encabezado de color alternativo y un resumen para revisar. Examina los valores exactos del tema 1.6.5, el espaciado escalable y la integración completa de la hoja de estilos.
CSS nativo de @visa/nova-styles 1.6.5 y tema de Visa integrados localmente; se eliminaron las reglas remotas de font-face y se usan fuentes del sistema. Diseño original de la aplicación y script local. · Referencia de implementación
02
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.
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.
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.
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.
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.
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.
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.
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.
Carga CSS estructural y el tema Visa, ambos fijados, y luego añade los estilos de disposición de la aplicación.
Selecciona Accessible HTML y Trimestral, revisa la preferencia y comprueba que ambas opciones aparezcan en el resumen.
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.
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.
Si falta el archivo del tema, puede que las clases estructurales estén presentes sin los tokens de Visa previstos.
04
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.
shell / html
npm create vite@latest statement-preference -- --template vanilla
cd statement-preference
npm install
npm install @visa/[email protected]
# Replace index.html with the complete example below.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
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.
05
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.
