nordic-civic-design-skill

Nordic Civic Design

Guia para criar telas de serviços públicos com base nos valores do HDS. Este é um skill não oficial, não relacionado à cidade de Helsinque.

O objetivo não é fazer com que o resultado pareça um serviço da cidade. Os valores e a estrutura conceitual são usados, mas elementos que identifiquem a cidade não são utilizados.

O que não usar

• Logotipo, brasão e motivo das ondas: O logotipo é uma marca registrada e não pode ser recriado ou modificado. O motivo das ondas é um elemento visual da cidade e as condições de uso por terceiros não foram verificadas.
• Arquivos de fonte Helsinki Grotesk: É uma fonte comercial da Camelot Typefaces, cuja redistribuição e uso para treinamento de IA são proibidos. Não a incorporamos nem a embutimos em sites ou aplicativos. Apenas especificamos o nome da fonte no CSS.
• Expressões que se intitulem "Cidade de Helsinque": Não incluímos termos no nome ou no texto do resultado que possam ser interpretados erroneamente como oficiais da cidade.

Tipografia

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">

Em ambientes onde o usuário possui a licença, a fonte original é usada; caso contrário, ela é substituída por Schibsted Grotesk. Esta não é uma especificação do HDS, mas uma escolha deste skill. A alternativa oficial é Arial.

Schibsted Grotesk está sob a licença OFL 1.1 e possui pesos de 400 a 900. Os três pesos do HDS (400, 500, 700) podem ser usados diretamente.

O HDS não especifica fontes para japonês. Em telas em japonês, Noto Sans JP é o padrão, com altura de linha de 1.75. Esta também é uma decisão deste skill.

Formas

Os padrões de forma são o cerne da estética HDS. Alterá-los muda drasticamente a impressão.

• Bordas arredondadas em 0: Não são usadas em botões, campos de entrada ou cartões.
• Bordas de 2px: Usadas em botões, campos de entrada e cartões.
• Altura dos componentes interativos: 56px: Padrão para botões e campos de entrada. Botões pequenos têm 44px.
• Sem sombras: O HDS afirma explicitamente que "sombras não fazem parte da marca". Elas não são usadas para expressar profundidade, destaque ou decoração de texto. Apenas notificações toast e diálogos sobrepostos a conteúdo podem usar sombras.
• Cartões sem borda por padrão: Este é o padrão do HDS. Cartões sem borda são colocados sobre uma superfície cinza claro (--color-black-5). Quando colocados sobre fundo branco, usam uma borda de 2px. Esta regra para fundo branco é uma decisão deste skill.
• Notificações com faixa de 8px à esquerda: Em vez de preencher toda a superfície com uma cor forte, usam um fundo claro e uma faixa colorida à esquerda.

Cores

Os valores estão em references/tokens.css. A tabela de uso e contraste para cada cor está em references/foundation.md. Os nomes das cores (bus, tram, metro, engel, etc.) são inspirados na paisagem urbana de Helsinque.

• Cor de ação: bus: --color-bus (#0000bf) é usada para ações primárias e links. O hover usa --color-bus-dark.
• Foco: coat-of-arms: Usa um contorno de 3px com --color-focus-outline. Em fundos escuros, é branco.
• Texto principal: black-90: --color-black-90 (#1a1a1a). As cores do texto são preto ou branco; outras cores são usadas apenas com intenção específica.
• Cores de destaque usadas em superfícies: Cores como summer, suomenlinna, metro são usadas em grandes áreas, como faixas de título ou separadores. Usá-las em pequenos detalhes não comunica a identidade visual. A recomendação é usar uma cor por tela. Esta é uma diretriz deste skill.
• Apenas 4 cores de marca podem ser usadas como texto sobre fundo branco: bus, brick, coat-of-arms e tram. Metro é permitida apenas para textos grandes. Cores claras como summer e engel são usadas apenas como superfície sobre fundo branco.
• Variantes -light e -dark não são usadas como cor principal: São usadas apenas para estados de componentes (como hover) e para distinguir tipos de informação.
• Cores de estado separadas das de destaque: As cores error, success, alert e info são usadas apenas para comunicar estados. Cores de marca não são usadas para indicar estado. A comunicação nunca é feita apenas com cor; um texto ou ícone acompanha.

As combinações de texto e fundo atendem ao nível AA do WCAG 2.1. O texto do corpo tem uma taxa de contraste de no mínimo 4.5:1; textos grandes, de no mínimo 3:1. A cor do texto sobre cores de marca segue a tabela em foundation.md (branco sobre bus, coat-of-arms, tram, brick; black-90 sobre as demais). Texto cinza usa no máximo --color-black-60; --color-black-50 ou inferior não é usado sobre fundo branco.

Espaçamento

O espaçamento é baseado em uma grade de 4px. Use os tokens --spacing-* e --spacing-layout-* e não crie valores intermediários.

• Interno dos componentes e entre componentes: --spacing-* com valores de 8, 12, 16, 24, 32px
• Entre seções: --spacing-layout-* com valores de 48, 64, 96, 128px
• Espaçamentos pequenos agrupam; espaçamentos grandes separam: Itens próximos parecem relacionados. Quanto maior o espaçamento ao redor de um elemento, mais importante ele parece.
• Densidade varia conforme o tipo de tela: Telas de comunicação e informação pública são mais espaçadas; telas de trabalho com muita informação são mais compactas.

Em caso de dúvida, opte pelo espaçamento maior. A amplitude dos espaçamentos cria a calma visual da tela. Esta é uma decisão deste skill. O grid é de 12 colunas, largura máxima de 1200px e calha de 24px (16px em dispositivos móveis).

Tipografia

• Três pesos: Corpo do texto 400, rótulos de botões e formulários 500, destaque 700.
• Tamanho do corpo do texto a partir de 16px: 16px é o tamanho mínimo do HDS para o corpo do texto, utilizável em qualquer largura de tela. Em telas com pouco texto, use 18px como padrão, reduzindo para 16px em telas estreitas. 14px é usado apenas para texto auxiliar e dentro de componentes.
• Duas escalas de título: No desktop, h1 tem 64px, h2 tem 48px. Em dispositivos móveis e telas de trabalho, h1 tem 40px, h2 tem 32px. A hierarquia dos títulos é usada semanticamente; para alterar apenas a aparência, mude o tamanho com tokens.
• Altura da linha: Texto longo do corpo: 1.5; parágrafos curtos e texto de introdução: 1.2; títulos de uma linha e componentes: 1; texto pequeno e citações: 1.75.

O peso padrão dos títulos é 700. Esta é uma decisão deste skill, pois o HDS não especifica o peso para títulos em sua documentação. A tabela de valores e casos de uso está em references/foundation.md.

Componentes

Leia references/components.md antes de criar componentes. Lá estão os valores e casos de uso para botões, campos de entrada, caixas de seleção, notificações, cartões e links. Os pontos principais são:

• Botão primary: um por tela: Apenas para a ação mais importante da tela. Cancelar e fechar são botões supplementary, que não têm borda, portanto um ícone deve ser adicionado. Navegação entre páginas é feita com links, não botões.
• Campos de entrada sempre com rótulo: Campos obrigatórios são marcados com * e o significado da marca é explicado no início do formulário.
• Notificações apenas para informações importantes: Use no máximo uma notificação inline por vez e não as adicione dinamicamente. Notificações importantes (como erros) não desaparecem automaticamente.
• Não torne o cartão inteiro clicável: Se desejar que o cartão inteiro seja clicável, use um Linkbox.
• Links externos com ícone: Em princípio, não os abra em uma nova aba.

Para componentes não listados aqui, construa-os com base nos padrões de forma, cor e espaçamento. Não escreva nada como valor do HDS que não tenha sido verificado como tal.

Lista de verificação

Ao terminar, verifique:

1. Não há bordas arredondadas ou sombras (exceto sombras em notificações toast e diálogos)
2. Não foram usados valores de cor ou espaçamento que não estejam nos tokens
3. A altura dos componentes interativos é de no mínimo 44px
4. O contorno de foco está visível
5. A taxa de contraste entre texto e fundo atende ao nível AA
6. O logotipo, o motivo das ondas e o nome da cidade não foram usados

Fontes

Os valores de tokens e componentes foram extraídos do hds-design-tokens e hds-core versão 6.0.7. Os casos de uso foram baseados na documentação oficial do HDS (https://hds.hel.fi/, o texto original está no diretório site/src/docs do mesmo repositório). Ambos estão sob a licença MIT, Copyright (c) 2023 City of Helsinki. O texto da licença está em references/LICENSE-HDS.txt. Ao distribuir este skill, distribua também este arquivo. A origem dos nomes das cores segue o guia de identidade visual da cidade de Helsinque.