# Sistema de diseño USWDS

## Vista previa de la interfaz del sistema de diseño USWDS

Busca y filtra registros ficticios, recupérate cuando no haya resultados y despliega paneles nativos de requisitos.

## Referencia de diseño del sistema de diseño USWDS

Distribución de componentes nativos de USWDS 3.14.0. Tokens predeterminados según la documentación oficial; las sustituciones tipográficas de la vista previa son decisiones locales explícitas.

### Unidades de espaciado

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| 0.5 / 05 | 4px | Espaciado de media unidad y formulario de utilidades |
| 1 | 8px | Unidad base de espaciado |
| 1.5 / 105 | 12px | Espaciado intermedio |
| 2 | 16px | Relleno interior compacto |
| 3 | 24px | Separación entre contenidos relacionados |
| 4 | 32px | Espaciado entre secciones |
| 5 | 40px | Separación mayor |
| 6 | 48px | Espaciado amplio |
| tablet | 640px | Token de anchura con nombre |
| desktop | 1024px | Token de anchura con nombre |
### Asignación tipográfica predeterminada

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| sans | source-sans-pro | Token de familia tipográfica según el tipo |
| serif | merriweather | Token de familia tipográfica según el tipo |
| body / ui | sans | Asignación basada en roles |
| heading | serif | Asignación basada en roles |
| code | mono → roboto-mono | Asignación del rol de código |
### Colores predeterminados del tema

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| primary | blue-60v / #005ea2 | Alias principal |
| primary-lighter | blue-10 / #d9e8f6 | Matiz complementario del color primario |
| primary-dark | blue-warm-70v / #1a4480 | Alias del color primario oscuro |
| ink | gray-90 / #1b1b1b | Alias del texto principal |
### Contratos de componentes

| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| aria-controls | Panel ID | Vincula cada botón de acordeón con su contenido. |
| aria-expanded | true / false | JS nativo mantiene el estado abierto. |
| data-allow-multiple | Accordion root attribute | Permite mantener abiertos los paneles de forma independiente. |
| usa-accordion--bordered | Root modifier | Ofrece la variante con bordes. |
## Guía completa del sistema de diseño USWDS

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 USWDS: un Foundation configurable

### Los tokens predeterminados son una configuración inicial

> USWDS separa los tokens del sistema, la configuración del tema del proyecto, las clases de utilidad y los componentes. La referencia siguiente recoge las opciones de tema predeterminadas de la documentación actual. Un programa federal puede configurar diferentes funciones tipográficas o alias de color sin sustituir todos los componentes.

La vista previa es una comparación independiente de oportunidades de investigación que usa CSS 3.14.0 y JavaScript de acordeón. No incluye el banner gubernamental ni los elementos de identidad visual. Los nombres y las etapas de los programas son ficticios, y el filtrado se realiza íntegramente en el navegador.

Consulta la especificación complementaria

## Sistema de diseño USWDS: tokens de espaciado y tema

### Interpreta la unidad, no el numeral

Una unidad de espaciado USWDS equivale a 8px: units(2) significa 16px, mientras que units(3) significa 24px. Los tokens de media unidad permiten definir espacios más pequeños, y la utilidad usa 05 para indicar media unidad. La utilidad margin-2 no significa un margen de dos píxeles.

La escala también incluye anchos con nombre, como tablet y desktop. Esos nombres son tokens reutilizables, no un requisito para rediseñar cada página en cada ancho. La comparación usa grid-container alrededor del contenido y una región desplazable específica para la tabla.

```
@use "uswds-core" as *;
.opportunity-meta {
  padding: units(2);
  margin-bottom: units(3);
}
```

Referencia de código

Consulta la especificación complementaria

## Tipos y funciones tipográficas del sistema de diseño USWDS

### Una función puede cambiar sin renombrar los componentes

El token sans predeterminado corresponde a Source Sans Pro, y serif a Merriweather. Las funciones de cuerpo y de interfaz corresponden a sans; la de encabezados, a serif. La función family("body") resuelve esa cadena. Al documentar un proyecto, distingue la función semántica de la familia tipográfica final.

La vista previa local usa explícitamente Helvetica/Arial para el cuerpo del texto y Georgia para los encabezados, por lo que no es necesario descargar fuentes. Esta es una modificación para el estudio, no la identidad tipográfica estándar de USWDS. En una compilación de producción, configura esas funciones mediante los ajustes de uswds-core o copia los recursos tipográficos distribuidos.

```
@use "uswds-core" with (
  $theme-font-type-sans: "helvetica",
  $theme-font-type-serif: "georgia",
  $theme-font-role-body: "sans",
  $theme-font-role-heading: "serif"
);
```

Referencia de código

Consulta la especificación complementaria

## Alias de color del tema del sistema de diseño USWDS

### Mantén los alias vinculados a su función

El alias primary predeterminado corresponde a blue-60v, #005ea2. Primary-dark corresponde a blue-warm-70v, #1a4480; ink corresponde a gray-90, #1b1b1b. Son valores del tema, no una afirmación de que todos los sitios de USWDS deban usar el mismo color de marca.

Usa el alias semántico para una acción o el estilo de un encabezado, y un token de color del sistema solo cuando esa sea la decisión de diseño real. Sustituir un alias primary en los ajustes es una opción más controlada que reemplazar cada cadena hexadecimal coincidente en CSS compilado.

Consulta la especificación complementaria

## Filas de oportunidades comparables del sistema de diseño USWDS

### Conserva la semántica de la tabla

El ejemplo usa un título, encabezados de columna con scope="col" y el nombre de una oportunidad con scope="row". Es una tabla porque permite comparar los mismos campos de tema y etapa en distintos registros. Esas relaciones siguen disponibles cuando la región se desplaza.

El contenedor desplazable tiene tabindex="0" para que quienes usan el teclado puedan acceder a él. Así, los datos anchos quedan limitados a esa región, en lugar de ampliar todo el documento. La vista previa contiene celdas de texto normales; si faltaran datos del programa, habría que mostrar un estado de contenido explícito, no inventar una cifra.

Consulta la especificación complementaria

### La ordenación es una mejora independiente

USWDS admite encabezados ordenables mediante data-sortable. Una tabla ordenable también necesita una región usa-table__announcement-region con aria-live="polite". Es posible que los valores numéricos mostrados requieran data-sort-value para ordenarlos como valores y no alfabéticamente. La comparación actual no habilita la ordenación porque la demostración prevista es un filtro por tema de tres filas.

Consulta la especificación complementaria

## Requisitos como paneles desplegables en el sistema de diseño USWDS

### Vincula los ID del botón y del panel

Cada usa-accordion__button tiene un aria-controls que apunta al usa-accordion__content asociado. La funcionalidad nativa de JavaScript actualiza aria-expanded y la visibilidad. El modificador bordered cambia el contenedor; data-allow-multiple permite mantener abiertas varias secciones.

El botón está dentro de un encabezado para que la estructura del contenido siga siendo comprensible. Los requisitos necesarios para decidir si un programa es pertinente deben permanecer visibles fuera del panel desplegable. En este caso, los paneles contienen notas complementarias de preparación y una explicación del conjunto de datos ficticio.

- El encabezado describe el tema del panel.

- El botón indica el estado de expansión y el ID de destino.

- El panel conserva el mismo ID cuando cambia su visibilidad.

Consulta la especificación complementaria

## Instalación de todo el árbol de recursos del sistema de diseño USWDS

### Conserva las rutas que usa CSS compilado

Instala @uswds/uswds@3.14.0 y copia su directorio dist sin aplanar css, js, img y fonts en una sola carpeta. La hoja de estilos usa rutas relativas para los iconos y las fuentes. De lo contrario, una página puede parecer parcialmente correcta aunque no muestre los símbolos de los paneles desplegables o los tipos de letra.

Carga uswds-init.min.js en la cabecera, luego la hoja de estilos y, después del marcado del cuerpo, uswds.min.js. La biblioteca incluida añade funcionalidad al acordeón. El campo de búsqueda y el filtro por tema que aparecen a continuación usan lógica personalizada de la aplicación; no se conectan a un servicio de búsqueda remoto.

Consulta la especificación complementaria

## Filtrado y recuperación en el sistema de diseño USWDS

### La consulta debe mostrar sus resultados

Los estilos nativos de label, input, select y button proporcionan los controles; la aplicación compara la consulta y el tema seleccionado con los tres registros ficticios. El recuento de resultados es una región dinámica cortés. Si no hay coincidencias, se muestra una explicación y una opción para restablecer los filtros, sin borrar la consulta introducida.

La demostración diferencia intencionalmente entre encontrar una oportunidad y presentar una solicitud. Abrir el contenido de preparación no crea un borrador ni marca un requisito como completado. Una solicitud real de financiación necesitaría sus propias políticas del programa, autenticación y un estado de transacción persistente.

1. Filtra por Environment y revisa la oportunidad que queda.

2. Busca una frase sin coincidencias y selecciona Clear filters.

3. Abre los dos paneles de preparación y comprueba que cada uno tenga su propio estado de expansión.

Consulta la especificación complementaria

## Ejemplos de componentes del sistema de diseño USWDS

### Acordeón con información complementaria de preparación

Panel desplegable nativo de USWDS con un vínculo explícito entre el botón y el panel.

```
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
</div>
```

Referencia de código

### Tabla comparativa de oportunidades

El título y los encabezados de fila y columna conservan las relaciones de comparación.

```
<div class="usa-table-container--scrollable" tabindex="0">
  <table class="usa-table usa-table--borderless">
    <caption>Illustrative research opportunities</caption>
    <thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead>
    <tbody><tr><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr></tbody>
  </table>
</div>
```

Referencia de código

### 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.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
  <h3 class="usa-accordion__heading">
    <button type="button" class="usa-accordion__button"
      aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
  </h3>
  <div id="preparation" class="usa-accordion__content usa-prose" hidden>
    <p>This fictional opportunity asks for a project summary and a named contact.</p>
  </div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
```

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.

## Configuración del agente del sistema de diseño USWDS

### Punto de partida para la implementación

Conserva la estructura del directorio dist para que CSS pueda resolver las fuentes y los iconos. Esta es la vía de distribución precompilada; para personalizar el tema, se necesita una compilación de Sass. El ZIP completo del ejemplo 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/uswds.html. No abras ejemplos basados en módulos mediante file://.

```
npm install @uswds/uswds@3.14.0
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/

<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
```

### Una instrucción para tu proyecto

```
Crea una comparación ficticia de oportunidades de investigación con USWDS 3.14.0. Carga el árbol completo de recursos de dist, el script de inicialización, la hoja de estilos de componentes y JavaScript. Presenta los registros comparables en una tabla semántica con título y encabezados de columna; incluye búsqueda y filtrado por categoría con etiquetas, un recuento de resultados, un estado útil cuando no hay coincidencias y una opción para restablecer. Usa acordeones nativos para los requisitos complementarios y mantén visible la información esencial de la comparación. Conserva las unidades de espaciado y las correspondencias de roles del tema documentadas; etiqueta la sobreescritura de la fuente del sistema. No conviertas este directorio en un flujo de envío de solicitudes ni des a entender que existe una elegibilidad real o un compromiso de otorgar fondos.
```

## Fuentes y alcance del sistema de diseño de USWDS

Estudio independiente de componentes de USWDS 3.14.0. Registros ficticios de oportunidades; no se afirma tener identidad federal ni se ofrece un punto de acceso para solicitudes. Helvetica/Arial y Georgia son sustituciones de fuentes locales, no los recursos de fuente predeterminados de USWDS.

- Unidades de espaciado Unidades numéricas y anchos con nombre.

- Roles de familias tipográficas Resolución de roles tipográficos y tokens.

- Colores del tema Alias y ajustes predeterminados.

- Tabla Comparación semántica y desplazamiento.

- Acordeón Estados y marcado del panel.

- Configuración para desarrolladores Distribución y rutas de recursos.

- 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 del sistema de diseño de USWDS

### VA sistema de diseño

Crea recorridos de servicio claros con los tokens semánticos de VA y la Process List nativa: explicaciones visibles de cada paso, etiquetas de estado significativas y detalles complementarios que mantienen legible el recorrido principal.

### 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.


- [Referencia de implementación](https://designsystem.digital.gov/components/accordion/)
- [Fuente](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Fuente](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Fuente](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Fuente](https://designsystem.digital.gov/components/accordion/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/documentation/developers/)
- [Referencia de código](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Referencia de código](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/components/table/)
- [Consulta la especificación complementaria](https://designsystem.digital.gov/components/accordion/)
- [Referencia de código](https://designsystem.digital.gov/components/accordion/)
- [Referencia de código](https://designsystem.digital.gov/components/table/)
- [Unidades de espaciado Unidades numéricas y anchos con nombre.](https://designsystem.digital.gov/design-tokens/spacing-units/)
- [Roles de familias tipográficas Resolución de roles tipográficos y tokens.](https://designsystem.digital.gov/design-tokens/typesetting/font-family/)
- [Colores del tema Alias y ajustes predeterminados.](https://designsystem.digital.gov/design-tokens/color/theme-tokens/)
- [Tabla Comparación semántica y desplazamiento.](https://designsystem.digital.gov/components/table/)
- [Acordeón Estados y marcado del panel.](https://designsystem.digital.gov/components/accordion/)
- [Configuración para desarrolladores Distribución y rutas de recursos.](https://designsystem.digital.gov/documentation/developers/)