capsrock/nordic-civic-design-skill

Nordic Civic Design

Directrices para crear pantallas de servicios públicos basadas en los valores de HDS. Esta es una habilidad no oficial, sin relación con la ciudad de Helsinki.

El objetivo no es que parezca un servicio de la ciudad. Se utilizan los valores numéricos y la estructura conceptual, no los elementos que identifican a la ciudad.

Lo que no se usa

• Logotipo, escudo municipal, motivo de ondas: El logotipo es una marca registrada y no está permitida su reproducción ni modificación. El motivo de ondas es un elemento visual de la ciudad y no hemos podido verificar las condiciones de uso por terceros.
• Archivos de fuente Helsinki Grotesk: Es una tipografía comercial de Camelot Typefaces, prohibida su redistribución y uso para aprendizaje de IA. No se incluye ni se incrusta en sitios web o aplicaciones. Solo se especifica el nombre de la fuente en CSS.
• Expresiones que se hagan pasar por la ciudad de Helsinki: No se incluyen términos en el nombre o texto del producto que puedan confundirse con el oficial de la ciudad.

Tipografía

font-family: HelsinkiGroteskPro, "Schibsted Grotesk", Arial, "Noto Sans JP", sans-serif;

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Schibsted+Grotesk:wght@400;500;700&display=swap">

En entornos donde se tenga licencia, se usará la fuente original; en otros casos, Schibsted Grotesk. Esta es una elección de esta habilidad, no una especificación de HDS. La alternativa oficial es Arial.

Schibsted Grotesk tiene licencia OFL 1.1 y pesos de 400 a 900. Se usan directamente los tres niveles de HDS (400, 500, 700).

Para texto japonés, HDS no especifica nada. En pantallas en japonés, se usa Noto Sans JP como predeterminado, con una altura de línea de 1.75. Esta también es una decisión de esta habilidad.

Forma

Los criterios de forma son el núcleo del estilo HDS. Alterarlos cambia drásticamente la impresión visual.

• Esquinas sin redondear: Se aplican a botones, campos de entrada y tarjetas.
• Bordes de 2px: Se usan en botones, campos de entrada y tarjetas.
• Altura de componentes interactivos: 56px: Es el estándar para botones y campos. Los botones pequeños miden 44px.
• Sin sombras: HDS establece que "las sombras no forman parte de la marca". No se usan para expresar altura, énfasis ni decoración de texto. Solo se permiten en notificaciones emergentes y diálogos que se superpongan al contenido.
• Las tarjetas sin borde son la opción predeterminada: Es la opción predeterminada de HDS. Las tarjetas sin borde se colocan sobre un fondo gris claro (--color-black-5). Si se colocan sobre fondo blanco, se añade un borde de 2px. Esta última decisión es propia de esta habilidad.
• Las notificaciones llevan una banda izquierda de 8px: No se tiñe toda la superficie con un color intenso, sino que se usa un fondo claro y una banda izquierda.

Color

Los valores están en references/tokens.css, y la tabla de uso por color y contraste está en references/foundation.md. Los nombres de los colores (bus, tram, metro, engel, etc.) provienen del paisaje urbano de Helsinki.

• Color de acción: bus: --color-bus (#0000bf) se usa para la acción principal y enlaces. El hover es --color-bus-dark.
• Foco: coat-of-arms: Se usa un contorno de 3px con --color-focus-outline. Sobre fondos oscuros, se vuelve blanco.
• Texto del cuerpo: black-90: --color-black-90 (#1a1a1a). Los colores de texto son negro o blanco; otros colores solo se usan cuando hay una intención específica.
• Colores de acento se usan en áreas grandes: summer, suomenlinna, metro, etc., se emplean en bandas de encabezado o separadores. Usarlos de forma dispersa reduce la personalidad. Se recomienda un color por pantalla. Esta recomendación es propia de esta habilidad.
• Solo cuatro colores de marca pueden tener texto blanco sobre fondo blanco: bus, brick, coat-of-arms, tram. Metro solo para texto grande; summer, engel y otros colores claros se usan como fondo.
• Las variantes -light y -dark no se usan como color principal: Solo para estados de componentes (hover, etc.) y para distinguir tipos de información.
• Los colores de estado se separan de los acentos: error, success, alert, info solo se usan para indicar estado. No se usan colores de marca para mostrar estado. No se comunica solo con color; se añade texto o icono.

Las combinaciones de texto y fondo cumplen con el nivel AA de WCAG 2.1. El texto del cuerpo tiene una relación de contraste de al menos 4.5:1; el texto grande, de al menos 3:1. El color del texto sobre colores de marca sigue la tabla de foundation.md (sobre bus, coat-of-arms, tram, brick es blanco; sobre el resto es black-90). El texto gris usa hasta --color-black-60; no se usan --color-black-50 o inferiores sobre fondo blanco.

Espaciado

La unidad base es 4px. Se usan los valores --spacing-* y --spacing-layout-*, sin crear valores intermedios.

• Interior de componentes y entre componentes: --spacing-* de 8, 12, 16, 24, 32px
• Entre secciones: --spacing-layout-* de 48, 64, 96, 128px
• Los espacios pequeños agrupan y los grandes separan: Los elementos cercanos parecen relacionados. Cuanto más espaciado, más importante parece el elemento.
• La densidad varía según el carácter de la pantalla: Las pantallas de comunicación o informativas tienen más espacio; las pantallas de trabajo con mucha información, menos.

Ante la duda, se elige el espacio más grande. La amplitud de los márgenes da serenidad a la pantalla. Esta última frase es una decisión de esta habilidad. La cuadrícula es de 12 columnas, ancho máximo de 1200px, gutter de 24px (16px en móvil).

Texto

• Tres niveles de peso: Cuerpo 400, botones y etiquetas de formulario 500, énfasis 700.
• Tamaño del cuerpo desde 16px: 16px es el mínimo del cuerpo en HDS, utilizable en cualquier ancho. En pantallas con poco texto, se usa 18px como predeterminado, y se reduce a 16px en pantallas estrechas. 14px solo para texto auxiliar y dentro de componentes.
• Dos escalas de títulos: En escritorio, h1 es 64px y h2 es 48px. En móvil y pantallas de trabajo, h1 es 40px y h2 es 32px. La jerarquía de títulos se usa según el significado; si solo se desea cambiar la apariencia, se usa el token correspondiente.
• Altura de línea: Para texto largo del cuerpo, 1.5; para párrafos cortos y texto introductorio, 1.2; para títulos de una línea y componentes, 1; para texto pequeño y citas, 1.75.

El peso de los títulos es 700 por defecto. Esta es una decisión de esta habilidad; la documentación de HDS no especifica el peso de los títulos. La tabla de valores y su uso están en references/foundation.md.

Componentes

Antes de crear componentes, leer references/components.md. Allí se encuentran los valores y usos de botones, campos de entrada, casillas de verificación, notificaciones, tarjetas y enlaces. Los puntos clave son:

• Un botón primary por pantalla: Solo para la acción más importante. Cancelar o cerrar se hace con un botón supplementary, que no tiene borde, por lo que se le añade un icono. La navegación entre páginas se hace con enlaces, no con botones.
• Todos los campos de entrada deben tener etiqueta: Los campos obligatorios se marcan con * y el significado de la marca se explica al principio del formulario.
• Las notificaciones solo para información importante: Como regla general, solo una notificación en línea a la vez; no se añaden dinámicamente. Las notificaciones importantes (errores, etc.) no se cierran automáticamente.
• No se hace clic en toda la tarjeta: Si se desea que toda la tarjeta sea clicable, se usa Linkbox.
• Los enlaces externos llevan icono: Por norma, no se abren en una pestaña nueva.

Los componentes no mencionados aquí se construyen a partir de los criterios de forma, color y espaciado. No se escriben como valores de HDS aquellos que no se hayan verificado como tales.

Lista de verificación

Al terminar, revisar lo siguiente:

1. No quedan esquinas redondeadas ni sombras (excepto en notificaciones emergentes y diálogos)
2. No se usan valores de color o espaciado que no estén en los tokens
3. La altura de los componentes interactivos es de 44px o más
4. El contorno de foco es visible
5. La relación de contraste entre texto y fondo cumple con AA
6. No se usa logotipo, motivo de ondas ni nombre de la ciudad

Fuentes

Los valores de tokens y componentes provienen de hds-design-tokens y hds-core versión 6.0.7, y los usos de la documentación oficial de HDS (https://hds.hel.fi/ ; el texto original está en site/src/docs del mismo repositorio). Todo bajo licencia MIT, Copyright (c) 2023 City of Helsinki. El texto de la licencia está en references/LICENSE-HDS.txt. Al distribuir esta habilidad, debe acompañarse de este archivo. El origen de los nombres de colores se basa en la guía de identidad visual de la ciudad de Helsinki.