Administración pública y servicios públicos · Nuevo recurso
Sistema de diseño CMS.
Implementa CMS Core con variables de tema versionadas, API reales del componente Review y un flujo funcional de edición y revisión que conserva las respuestas del usuario y el foco.
CMS Core 18.1.0 nativo CSS y tema. Estado de edición y JavaScript definidos por la aplicación; Arial como alternativa, sin tiempo de ejecución de React ni envío externo. · Referencia de implementación
02
Referencia de diseño de sistema de diseño CMS
CMS Core 18.1.0 publicó core-theme.css y el componente CSS. Si la documentación general difiere, prevalece el artefacto versionado. La vista previa usa Arial como alternativa y un contenedor de 48rem específico de la aplicación.
Sistema de diseño CMS Elige Core o un tema derivado
El paquete es una familia, no un único estilo de marca
CMS Core ofrece fundamentos de interfaz compartidos, con sistemas derivados independientes para Healthcare.gov, Medicare.gov y CMS.gov. Esta referencia fija la versión 18.1.0 de @cmsgov/design-system y su archivo core-theme.css. Que un color, logotipo o componente esté disponible en un tema derivado no significa que sea una regla de Core. El ejemplo usa deliberadamente un flujo neutro para las preferencias de avisos y omite los banners oficiales del gobierno y los elementos de identidad visual.
Hay vías de integración con React, Preact, componentes web y HTML/CSS manuales. La documentación recomienda los componentes JavaScript cuando su comportamiento integrado resulta útil; la colección de componentes web es un subconjunto. Nuestro ejemplo independiente usa CSS reales de Core con JavaScript de la aplicación para editar, guardar y cancelar. No afirma que CSS implemente validación, enrutamiento ni persistencia.
index.css define las reglas de los componentes y core-theme.css proporciona sus variables. Si se omite el tema, pueden quedar nombres de clase válidos con valores sin resolver. Por el contrario, importar un tema de Medicare mientras se describe la tipografía de Core da un resultado engañoso, aunque la página se renderice. La configuración incluye ambos recursos de la misma versión 18.1.0.
El tema versionado es la fuente de los valores numéricos de esta guía. Por ejemplo, --color-base es #262626, aunque la descripción general de tipografía todavía menciona #333. El valor de --grid-gutter-width del tema es --spacer-4 (32px), mientras que el de --grid-form-gutter-width es --spacer-2 (16px). No se debe aplicar a todas las variantes de cuadrícula una frase general que describa márgenes de 16px. Estas diferencias importan al reproducir un diseño real.
Sistema de diseño CMS Tipografía y jerarquía de Core
Una familia, tamaños explícitos según la función
Core utiliza Open Sans para los encabezados y el contenido del cuerpo. La cadena de fuentes alternativas del tema 18.1.0 continúa con Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial y sans-serif. La muestra local especifica Arial explícitamente para no solicitar archivos de fuentes externos; por eso, sus métricas difieren de las de la tipografía oficial completa.
El tamaño base del cuerpo es 1rem, con una altura de línea de 1.5. Las variables de tamaño incluyen 14, 16, 18, 21 y 24px con una raíz de 16px, seguidas de roles responsivos mayores: 3xl es 30px en móviles y 36px en otros dispositivos; 4xl es 36px en móviles y 48px en otros dispositivos; 5xl es 36px en móviles, 48px en tabletas y 60px en su rol de mayor tamaño. Estos son valores del tema, no una autorización para usar el tamaño más grande en todos los títulos de página. Utiliza encabezados semánticos y la utilidad o asignación de ds-content adecuada.
Sistema de diseño CMS Espaciado y diseño adaptable
Ritmo de ocho píxeles con un paso intermedio
--spacer-1 a --spacer-7 corresponden a 8–56px en incrementos de ocho píxeles. --spacer-half es 4px y --spacer-none es cero. Por lo tanto, una clase como ds-u-margin--2 equivale a 16px, no a 2rem. La fila de revisión nativa CSS tiene un relleno vertical de 16px y un borde inferior de 2px; el formulario que la contiene no necesita otra tarjeta con relleno alrededor de cada respuesta.
El ancho máximo del sitio de Core es de 1104px, con márgenes de sitio de 3rem y márgenes móviles de 1.5rem en el tema versionado. La muestra opta por un contenedor de lectura más pequeño, de 48rem, para dos filas breves de revisión. Este es un ancho de aplicación, no un nuevo token del CMS.
Sistema de diseño CMS Anatomía de una fila de revisión y API
Una etiqueta, un valor y un destino contextual de edición
Review agrupa un elemento revisable. Su encabezado es h3 de forma predeterminada, se puede configurar con headingLevel y va seguido de hijos que representan el valor actual. editHref proporciona un destino; si no se especifica, no se muestra ningún enlace de edición. editAriaLabel asigna un nombre accesible inequívoco a los enlaces Editar visibles que se repiten. La declaración de tipos de 18.1.0 también incluye editText, onEditClick y editContent; este último reemplaza el enlace predeterminado cuando se proporciona contenido personalizado.
El ejemplo React utiliza propiedades reales verificadas en la declaración publicada. Sus rutas son ejemplos de rutas de aplicación que la aplicación consumidora debe implementar. La alternativa nativa CSS muestra la estructura ds-c-review, ds-c-review__content y ds-c-review__heading; la aplicación sigue siendo responsable de gestionar la navegación y las actualizaciones.
Sistema de diseño CMS Edición de una fila o de una sección
Mantén predecible el proceso de corrección
El patrón de revisión de formularios del CMS distingue entre editar una respuesta y editar una sección completa. Las preferencias independientes sobre el formato de los avisos y el idioma son adecuadas para la edición de una fila. Las respuestas interdependientes, como los miembros del hogar y sus relaciones, pueden requerir la edición de una sección para que la aplicación pueda recalcular su coherencia en conjunto. La documentación oficial indica explícitamente que el componente Review no implementa la opción de colocar un botón Editar para toda una sección junto al encabezado de esta.
La vista previa abre un conjunto de campos específico para la fila seleccionada. Guardar actualiza solo ese valor y devuelve el foco al control Editar que inició la acción; Cancelar descarta el borrador. Además, la respuesta visible permanece sin cambios mientras el editor está abierto. Un mensaje de estado local comunica el cambio real, en lugar de anunciar que se guardó correctamente con solo mostrar el formulario de edición.
Utiliza las mismas etiquetas de preguntas y el mismo orden al completar y revisar el formulario.
Asigna un nombre contextual de edición a cada fila, aunque el enlace visible diga Editar.
Mantén la edición de secciones fuera del componente de una sola fila cuando sea necesario cambiar respuestas relacionadas en conjunto.
Sistema de diseño CMS Revisión, finalización y veracidad
Una revisión no es un comprobante de envío
Review es adecuado para respuestas editables de un formulario, no para sustituir los resultados de búsqueda. En un flujo de envío real, el patrón requiere una acción final de envío después de la revisión. Antes de mostrar un comprobante, esa acción debe reflejar un resultado real del backend. En cambio, la muestra ofrece Completar revisión local e indica explícitamente que no se envía ni se almacena nada.
Core distingue el azul primario #0071bc, el rojo de error #e31c3d, el verde de éxito #12890e y el gris de borde #d9d9d9. El texto también identifica una preferencia guardada, no solo el color. El foco utiliza las referencias de foco claras y oscuras del tema; no elimines el indicador al aplicar un estilo minimalista al control Editar. Se puede llegar al estado final con el teclado, y las filas de revisión permanecen visibles.
Sistema de diseño CMS Instalación y ampliación seguras
Un proceso completo con CSS y una ruta de componente real
Instala el paquete fijado e importa css/index.css y css/core-theme.css a través de las exportaciones del paquete. Las aplicaciones consumidoras de React importan Review desde la raíz del paquete; las aplicaciones consumidoras de Preact tienen una entrada /preact. El ejemplo no requiere compilar Sass. Si copias CSS estático, conserva las rutas relativas de los recursos de fuentes e imágenes o elige explícitamente una alternativa compatible, como hace esta muestra.
El espacio de nombres del CMS separa los diseños ds-l-, los componentes ds-c- y las utilidades ds-u-. Las clases de aplicación no deben hacerse pasar por componentes oficiales no documentados. En la vista previa, el contenedor de lectura y el editor en línea son composiciones locales; la fila de revisión y los botones utilizan los estilos distribuidos.
Carga el componente de Core y el tema correspondientes CSS y, después, representa las dos filas de revisión.
Conecta cada acción de edición a un editor controlado; devuelve el foco después de guardar o cancelar.
Prueba los valores modificados, los borradores descartados y la finalización local al terminar, tanto en anchos de escritorio como de móvil.
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.
HTML
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Notice preferences — CMS Core specimen</title><link rel="stylesheet" href="vendor/cms-18.1.0/index.css"><link rel="stylesheet" href="vendor/cms-18.1.0/core-theme.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{margin:0;border-top:8px solid #0071bc}.shell{max-width:48rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:16px 0 24px}h2{font-size:24px;margin:32px 0 16px}.intro{margin-bottom:32px}.ds-c-review__content p{margin:8px 0}.edit{align-self:flex-start;min-width:48px;border:0;background:none;color:#0071bc;text-decoration:underline;font-size:16px;padding:4px;cursor:pointer}.editor{margin:24px 0;padding:24px;background:#e6f1f8;border-left:4px solid #0071bc}fieldset{padding:0;border:0;margin:0}legend{font-size:20px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;margin:16px 0}.choice input{width:20px;height:20px;accent-color:#0071bc}.actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:24px}footer{margin-top:40px;padding-top:24px;border-top:1px solid #d9d9d9}#status{margin-top:24px;font-weight:bold}button:focus-visible,input:focus-visible{outline:3px solid #bd13b8;outline-offset:3px}[hidden]{display:none!important}@media(max-width:543px){.editor{padding:16px}.actions{flex-direction:column;align-items:flex-start}}</style></head><body><main class="shell"><p>CMS Core component example</p><h1>Review your notice preferences</h1><p class="intro">Check these fictional preferences before completing the local review. This example does not collect health information or contact details.</p><section aria-labelledby="preferences"><h2 id="preferences">Notice preferences</h2><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Notice format</h3><p id="format-value">Standard print</p></div><button class="edit" data-field="format" aria-label="Edit notice format">Edit</button></div><div class="ds-c-review"><div class="ds-c-review__content"><h3 class="ds-c-review__heading">Preferred language</h3><p id="language-value">English</p></div><button class="edit" data-field="language" aria-label="Edit preferred language">Edit</button></div></section><form class="editor" id="editor" hidden><fieldset><legend id="legend"></legend><div id="choices"></div></fieldset><div class="actions"><button class="ds-c-button ds-c-button--solid" type="submit">Save preference</button><button class="ds-c-button" id="cancel" type="button">Cancel</button></div></form><div class="actions"><button class="ds-c-button ds-c-button--solid" id="complete">Complete local review</button><button class="ds-c-button" id="reset">Reset example</button></div><p id="status" role="status"></p><footer>Native CMS Core 18.1.0 CSS · Arial fallback<br>Changes exist only on this page. Nothing is submitted or saved after you leave.</footer></main><script>const values={format:'Standard print',language:'English'},options={format:['Standard print','Large print','Electronic text'],language:['English','Spanish']},labels={format:'Notice format',language:'Preferred language'};let field,opener;const editor=document.querySelector('#editor'),status=document.querySelector('#status');function close(){editor.hidden=true;opener?.focus()}document.querySelectorAll('.edit').forEach(button=>button.addEventListener('click',()=>{field=button.dataset.field;opener=button;document.querySelector('#legend').textContent='Edit '+labels[field].toLowerCase();document.querySelector('#choices').replaceChildren(...options[field].map((text,i)=>{const label=document.createElement('label');label.className='choice';const input=document.createElement('input');input.type='radio';input.name='preference';input.value=text;input.checked=text===values[field];label.append(input,document.createTextNode(text));return label}));editor.hidden=false;editor.querySelector('input:checked').focus();status.textContent=''}));editor.addEventListener('submit',event=>{event.preventDefault();values[field]=editor.querySelector('input:checked').value;document.querySelector('#'+field+'-value').textContent=values[field];status.textContent=labels[field]+' updated to '+values[field]+'.';close()});document.querySelector('#cancel').addEventListener('click',close);document.querySelector('#complete').addEventListener('click',()=>{if(!editor.hidden){status.textContent='Save or cancel the open edit before completing the review.';editor.querySelector('input:checked').focus();return}status.textContent='Local review complete. No data was submitted.'});document.querySelector('#reset').addEventListener('click',()=>{values.format='Standard print';values.language='English';Object.entries(values).forEach(([key,value])=>document.querySelector('#'+key+'-value').textContent=value);editor.hidden=true;status.textContent='Example reset.'});</script></body></html>
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.
04
Configuración del agente de sistema de diseño CMS
Punto de partida para la implementación
Las exportaciones del paquete y las propiedades de Review se verificaron en los metadatos/tipos publicados de la versión 18.1.0. El ejemplo de React se proporciona para la integración; la vista previa independiente ejecuta CSS nativo junto con JavaScript local de la aplicación. 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áigalo, ejecute python3 -m http.server 8080 en ese directorio y abra http://localhost:8080/cms.html. No abra los ejemplos basados en módulos mediante file://.
Cree una pantalla de revisión de CMS Core 18.1.0. Cargue index.css y core-theme.css a la vez. Use Review con heading, children, editHref y editAriaLabel para cada respuesta editable por separado; la edición a nivel de sección se compone aparte en la aplicación. Mantenga el orden de las preguntas y los valores guardados visibles mientras se editan los borradores. Devuelva el foco al guardar o cancelar y anuncie las actualizaciones reales. Use los tokens de Core, incluidos el texto base #262626, espaciadores de 8px con un incremento intermedio de 4px, una separación general de cuadrícula de 32px y una separación de formulario de 16px. No mezcle logotipos de temas secundarios ni dé a entender que una revisión local envía una solicitud.
05
Fuentes y alcance de sistema de diseño CMS
Referencia técnica de Core-theme. Valores de preferencias ficticios y cambios solo locales; no representa asesoramiento sobre elegibilidad sanitaria, afiliación a CMS ni un formulario enviado.
