# Sistema de diseño VA ## Vista previa de la interfaz de sistema de diseño VA Explora tres estados ilustrativos del proceso y abre una explicación complementaria sin ocultar el resumen del paso. ## Referencia de diseño de sistema de diseño VA Variables publicadas de css-library 0.36.1 y dependencia web-components 24.14.0 de component-library 56.14.0. Las fuentes son alternativas locales explícitas. El contenedor de muestra de 52rem es una elección de la aplicación. ### Tipografía semántica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --vads-font-family-heading | Bitter, Georgia, Cambria, Times New Roman, Times, serif | Familia para encabezados; la vista previa usa Georgia. | | --vads-font-family-sans | Source Sans Pro Web / Source Sans Pro, system sans fallbacks | Familia para el cuerpo y la interfaz; la vista previa usa Arial. | | --vads-font-size-body-default | 1.06rem (about 17px) | Prefiere el rol semántico a source-sans-normalized. | | --vads-font-size-heading-level-1 / 2 / 3 | 2.5 / 2 / 1.25rem | 40 / 32 / 20px con una raíz de 16px. | | --vads-font-size-heading-level-4 / 5 / 6 | 1.063 / .938 / .938rem | Aproximadamente 17 / 15 / 15px. | | --vads-font-line-height-default / heading / body-lead | 1.5 / 1.2 / 1.75 | Usa el rol de texto correspondiente. | ### Espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --vads-spacing-inset-s / m / l | 1 / 1.5 / 2rem | 16 / 24 / 32px. | | --vads-spacing-vertical-stack-default | 1rem / 16px | Pila vertical general. | | --vads-forms-spacing-vertical-stack-default | 2rem / 32px | Pila de campos de formulario. | | --vads-spacing-0p5 / 1 / 1p5 / 2 / 2p5 / 3 | 4 / 8 / 12 / 16 / 20 / 24px | Escala primitiva con tamaño de raíz estándar. | | --vads-spacing-4 / 5 / 6 / 7 / 8 | 32 / 40 / 48 / 56 / 64px | Valores primitivos mayores. | ### Color semántico | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --vads-color-text | #1b1b1b | Rol de texto predeterminado recomendado. | | --vads-color-link / link-active | #005ea2 / #0b4778 | Roles predeterminados y activos para enlaces. | | --vads-color-primary-darker | #162e51 | Referencia de superficie principal de énfasis alto. | | --vads-color-base-lighter / base-lightest | #dfe1e2 / #f0f0f0 | Divisores y fondos neutros. | | --vads-color-error | #d54309 | Usa la semántica de error en lugar del rojo secundario obsoleto. | | --vads-color-success-darker | #216e1f | Referencia más oscura para éxito; el estado también requiere palabras. | ### Puntos de ruptura adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --vads-breakpoint-mobile / mobile-lg | 320 / 480px | Límites de referencia para pantallas pequeñas. | | --vads-breakpoint-tablet / tablet-lg | 640 / 880px | Diseños intermedios. | | --vads-breakpoint-desktop / desktop-lg | 1024 / 1201px | Límites para escritorio. | | --vads-breakpoint-widescreen | 1400px | Referencia de diseño ancho. | ## Guía completa de sistema de diseño VA 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 VA Un sistema de servicios para veteranos ### Los fundamentos y los componentes son paquetes independientes > El sistema de VA combina patrones de servicio, pautas de contenido, tokens, utilidades de CSS y Web Components. La instalación documentada usa un paquete CSS-library para los fundamentos globales y un paquete component-library para los elementos interactivos. Esta referencia combina component-library 56.14.0 con css-library 0.36.1; ambos paquetes tienen números de versión independientes. El ejemplo es una explicación ficticia sobre una solicitud de registros. Muestra cómo una lista de procesos comunica el progreso, sin afirmar que se haya presentado una solicitud ni que alguien reúna los requisitos para recibir una prestación. No incluye el logotipo de VA, un banner de identidad gubernamental, datos personales ni el estado de un caso real. El contenido de producción de un servicio aún debe verificarse con el programa de VA responsable. Consulta la especificación complementaria ## Sistema de diseño VA Roles tipográficos semánticos ### Las familias para el cuerpo y los encabezados son deliberadamente distintas La familia semántica para encabezados es Bitter, con Georgia y otras fuentes serif como alternativas. La pila para el cuerpo empieza con Source Sans Pro Web y Source Sans Pro, seguidas de fuentes sans serif de la plataforma. El rol predeterminado para el cuerpo es 1.06rem, aproximadamente 17px con una raíz de 16px; los encabezados usan 40px para el nivel 1, 32px para el nivel 2, 20px para el nivel 3 y aproximadamente 17px para el nivel 4. Usa --vads-font-size-body-default en lugar del nombre anterior source-sans-normalized. El token semántico expresa el rol, mientras que el nombre de normalización anterior revela un detalle de implementación de la fuente. La vista previa usa explícitamente Arial para el texto del cuerpo y Georgia para los encabezados. El componente de proceso nativo CSS sigue controlando su estructura interna y sus tamaños; esta fuente alternativa no pretende reproducir las métricas exactas de Source Sans y Bitter. Consulta la especificación complementaria ### La altura de línea depende del rol La altura de línea predeterminada es 1.5 para los párrafos y 1.2 para los encabezados. El texto introductorio del cuerpo tiene un rol de 1.75; el token de altura de línea serif es 1.9 y está pensado para texto corrido serif, no para todos los encabezados serif. Asignar 1.9 a un encabezado compacto de proceso confundiría dos roles distintos. Los elementos de proceso de esta muestra usan el nivel 3 debajo del título de sección de nivel 2 de la página. Consulta la especificación complementaria ## Sistema de diseño VA Espaciado y diseño semánticos ### Distingue una pila común de una pila de formulario El valor predeterminado de la pila vertical general es 1rem/16px. El valor predeterminado de la pila vertical de formularios es 2rem/32px. Esta diferencia es útil: dos breves elementos explicativos necesitan un ritmo distinto al de preguntas separadas con etiquetas, indicaciones, controles y errores. Los valores de inserción s, m y l corresponden a 16, 24 y 32px, respectivamente. La escala de espaciado primitivo incluye 4, 8, 12, 16, 20 y 24px, además de incrementos de ocho píxeles y valores especiales de uno y dos píxeles. Prefiere los nombres semánticos de espaciado cuando su propósito coincida con el diseño. El contenedor exterior de 52rem del ejemplo es una decisión de la aplicación, mientras que el margen interior de 24px y la separación de 32px entre secciones usan valores publicados de la escala. No impone ese contenedor a todas las plantillas de páginas de VA. Consulta la especificación complementaria ## Sistema de diseño VA Colores y tokens adaptables ### Usa un rol en lugar de un alias histórico El token de texto actual es --vads-color-text (#1b1b1b). --vads-color-link es #005ea2 y el rol de enlace activo es #0b4778; no son iguales a todas las entradas más oscuras de la familia principal. El rol de error es #d54309. La familia roja secundaria heredada está obsoleta para este propósito, así que un nuevo tratamiento de validación debe referirse a la semántica de error, no a la secundaria. Las tablas de valores primitivos y semánticos se generan a partir de una versión específica de CSS-library. El ejemplo carga esas variables reales en lugar de copiar una paleta antigua de USWDS y etiquetarla como VA. Sus componentes nativos pueden incluir valores compilados propios además de esas variables; verifica ambas capas al actualizar. Consulta la especificación complementaria ### Los puntos de quiebre de VA no son una escala genérica de framework El conjunto de tokens define los siguientes puntos de quiebre: móvil, 320px; móvil grande, 480px; tableta, 640px; tableta grande, 880px; escritorio, 1024px; escritorio grande, 1201px; y pantalla panorámica, 1400px. El umbral inusual de 1201px es importante al adaptar plantillas existentes. Las variables de puntos de quiebre documentan los valores; las propiedades personalizadas de CSS no se pueden sustituir directamente dentro de una condición de media query nativa. Usa el valor correspondiente en tiempo de compilación o un valor literal derivado del token verificado. Consulta la especificación complementaria ## Sistema de diseño VA Anatomía de la lista de procesos ### De tres a diez pasos significativos La lista de procesos de VA también se describe como un mapa de metro. Explica un proceso largo o indica en qué punto se encuentra una persona. Las pautas recomiendan de tres a diez pasos y solo una lista de este tipo por página. Cada elemento necesita un encabezado conciso que empiece con un verbo y contenido explicativo visible; no es un número decorativo junto a un título sin contenido. Las etiquetas nativas son va-process-list y va-process-list-item. Un elemento admite header y level, además de active, pending, checkmark y status-text. El módulo publicado del componente da prioridad a checkmark, luego a active y después a pending. Evita combinaciones contradictorias desactivando los otros estados booleanos al establecer uno. El texto de estado explícito acompaña el estilo del estado y permite entender la etapa sin depender del color. ```

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.

 ``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño VA Details permite mostrar un paso ### No conviertas cada paso en un acordeón Las pautas del proceso no permiten combinar el encabezado de un acordeón con un paso del proceso. Ocultar todas las explicaciones va en contra del propósito de mostrar el proceso. Sí permiten incluir un componente Details dentro de un paso para mostrar información complementaria. El ejemplo mantiene visible la explicación sobre la identificación del registro y coloca una ampliación opcional en va-details. El atributo label del componente se convierte en la pregunta visible del panel desplegable. Una pregunta breve es más útil que «Más información», porque indica a los lectores si el contenido oculto les será pertinente. En este ejemplo, los detalles explican qué podría ayudar a identificar un registro e incluyen una nota explícita de que son opciones de contenido ilustrativas, no instrucciones para un procedimiento específico de VA. - Mantén visible un resumen de cada etapa, incluidas las etapas marcadas como Pendiente. - Usa un panel Details solo para una explicación secundaria dentro de una etapa. - Mantén la siguiente acción real del servicio fuera del encabezado del proceso, en lugar de convertir el encabezado en un control. Consulta la especificación complementaria ## Sistema de diseño VA Demostración de estados y veracidad ### Usa un selector de escenarios, no un progreso ficticio El selector de etapas de ejemplo de la vista previa cambia el ejemplo del componente entre preparación, envío y revisión de la respuesta. No hace avanzar una solicitud real, calcula un tiempo oficial de procesamiento ni infiere que el proceso se completó porque alguien hizo clic en un botón. Un servicio activo debe asignar los estados verificados del backend a estos estados visuales y explicar por separado el significado de cualquier demora. Al cambiar el selector, las etapas anteriores pasan a Completada, la etapa seleccionada pasa a Activa y las posteriores quedan como Pendiente. Un mensaje de estado dinámico anuncia el cambio de estado del ejemplo. Las tres explicaciones permanecen visibles y se conserva el estado opcional de Details. Restablecer vuelve a la primera etapa ilustrativa y cierra el panel complementario. Consulta la especificación complementaria ## Sistema de diseño VA Carga componentes web nativos ### Regístralos una sola vez y conserva las dependencias La ruta documentada del empaquetador importa main.css y llama a defineCustomElements desde el paquete component-library. Las fuentes provienen de CSS-library y se distribuyen por separado. Los componentes que usan el sprite de iconos necesitan una ruta al sprite del mismo origen; de forma predeterminada, /img/sprite.svg. Son requisitos reales de integración, no detalles opcionales que se puedan descubrir después de la implementación. El ejemplo independiente usa el punto de entrada ESM oficial para navegadores de web-components 24.14.0, la dependencia declarada por component-library 56.14.0, además de los módulos diferidos específicos de Process List, Process List Item y Details. El script de la aplicación solo selecciona los estados de ejemplo. El entorno de ejecución del navegador proporciona el comportamiento de los elementos personalizados nativos, incluido el control Details. 1. Carga el token CSS correspondiente y el punto de entrada de componentes para navegador, conservando las rutas relativas de los módulos. 2. Espera a que se defina va-process-list-item antes de asignar las propiedades de estado de ejemplo. 3. Prueba todos los estados de los escenarios, el control de teclado de Details y los anchos reducidos sin ocultar el contenido explicativo. Consulta la especificación complementaria ## Sistema de diseño VA Ejemplos de componentes del sistema de diseño ### Una explicación nativa en tres etapas Atributos reales de Web Components y un panel Details permitido dentro de un paso. ```

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.

 ``` Referencia de código - Usa entre 3 y 10 pasos y una sola lista de procesos por página. - No sustituyas los encabezados de los pasos por controles de acordeón. - Establece solo una marca de estado en cada elemento. ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante HTTP. ``` Request journey — VA component specimen

VA native component example

Understand a request journey

See how a service can explain preparation, sending a request, and reviewing its response.

Fictional process for design exploration. These are not VA submission instructions or a real case status.

Example: preparing a request.

The three stages

Identify the record you need and the office that holds it.

A title, approximate date, or reference number can help distinguish similar records. This is illustrative content, not a VA records-request procedure.

In this example, a request is ready for the appropriate service. No request is sent from this page.

A real service should explain where a response appears and how to ask about missing information.
``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Sistema de diseño VA Configuración del agente ### Punto de partida para la implementación Inicialización documentada del empaquetador con versiones de paquetes verificadas. El ejemplo independiente para navegador usa la distribución ESM correspondiente de componentes web nativos, en lugar de una compilación de React. El ZIP con el ejemplo completo y funcional, disponible en Sources, también incluye las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/va.html. No abras ejemplos basados en módulos mediante file://. ``` // Install in an application with a JavaScript bundler: // npm install @department-of-veterans-affairs/component-library@56.14.0 \ // @department-of-veterans-affairs/css-library@0.36.1 import '@department-of-veterans-affairs/component-library/dist/main.css'; import '@department-of-veterans-affairs/css-library/dist/tokens/css/variables.css'; import { defineCustomElements } from '@department-of-veterans-affairs/component-library'; defineCustomElements(); // Render the va-process-list markup in your page after this initialization. // Deliver the CSS-library fonts separately, or choose an explicit fallback. // Components that use va-icon also require the same-origin /img/sprite.svg. ``` ### Una instrucción para tu proyecto ``` Crea una explicación del proceso de servicio de VA con un elemento va-process-list que contenga de tres a diez elementos va-process-list-item. Usa encabezados que comiencen con verbos, level=3 debajo de un h2, descripciones visibles y un único estado activo, pendiente o con marca de verificación por elemento, con status-text explícito. Usa va-details solo para texto complementario dentro de un paso; nunca ocultes el paso completo. Importa el archivo actual de tokens VADS CSS y registra los componentes nativos. Mantén el cuerpo de texto de 17px, las funciones de las familias Bitter/Source Sans, el espaciado semántico y los puntos de corte de 320/480/640/880/1024/1201/1400px. Toda muestra interactiva debe indicar que sus etapas son ilustrativas y nunca hacerse pasar por una solicitud de VA enviada. ``` ## Fuentes y alcance de sistema de diseño VA Demostración técnica de componentes con etapas ficticias de solicitud de registros. No representa ninguna solicitud real a VA, estado de caso, decisión sobre prestaciones ni respaldo institucional. - VA Design System Fundamentos, contenido, componentes y gobernanza oficiales. - Patrones de VA Patrones para tareas de solicitud, datos precompletados, firmas y recuperación. - Componentes de VA Especificaciones de componentes, decisiones y material de accesibilidad. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Recursos relacionados con sistema de diseño VA ### W3C sistema de diseño Crea interfaces de lectura adaptables con tipografía fluida, roles de color semánticos y contenido plegable nativo que sigue siendo legible sin JavaScript. ### Codex Usa la estructura real de SearchInput de Codex, su jerarquía de acciones y sus tokens orientados a la lectura. Busca en un índice local de artículos, consulta un resultado y vuelve a la misma posición de lectura. ### Agriculture sistema de diseño Crea transacciones de servicio más largas con el espaciado concreto de AgDS, sus propiedades adaptables y su modelo de estado de TaskList. Prueba un flujo de preparación en el que el paso de revisión se habilita solo cuando se completan los requisitos previos. - [Referencia de implementación](https://design.va.gov/components/process-list) - [Fuente](https://design.va.gov/foundation/design-tokens/typography) - [Fuente](https://design.va.gov/foundation/design-tokens/spacing) - [Fuente](https://design.va.gov/foundation/design-tokens/color) - [Fuente](https://design.va.gov/foundation/design-tokens/breakpoints) - [Consulta la especificación complementaria](https://design.va.gov/about/developers/install) - [Consulta la especificación complementaria](https://design.va.gov/foundation/design-tokens/typography) - [Consulta la especificación complementaria](https://design.va.gov/foundation/design-tokens/spacing) - [Consulta la especificación complementaria](https://design.va.gov/foundation/design-tokens/color) - [Consulta la especificación complementaria](https://design.va.gov/foundation/design-tokens/breakpoints) - [Referencia de código](https://design.va.gov/components/process-list) - [Consulta la especificación complementaria](https://design.va.gov/components/process-list) - [VA Design System Fundamentos, contenido, componentes y gobernanza oficiales.](https://design.va.gov/) - [Patrones de VA Patrones para tareas de solicitud, datos precompletados, firmas y recuperación.](https://design.va.gov/patterns/) - [Componentes de VA Especificaciones de componentes, decisiones y material de accesibilidad.](https://design.va.gov/components/)