Design for AI

Estilo Gubernamental / institucional limpio: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para gubernamental / institucional limpio. También llamado sistema de diseño gubernamental, estilo GOV.UK, USWDS, diseño cívico, UI del sector público, web institucional. 2012 (lanzamiento de GOV.UK), 2016 (USWDS), continuo.

Rasgos

  • lenguaje claro primero; el layout sirve a la lectura y a los formularios, no al marketing
  • tipografía grande y de alto contraste, una columna, line-height generoso
  • texto negro sobre blanco, un azul de enlace fuerte, un amarillo de foco, una barra de marca fina arriba
  • los formularios como patrón central: una pregunta por página, inputs grandes, resúmenes de error claros
  • sin imágenes de hero, sin tarjetas, sin iconos más allá de un escudo o un chevrón
  • accesible por defecto: enlaces de salto, foco visible, objetivos de 44px, AA o mejor
  • cero movimiento decorativo

Paleta

#ffffff página, #0b0c0c texto, #1d70b8 enlace, #003078 hover de enlace, #ffdd00 foco, #d4351c error, #00703c éxito, #f3f2f1 superficie, #b1b4b6 borde

Tipografía

GDS Transport es de uso restringido; libres: Public Sans (USWDS), Source Sans 3 o Atkinson Hyperlegible; cuerpo 19px con line-height 1.3-1.5, títulos 700 a 48/36/27px, ancho máximo 66ch

Haz

  • sigue los patrones de un sistema de diseño público existente (GOV.UK Design System o USWDS) para formularios, errores, botones y navegación
  • mantén las páginas a una columna de 66ch y pon una tarea por página
  • haz que el estado de foco sea un fondo #ffdd00 de 3px más un outline #0b0c0c de 3px para que sea imposible pasarlo por alto

Evita

  • no añadas secciones de marketing, testimonios, imágenes de hero ni animación
  • no uses texto gris claro, etiquetas solo en placeholder ni bordes finos
  • no inventes componentes nuevos cuando el sistema de diseño ya tiene uno

Conocido por: GOV.UK, USWDS (usa.gov), Canada.ca, Service NSW, Bundesregierung.de (parcial)

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #0b0c0c;
   --accent: #1d70b8;
   --focus: #ffdd00;
   --error: #d4351c;
   --surface: #f3f2f1;
   --line: #b1b4b6;
   --radius: 0;
   --font: 'Public Sans',sans-serif
}
Prompt

Construye el sitio en estilo institucional gubernamental siguiendo las convenciones del GOV.UK Design System. Fondo #ffffff, texto #0b0c0c, enlaces #1d70b8 subrayados (hover #003078), foco #ffdd00, error #d4351c, éxito #00703c, superficie #f3f2f1, bordes #b1b4b6. Arriba: una barra de marca de 10px en #1d70b8, después una cabecera negra de 60px con un logotipo blanco y una nav de texto plano. Fuente Public Sans: cuerpo 19px con line-height 1.5, títulos 700 a 48/36/27/24px con 30px de margen inferior, pies 16px, max-width 66ch, una sola columna con 30px de padding lateral. Formularios: una pregunta por página, etiquetas 19px 700 sobre los inputs, texto de ayuda 16px en #505a5f, inputs de 40px de alto con borde 2px #0b0c0c y radio 0, estado de error con borde izquierdo 4px #d4351c y una caja de resumen de errores en la parte superior. Botones: relleno #00703c, texto blanco 19px 700, canto inferior de 2px más oscuro, radio 0. Foco: fondo #ffdd00 de 3px y outline #0b0c0c de 3px. Enlace de salto primero. Sin imágenes, sin tarjetas, sin animación.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio en estilo institucional gubernamental siguiendo las convenciones del GOV.UK Design System. Fondo #ffffff, texto #0b0c0c, enlaces #1d70b8 subrayados (hover #003078), foco #ffdd00, error #d4351c, éxito #00703c, superficie #f3f2f1, bordes #b1b4b6. Arriba: una barra de marca de 10px en #1d70b8, después una cabecera negra de 60px con un logotipo blanco y una nav de texto plano. Fuente Public Sans: cuerpo 19px con line-height 1.5, títulos 700 a 48/36/27/24px con 30px de margen inferior, pies 16px, max-width 66ch, una sola columna con 30px de padding lateral. Formularios: una pregunta por página, etiquetas 19px 700 sobre los inputs, texto de ayuda 16px en #505a5f, inputs de 40px de alto con borde 2px #0b0c0c y radio 0, estado de error con borde izquierdo 4px #d4351c y una caja de resumen de errores en la parte superior. Botones: relleno #00703c, texto blanco 19px 700, canto inferior de 2px más oscuro, radio 0. Foco: fondo #ffdd00 de 3px y outline #0b0c0c de 3px. Enlace de salto primero. Sin imágenes, sin tarjetas, sin animación.

## Tokens
:root { --bg:#ffffff; --fg:#0b0c0c; --accent:#1d70b8; --focus:#ffdd00; --error:#d4351c; --surface:#f3f2f1; --line:#b1b4b6; --radius:0; --font:'Public Sans',sans-serif }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.