# Sistema de diseño Singapore Government ## Sistema de diseño Singapore Government Vista previa de la interfaz Aumenta el valor, escribe una cantidad no válida, valídala, restablece el control y cambia entre los tokens nativos de día y noche sin perder los valores. ## Sistema de diseño Singapore Government Referencia de diseño Componentes web SGDS de Singapur 3.29.0, archivos de tema publicados, tokens adaptables y manifiesto de elementos personalizados. La vista previa ejecuta el paquete original index.umd.min.js con importaciones locales del tema. Usa Arial como alternativa explícita, no compila utilidades de Tailwind y no incluye la cabecera oficial. El paquete v3 es distinto del SGDS de v2 basado en Bootstrap. ### Tokens tipográficos adaptables reales | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --sgds-font-size-heading-xl | 32→36→40px | Rangos base, 1024px y 1440px; line-height-xl asociado: 40→44→48px. | | --sgds-font-size-heading-md | 24→26→28px | line-height-md asociado: 28→32→32px. | | --sgds-font-size-heading-sm | 20→22→24px | Un rol compacto para títulos de sección. | | --sgds-font-size-body-md | 16px in all three ranges | Body-lg: 18→20→20px; body-sm: 14px. | | --sgds-font-family-brand | Inter,system-ui,sans-serif | Los archivos de fuentes se cargan por separado; la vista previa los sustituye por Arial. | | --sgds-font-weight-* | 300,400,600,700 | Light, regular, semibold y bold. | | --sgds-letter-spacing-tight | -0.4px | Interletrado de encabezados en root.css. | ### Roles de tema primitivos y semánticos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --sgds-color-default | Day#1a1a1a;night#f3f3f3 | Asigna gray1000→gray100; no es texto de cuerpo codificado de forma fija. | | --sgds-bg-default | Day#ffffff;night#0e0e0e | La superficie raíz cambia con sgds-night-theme. | | --sgds-color-subtle | Day#525252;night#a5a5a5 | Texto complementario; mantén suficiente contraste sobre la superficie correspondiente. | | --sgds-primary-surface-default | #6b4feb | Product-primary600 en ambos archivos de tema actuales. | | --sgds-primary-color-default | Day#6b4feb;night#a999f3 | El rol de texto difiere del rol de superficie rellena. | | --sgds-border-color-default | Day#868686 | No reutilices el mismo primitivo para todos los bordes del tema nocturno. | ### Espaciado, bordes y cambios adaptables | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | --sgds-spacer-0…12 | 0,2,4,8,12,16,20,24,32,48,64,96,128px | Valores expresados en rem con una raíz de 16px; son primitivos. | | --sgds-gap-md / --sgds-gap-2-xl | 16px /32px | Separaciones semánticas fijas. | | --sgds-layout-gap-md | 16→24→32px | Adaptable a 1024/1440px en el paquete real; estos no son los puntos de quiebre de la cuadrícula de 512/768. | | --sgds-text-gap-md | 12→16→16px | El espaciado de texto tiene su propio rol adaptable. | | --sgds-form-border-radius-md | 8px | Alias de border-radius-md. | | --sgds-form-border-width-default | 1px | Alias de border-width-1. | ### Referencia de cuadrícula estándar | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | xs / sm | 320–511 /512–767px | 4/8 columnas; medianiles de 16px; márgenes fijos de 20/24px. | | md | 768–1023px | 8 columnas; medianiles de 24px; márgenes fijos de 28px. | | lg | 1024–1279px | 12 columnas; contenedor de 888px; medianiles de 24px. | | xl | 1280–1439px | 12 columnas; contenedor de 1168px; medianiles de 32px. | | 2xl | 1440px+ | 12 columnas; contenedor de 1312px; medianiles de 32px. | | Preview composition | 888px maximum;two columns→one below768px | Composición deliberadamente compacta para el planificador; no es una implementación completa de todos los preajustes de cuadrícula estándar. | ### API pública de QuantityToggle API | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | value / step | Number;defaults0 /1 | Lee el valor del elemento después de un evento nativo. | | min / max | Number constraints | Explica los límites del servicio elegido mediante hintText. | | label / hintText | String properties/attributes | Proporciona el nombre accesible del campo y una indicación visible del rango. | | hasFeedback | style \| text \| both | Un modo de respuesta con valor de cadena, no un atributo Boolean sin valor. | | invalidFeedback / invalid | Message /Boolean state | Usa la respuesta del componente en lugar de un borde rojo que no guarda relación. | | Events | sgds-input;sgds-change;sgds-invalid;sgds-valid | Escucha tanto input como change para que el resumen admita ediciones escritas y cambios con botones. | | Validation methods | checkValidity();reportValidity() | Devuelve resultados de restricción Boolean; reportValidity muestra la respuesta. | | readonly versus disabled | Visible fixed value versus unavailable control | Disabled se excluye del envío; readonly conserva su valor. | ## Guía completa de sistema de diseño Singapore Government 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 Singapore Government Elige la familia SGDS actual ### Componentes web y páginas anteriores de Bootstrap > SGDS v 3 usa @govtechsg/sgds-web-component. Sus elementos personalizados, tokens de tema y la integración actual de utilidades constituyen una vía de implementación distinta de la hoja de estilos anterior @govtechsg/sgds Bootstrap. No mezcles instrucciones de v 2 JavaScript con etiquetas v 3 esperando que se inicialicen los nuevos controles. El ejemplo usa el paquete de navegador real 3.29.0 para registrar botones y controles de cantidad. Presenta un planificador original para un taller comunitario, sin cabecera del Gobierno de Singapur ni afirmaciones de afiliación. Los controles solo cambian valores locales; no hay ningún flujo de reserva ni de pago. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Los tokens de tema se organizan en capas ### Colores primitivos y usos semánticos El archivo raíz define los grises primitivos, el púrpura product-primary y las demás familias de la paleta. Después, los archivos de tema de día y de noche asignan esos primitivos a roles como texto predeterminado, texto complementario, superficie rellena y borde. Un rol de texto principal puede cambiar en el modo nocturno aunque el rol de superficie rellena principal siga usando el mismo primitivo. La vista previa usa propiedades semánticas para el fondo del documento, el texto, los bordes y el panel atenuado. Por ello, activar sgds-night-theme en la raíz actualiza tanto los elementos personalizados como la composición que los rodea. Un párrafo con negro codificado de forma fija rompería esa relación, aunque los controles siguieran cambiando correctamente. La paleta púrpura es el color de producto predeterminado publicado; no es motivo para hacerse pasar por una entidad gubernamental. La identidad de una entidad y el uso aprobado de su cabecera requieren autorización propia. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Tipografía adaptable con valores reales ### Consulta el token publicado, no una proporción abreviada El archivo actual responsive.css asigna 32, 36 y 40px a heading-xl en sus tres rangos, con alturas de línea correspondientes de 40, 44 y 48px. Los cambios se producen en 1024 y 1440px. Son independientes de los límites de diseño más pequeños de 512 y 768px de la cuadrícula. Body-md se mantiene en 16px. La descripción general pública de tipografía presenta proporciones generales y principios de combinación, mientras que la hoja de tokens publicada define alias exactos en píxeles para cada rol. Esta referencia usa esos alias ejecutables al indicar valores de implementación. Mantén la semántica de encabezados en HTML y aplica un token visual adecuado; un título de sección pequeño no necesita un nivel de encabezado artificialmente inferior. Inter es la tipografía de marca prevista, con los grosores 300, 400, 600 y 700 documentados en la configuración. El ejemplo local sustituye explícitamente la fuente por Arial y no carga fuentes remotas. En un servicio que adopte el sistema, carga y prueba la fuente elegida en lugar de confiar únicamente en el nombre de familia CSS. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Roles de espaciado diferentes ### No reduzcas todas las separaciones a una sola escala La escala de espaciado primitiva incluye 2px, además de 4, 8, 12, 16 y valores mayores. Los alias de separación fija y las separaciones adaptables de diseño, componentes y texto se construyen sobre esos primitivos. Un layout-gap-md base cambia de 16→24→32px, mientras que text-gap-md cambia de 12→16→16px. Por tanto, la palabra «medio» no equivale al mismo valor en todos los usos. El planificador usa un máximo de 888px para mantener juntas dos regiones de contenido compactas: los controles de cantidad y el plan actual. Por debajo de 768px, las apila. Esta es una composición de aplicación, no una afirmación de que la cuadrícula estándar completa de SGDS siempre tenga un límite de 888px. Las reglas más amplias de contenedores estándar se enumeran por separado en la referencia. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Un control de cantidad con límites ### Usa cantidad para un recuento, no un identificador Un selector de cantidad es apropiado para una cantidad pequeña que una persona puede ajustar de una unidad en una unidad. El ejemplo pide entre 1 y 5 participantes y entre 0 y 3 kits compartidos. Estas son restricciones de demostración; un servicio real debe obtenerlas de la disponibilidad o las políticas reales e indicarlas en la sugerencia. Los códigos postales, los identificadores y los importes exactos en moneda requieren otro tipo de campo. El componente nativo combina botones de icono para disminuir y aumentar con un campo de entrada numérico. Sus valores min, max y step son numéricos; value refleja la cantidad actual, y label/hintText aportan contexto. Al alcanzar un límite, el botón correspondiente deja de estar disponible; la entrada directa también requiere validar las restricciones. hasFeedback acepta los valores string, text o both. El ejemplo usa both y un mensaje específico para invalidFeedback. Tratar hasFeedback como un booleano copiado de otro componente API haría que se perdiera esa configuración exacta. ``` 1 ``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño Singapore Government Mantén el resumen sincronizado ### Dos rutas de eventos y una fuente de datos El resumen lee el valor de cada elemento host. Escucha tanto sgds-input como sgds-change, porque las ediciones al escribir y los cambios confirmados con los botones no necesariamente siguen la misma ruta de eventos. En el primer ejemplo local, probar solo la entrada de texto no permitió detectar las actualizaciones de los botones para aumentar el valor; el ejemplo final gestiona ambos eventos. Comprobar plan llama a reportValidity en ambos elementos nativos y muestra un mensaje de estado local. No convierte un número no válido en un total verosímil. Restablecer asigna los valores iniciales a los elementos host y borra el estado no válido visible para la aplicación mediante setInvalid(false); luego actualiza el resumen después de updateComplete. Un campo deshabilitado no equivale a uno de solo lectura: el primero queda excluido del envío del formulario, mientras que el segundo conserva su valor. Si un servicio real bloquea una cantidad confirmada para revisarla, usa el estado adecuado en lugar de deshabilitar el campo solo para darle un aspecto gris. - Usa sgds-input y sgds-change cuando un resumen admite tanto la escritura como los botones para aumentar y disminuir el valor. - Lee value del elemento host personalizado en lugar de acceder a su shadow DOM. - Mantén separados los mensajes locales de validez de la confirmación de una reserva o un envío. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Estilos antes del registro ### Carga la cadena de dependencias del tema En una aplicación empaquetada, importa day.css, night.css y css/sgds.css en ese orden y, después, importa la biblioteca de componentes una sola vez. Los archivos day/night importan root.css, que a su vez importa responsive.css. El archivo de estilos base importa reboot.css y grid.css. Una copia estática debe conservar estas dependencias relativas, no solo los tres primeros archivos. El archivo oficial utility.css es un punto de entrada de configuración para Tailwind CSS v 4. Debe procesarse con una compilación de Tailwind configurada; añadirlo como una hoja de estilos normal del navegador no genera todas las clases sgds: de utilidades. Este ejemplo usa un diseño CSS convencional y propiedades personalizadas semánticas, por lo que no presupone ninguna compilación de utilidades. Para el ejemplo aislado en el navegador, el archivo publicado es index.umd.min.js. Los metadatos del paquete aún mencionan index.umd.js, pero ese archivo no está en la distribución inspeccionada. La vista previa local usa el paquete minificado disponible; la configuración con npm utiliza la importación documentada del paquete para empaquetadores. 1. Fija la versión 3.29.0 e importa los tokens del tema antes de los estilos base. 2. Proporciona Inter o elige deliberadamente una alternativa y pruébala. 3. Registra los elementos personalizados una sola vez, espera a que se definan cuando sea necesario y, después, añade los listeners de la aplicación. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Prueba los límites y el tema a la vez ### Los límites revelan errores de integración Pulsa dos veces el botón para aumentar Participantes y comprueba que tanto el control como el resumen indiquen 3. Escribe 9 directamente y pulsa Comprobar plan: el componente debería mostrar el mensaje de rango y el estado debería pedir una corrección. Cambia el valor a 5 y confirma que el control para aumentarlo está deshabilitado y que el valor sigue siendo válido. Cambia al tema nocturno después de introducir las cantidades y comprueba que los valores se conserven, el resumen siga siendo legible y los límites continúen funcionando correctamente. Restablece los valores y repite la prueba con el teclado: Tab debería llevar al campo y a los botones en un orden lógico, y Enter o Espacio debería activar el botón enfocado. La prueba local verifica el comportamiento del componente a 1440, 768 y 390px, y comprueba que las dependencias del tema se sirven localmente. No demuestra la compatibilidad con navegadores ni certifica la accesibilidad de un futuro servicio gubernamental. Ese servicio debe probar todo el flujo, la redacción, la personalización del tema y el tratamiento de datos. Consulta la especificación complementaria ## Sistema de diseño Singapore Government Ejemplos de componentes del sistema de diseño ### Cantidades con límites y dos rutas de eventos Un control nativo completo y una salida sincronizada. ``` 1 ``` Referencia de código ### Configuración agrupada de v3 Orden correcto del tema, registro de la biblioteca y límite explícito para las utilidades de Tailwind. ``` npm install --save-exact @govtechsg/sgds-web-component@3.29.0 /* globals.css — tokens before foundation rules */ @import "@govtechsg/sgds-web-component/themes/day.css"; @import "@govtechsg/sgds-web-component/themes/night.css"; @import "@govtechsg/sgds-web-component/css/sgds.css"; /* Only for a configured Tailwind CSS v4 build: */ /* @import "@govtechsg/sgds-web-component/css/utility.css"; */ // main.js — register custom elements once import '@govtechsg/sgds-web-component'; // Enable the published night theme; omit class for day. document.documentElement.classList.toggle('sgds-night-theme'); ``` 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. ``` SGDS quantity specimen

Independent specimen · Community workshop planning

Plan a small workshop group

Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.

People and materials

Current plan

Participants
1
Material kits
0

These are demonstration limits. A real service should explain its own availability and eligibility rules.

Check planReset

``` 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 Singapore Government Configuración del agente de IA ### Punto de partida para la implementación La vista previa independiente utiliza el paquete original verificado index.umd.min.js y la cadena local de dependencias CSS. La receta con npm es para un empaquetador; utility.css requiere Tailwind v4 y se omite deliberadamente de esta vista previa estática. El ZIP del ejemplo completo y funcional, disponible en Fuentes, también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/singapore-sgds.html. No abras ejemplos basados en módulos mediante file://. ``` npm install --save-exact @govtechsg/sgds-web-component@3.29.0 /* globals.css — tokens before foundation rules */ @import "@govtechsg/sgds-web-component/themes/day.css"; @import "@govtechsg/sgds-web-component/themes/night.css"; @import "@govtechsg/sgds-web-component/css/sgds.css"; /* Only for a configured Tailwind CSS v4 build: */ /* @import "@govtechsg/sgds-web-component/css/utility.css"; */ // main.js — register custom elements once import '@govtechsg/sgds-web-component'; // Enable the published night theme; omit class for day. document.documentElement.classList.toggle('sgds-night-theme'); ``` ### Una instrucción para tu proyecto ``` Crea un planificador Singapore SGDS v3 con elementos sgds-quantity-toggle y sgds-button de la versión real 3.29.0. Importa toda la cadena de tokens day/night/root/responsive y los estilos base; luego registra los componentes nativos. Ofrece cantidades limitadas de participantes y kits de materiales, hasFeedback="both", etiquetas y sugerencias exactas, validación de los valores escritos y un resumen sincronizado que escuche tanto sgds-input como sgds-change. El selector de tema debe alternar sgds-night-theme en el elemento raíz sin restablecer los valores. Mantén clara la diferencia entre la validez local y una reserva. No cargues código v2 Bootstrap ni des a entender que utility.css sin procesar genera clases de Tailwind. ``` ## Sistema de diseño Singapore Government Fuentes y alcance Muestra de implementación independiente con código MIT y contenido original del taller. No implica la existencia de un encabezado gubernamental, afiliación, reserva, envío a una red ni límite de política oficial. - Desarrollo Instalación de v3 y orden de importación de CSS. - Cantidad Propósito, restricciones y comportamiento de control. - Separación Funciones de espaciado fijas y adaptables. - Heading Alias de jerarquía de encabezados. - Tipo Intención tipográfica y orientación sobre fuentes. - Cuadrícula Ajustes predefinidos estándar para cuadrículas adaptables. - Puntos de interrupción Referencia de puntos de interrupción y contenedores de cuadrícula. - Tokens Modelo de tokens por capas. - Semántica Funciones semánticas del color. - 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 de sistema de diseño Singapore Government ### Decanter Compón páginas editoriales académicas con el preset de Tailwind de Decanter, una escala tipográfica adaptable y bordes de pantalla fluidos. Explora tarjetas de eventos originales con filtros de temas funcionales y resúmenes expandibles. ### Suomi.fi sistema de diseño Crea formularios legibles para los servicios públicos finlandeses con Source Sans 3, tokens de espaciado explícitos y un patrón recuperable de selección de documentos. ### UNDP sistema de diseño Explora los tokens publicados de color y espaciado de UNDP, pestañas nativas operables con el teclado y un ejemplo completo de lectura de talleres con progreso de revisión local. - [Referencia de implementación](https://www.designsystem.tech.gov.sg/components/quantity-toggle) - [Fuente](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css) - [Fuente](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css) - [Fuente](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/root.css) - [Fuente](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint) - [Fuente](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json) - [Consulta la especificación complementaria](https://www.designsystem.tech.gov.sg/get-started/develop) - [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/day.css) - [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/themes/responsive.css) - [Consulta la especificación complementaria](https://www.designsystem.tech.gov.sg/foundations/spacing/gap) - [Referencia de código](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json) - [Consulta la especificación complementaria](https://www.designsystem.tech.gov.sg/components/quantity-toggle) - [Consulta la especificación complementaria](https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3.29.0/custom-elements.json) - [Referencia de código](https://www.designsystem.tech.gov.sg/get-started/develop) - [Referencia de código](https://www.designsystem.tech.gov.sg/components/quantity-toggle) - [Desarrollo Instalación de v3 y orden de importación de CSS.](https://www.designsystem.tech.gov.sg/get-started/develop) - [Cantidad Propósito, restricciones y comportamiento de control.](https://www.designsystem.tech.gov.sg/components/quantity-toggle) - [Separación Funciones de espaciado fijas y adaptables.](https://www.designsystem.tech.gov.sg/foundations/spacing/gap) - [Heading Alias de jerarquía de encabezados.](https://www.designsystem.tech.gov.sg/foundations/typography/heading) - [Tipo Intención tipográfica y orientación sobre fuentes.](https://www.designsystem.tech.gov.sg/foundations/typography) - [Cuadrícula Ajustes predefinidos estándar para cuadrículas adaptables.](https://www.designsystem.tech.gov.sg/foundations/layout/responsive-grid) - [Puntos de interrupción Referencia de puntos de interrupción y contenedores de cuadrícula.](https://www.designsystem.tech.gov.sg/foundations/layout/breakpoint) - [Tokens Modelo de tokens por capas.](https://www.designsystem.tech.gov.sg/foundations/design-tokens) - [Semántica Funciones semánticas del color.](https://www.designsystem.tech.gov.sg/foundations/colour/semantic-colour)