# Sistema de diseño CMS
## Vista previa de la interfaz de sistema de diseño CMS
Edita una preferencia, guarda o descarta el borrador y completa una revisión local sin enviar datos.
## 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.
### Funciones del color
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --color-base | #262626 | Valor de texto del Core versionado; una descripción general anterior indica #333. |
| --color-primary / primary-darker | #0071bc / #004f84 | Referencias de acción e interacción en tonos más oscuros. |
| --color-error / success | #e31c3d / #12890e | Acompaña siempre el color del estado con una explicación textual. |
| --color-border | #d9d9d9 | También se usa en --review__border-color. |
| --color-focus-dark / focus-light | #bd13b8 / #ffffff | Referencias de foco del tema. |
| --color-background / gray-lightest | #ffffff / #f2f2f2 | Superficies de página y de apoyo claras. |
### Tipografía
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --font-family-body / heading | Open Sans, Inter, Roboto, Helvetica Neue, Arial Nova, Nimbus Sans, Arial, sans-serif | Orden exacto de familias en 18.1.0; la vista previa usa Arial como alternativa. |
| --font-size-sm / md / lg / xl / 2xl | .875 / 1 / 1.125 / 1.3125 / 1.5rem | 14 / 16 / 18 / 21 / 24px con raíz de 16px. |
| --font-size-3xl--mobile / 3xl | 1.875 / 2.25rem | 30 / 36px. |
| --font-size-4xl--mobile / 4xl | 2.25 / 3rem | 36 / 48px. |
| --font-size-5xl--mobile / --tablet / 5xl | 2.25 / 3 / 3.75rem | 36 / 48 / 60px. |
| --font-line-height-base / heading | 1.5 / approximately 1.3 | El tema almacena el valor del encabezado como 1.2999999523162842. |
### Espaciado, cuadrícula y formas
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --spacer-half / 1 / 2 / 3 | 4 / 8 / 16 / 24px | Los modificadores numéricos de utilidades se multiplican por 8px. |
| --spacer-4 / 5 / 6 / 7 | 32 / 40 / 48 / 56px | Ritmo de diseño más amplio. |
| --grid-columns | 12 | Composición de la cuadrícula. |
| --grid-gutter-width / grid-form-gutter-width | 32 / 16px | Distingue los márgenes genéricos de los de formularios en el tema actual. |
| --site-max-width | 1104px | Referencia del contenedor del tema. |
| --site-margins / site-margins-mobile | 3rem / 1.5rem | 48 / 24px con tamaño de raíz estándar. |
| --radius-default / medium / large | 3 / 4 / 8px | No hay un único valor de redondeo universal. |
### Puntos de ruptura adaptables
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| sm | 544px | Prefijo pequeño para diseño adaptable con prioridad móvil. |
| md | 768px | Prefijo mediano. |
| lg | 1024px | Prefijo grande. |
| xl | 1280px | Prefijo extragrande. |
## Guía completa de sistema de diseño CMS
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 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.
Consulta la especificación complementaria
## Sistema de diseño CMS Consulta el tema versionado
### Incluye ambas hojas de estilo
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.
Consulta la especificación complementaria
## 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.
Consulta la especificación complementaria
## 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.
Consulta la especificación complementaria
### Utiliza los prefijos de los puntos de quiebre del CMS
Los límites documentados son sm 544px, md 768px, lg 1024px y xl 1280px. Los diseños y algunas familias de utilidades admiten estos prefijos; por ejemplo, ds-u-lg-display--none. No des por sentado que todas las clases de componentes tienen una variante adaptable. En móviles, el valor largo de la revisión debe ajustarse en varias líneas sin que el control Editar quede fuera de la pantalla; la fila de acciones de la aplicación también se apila cuando es necesario.
Consulta la especificación complementaria
## 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.
```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';
export default function ContactReview() {
return
Contact preferences
Large print
English
;
}
```
Referencia de código
Consulta la especificación complementaria
## 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.
Consulta la especificación complementaria
## 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.
Consulta la especificación complementaria
## 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.
1. Carga el componente de Core y el tema correspondientes CSS y, después, representa las dos filas de revisión.
2. Conecta cada acción de edición a un editor controlado; devuelve el foco después de guardar o cancelar.
3. Prueba los valores modificados, los borradores descartados y la finalización local al terminar, tanto en anchos de escritorio como de móvil.
Consulta la especificación complementaria
## Sistema de diseño CMS Ejemplos de componentes del sistema de diseño
### Dos filas de revisión independientes
Propiedades reales de React 18.1.0; las aplicaciones consumidoras implementan las rutas de edición enlazadas.
```
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';
export default function ContactReview() {
return
Contact preferences
Large print
English
;
}
```
Referencia de código
- Review utiliza h3 de forma predeterminada.
- editContent reemplaza el enlace de edición predeterminado; se requiere editHref para mostrar ese enlace.
### Anatomía de revisión nativa de CSS
Una integración manual útil de HTML cuando la aplicación gestiona las interacciones.
```
```
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.
```
Notice preferences — CMS Core specimen
CMS Core component example
Review your notice preferences
Check these fictional preferences before completing the local review. This example does not collect health information or contact details.
Notice preferences
Notice format
Standard print
Preferred language
English
```
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 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://.
```
// npm install @cmsgov/design-system@18.1.0
import { Review } from '@cmsgov/design-system';
import '@cmsgov/design-system/css/index.css';
import '@cmsgov/design-system/css/core-theme.css';
export default function ContactReview() {
return
Contact preferences
Large print
English
;
}
```
### Una instrucción para tu proyecto
```
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.
```
## 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.
- CMS Design System Introducción oficial, fundamentos y catálogo de componentes.
- Guía para desarrolladores Rutas de integración oficiales y orientación sobre paquetes.
- Revisión de formularios Patrón para revisar la información de un formulario.
- 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 CMS
### Det Fælles Designsystem
Explora el tema DKFDS de Dinamarca, las escalas Sass reales y los patrones accesibles para tablas mediante una comparación completa de recursos con ordenación numérica, búsqueda enviada y recuperación del estado vacío.
### sistema de diseño .italia
Implementa una secuencia de servicios fácil de leer con la tipografía real, la estructura adaptable de Stepper y el estado de formulario local recuperable de Bootstrap Italia.
### Designsystemet
Explora las funciones reales del tema, los modos de tamaño y el comportamiento nativo de los campos de Designsystemet mediante un editor completo de encargos con contador de caracteres y estado de presentación conservado.
- [Referencia de implementación](https://design.cms.gov/components/review/)
- [Fuente](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Fuente](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Consulta la especificación complementaria](https://design.cms.gov/getting-started/for-developers/)
- [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/css/core-theme.css)
- [Consulta la especificación complementaria](https://design.cms.gov/foundation/spacing/)
- [Consulta la especificación complementaria](https://design.cms.gov/foundation/layout-grid/responsive-design/)
- [Referencia de código](https://cdn.jsdelivr.net/npm/@cmsgov/design-system@18.1.0/dist/react-components/types/Review/Review.d.ts)
- [Consulta la especificación complementaria](https://design.cms.gov/components/review/)
- [Consulta la especificación complementaria](https://design.cms.gov/patterns/Forms/form-review/)
- [Referencia de código](https://design.cms.gov/components/review/)
- [CMS Design System Introducción oficial, fundamentos y catálogo de componentes.](https://design.cms.gov/)
- [Guía para desarrolladores Rutas de integración oficiales y orientación sobre paquetes.](https://design.cms.gov/getting-started/for-developers/)
- [Revisión de formularios Patrón para revisar la información de un formulario.](https://design.cms.gov/patterns/Forms/form-review/)