# Sistema de design Helsinki ## Prévia da interface do sistema de design Helsinki Tente revisar com poucos tópicos, siga o link do erro, corrija a seleção e volte à revisão. ## Referência de design do sistema de design Helsinki Pacote hds-core5.2.2 CSS e orientações oficiais para formulários. Estilos nativos; fallback Arial; regra original de seleção mínima. ### Tokens de tipografia | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --font-default | HelsinkiGroteskPro, Arial, sans-serif | As fontes Helsinki protegidas por direitos autorais não fazem parte do pacote Core; a demonstração usa o fallback nativo Arial. | | --fontsize-body-s/m/l/xl | 14 /16 /18 /20px | No tamanho padrão da raiz; escolha um papel, não tamanhos arbitrários para cada campo. | | --fontsize-heading-xxl/xl | 64 /48px | Títulos maiores. | | --fontsize-heading-xl-mobile | 40px | Token explícito; a prévia alterna em 576px por decisão do aplicativo. | | --fontsize-heading-l/m/s | 32 /24 /20px | Títulos secundários. | | --lineheight-s/m/l/xl | 1 /1.2 /1.5 /1.75 | Multiplicadores, não alturas em pixels. | ### Espaçamento de componentes e layouts | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Component scale | 2,4,8,12,16,24,32,40,48,56,64,72px | de spacing-4-xs a spacing-5-xl. | | Layout scale | 16,24,32,48,64,96,128px | de spacing-layout-2-xs a spacing-layout-2-xl. | | Breakpoints | 320,576,768,992,1248,1440px | de xs a xxl; os valores de tokens declarados não criam consultas de mídia por si só. | | Container widths | 288,544,720,944,1200px | Larguras de referência de xs a xl. | | Checkbox geometry | 24px size;2px border;3px focus outline | CSS real do Core 5.2.2. | | Button minimum | 56px; square corners | Borda de 2px com preenchimento derivado de spacing-s/l. | ### Cores semânticas e da paleta | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Bus | #0000bf | Tema padrão de seleção das caixas de seleção e do botão principal. | | Coat of arms / focus | #0072c6 | Azul urbano distinto e papel de foco. | | Copper | #00d7a7 | Cor de destaque da paleta; linha do cabeçalho da demonstração. | | Error / light | #b01038 /#f6e2e6 | Feedback de validação; não deve ser confundido com o Brick decorativo. | | Success / light | #007a64 /#e2f5f3 | Papel de resultado confirmado. | | Info / alert | #0062b9 /#ffda07 | Papéis de informação e atenção. | | Text / secondary | #1a1a1a /#595959 | black-90 e black-60. | ### Estrutura e recuperação do formulário | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Selection group | fieldset + legend | A legenda descreve a escolha; os rótulos descrevem as opções. | | Vertical items | hds-selection-group__items--vertical | Evite forçar opções longas a caber em uma única linha horizontal. | | Error summary | Notification error variant with linked error list | Coloque abaixo do título do formulário; após um envio malsucedido, mova o foco para o título. | | Inline error | hds-selection-group__error-text | Mantenha as instruções auxiliares visíveis durante a correção. | | Application rule | At least two topics | Validação original do cenário, não um padrão das caixas de seleção HDS. | ## Guia completo do sistema de design Helsinki Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## Core do sistema de design Helsinki e limites de React ### Escolha a implementação que você realmente executa > O HDS fornece Core CSS, componentes React e tokens de design. Este exemplo fixa a versão hds-core5.2.2, o pacote baixado e inspecionado para a demonstração. Os números de versão dos lançamentos do repositório podem diferir da versão de um pacote específico; portanto, uma tag mais recente do repositório não comprova que este exemplo execute essa versão. O Core fornece variáveis básicas e estilos individuais dos componentes. Ele não fornece o estado do aplicativo de formulário usado aqui. A lógica de seleção, validação, revisão e alteração é original de JavaScript e foi criada com inputs nativos HTML e o padrão documentado de formulários HDS. Consulte a especificação de apoio ## Tipografia do sistema de design Helsinki e limites das fontes ### Use o fallback nativo de forma transparente A variável de fonte lista primeiro HelsinkiGroteskPro, seguido por Arial e sans-serif. O README do Core exclui explicitamente os arquivos de fonte Helsinki por motivos de direitos autorais. A prévia mantém o fallback em vez de baixar fontes restritas ou alegar silenciosamente que a renderização corresponde exatamente à marca. O token básico do corpo do texto é 16px, com entrelinha de 1.5. Heading-xl tem 48px e o token para dispositivos móveis é 40px; a prévia alterna entre eles em 576px. Esses são valores nomeados, mas uma variável CSS que contém um ponto de interrupção não cria comportamento responsivo automaticamente. A regra de mídia explícita pertence à composição do aplicativo. Consulte a especificação de apoio ## Dois sistemas de espaçamento do sistema de design Helsinki ### Separe os intervalos entre componentes do ritmo da página O HDS distingue uma sequência de espaçamento para componentes de uma sequência maior para layouts. A primeira inclui 2, 4, 8, 12, 16 e 24px, antes de aumentar até 72px. O espaçamento de layout chega a 128px. Usar spacing-layout-xl como intervalo entre caixas de seleção adjacentes deixaria o grupo excessivamente espaçado, mesmo que a variável seja válida. O componente de caixa de seleção define um controle de 24px, borda de 2px e contorno de foco de 3px. O botão tem altura mínima de 56px e cantos retos. A prévia mantém essas formas nativas, enquanto o formulário fica em um contêiner do aplicativo limitado à largura de referência publicada de 720px. Consulte a especificação de apoio ## Papéis das cores em um formulário no sistema de design Helsinki ### Não confunda nomes da paleta com feedback O tema interativo padrão usa Bus blue, enquanto o contorno de foco usa Coat of arms blue. O feedback de erro usa um tom berry separado e uma superfície de erro em tom claro. Uma cor de destaque da paleta, como Copper, pode compor o cabeçalho, mas não deve substituir o papel de erro só por parecer mais marcante. O erro em linha do grupo de seleção combina texto, uma borda esquerda contrastante e um ícone. Ele não depende apenas da cor vermelha. Os links do resumo de erros usam a cor interativa familiar para que as pessoas reconheçam o caminho de volta ao campo. Consulte a especificação de apoio ## Anatomia de um grupo de caixas de seleção no sistema de design Helsinki ### Um grupo tem uma pergunta e várias respostas A estrutura nativa é composta por um fieldset com uma legend, um contêiner de itens e elementos individuais para cada caixa de seleção. Cada input vem imediatamente antes de seu rótulo porque a folha de estilos usa essa relação para os estados visuais. A legenda explica a tarefa de seleção; cada rótulo identifica um tópico disponível. A demonstração exige pelo menos dois tópicos, uma regra de negócio original. Caixas de seleção são adequadas porque várias opções podem permanecer selecionadas. Um grupo de botões de opção expressaria uma escolha mutuamente exclusiva e entraria em contradição com a tarefa. A dica do fieldset permanece visível antes e depois da validação. ```
Topics for your afternoon

Choose at least two topics.

``` Referência de código Consulte a especificação de apoio ## Erros vinculados e recuperação no sistema de design Helsinki ### Destaque o problema sem perder o que já foi preenchido O HDS recomenda exibir um resumo de erros abaixo do título do formulário após um envio malsucedido. A lista contém links para os controles com erro, e o foco se move para o título do resumo. A demonstração segue essa sequência: ao tentar revisar sem selecionar nenhum tópico ou selecionar apenas um, o resumo e a mensagem em linha aparecem; o link move o foco para a primeira caixa de seleção. Após a tentativa inicial, cada alteração na seleção verifica novamente o mínimo exigido. Quando dois tópicos são selecionados, as duas apresentações de erro desaparecem sem apagar as opções selecionadas. Se houver outra tentativa malsucedida, o foco volta ao título do resumo. A regra é verificada novamente durante a revisão; em um serviço real, o feedback no lado do cliente não substitui a validação no servidor. 1. Tente revisar sem selecionar tópicos e confirme que o foco vai para o resumo. 2. Siga o link e escolha dois tópicos; confirme que o erro desaparece. 3. Abra a revisão local, volte para alterar os tópicos e confirme que as duas seleções foram mantidas. Consulte a especificação de apoio ## Recursos do sistema de design Helsinki e exemplo completo ### Carregue o arquivo base e os componentes selecionados O pacote Core separa base.css dos estilos dos componentes. Importar apenas o arquivo base disponibiliza variáveis e tipografia, mas não a estrutura das caixas de seleção nem das notificações. A configuração indica os arquivos exatos usados neste exemplo, mantendo o conjunto de recursos menor do que o pacote com todos os componentes. O exemplo completo inclui validação e redefinição no aplicativo. O estado final é chamado de revisão local, pois nada é registrado nem enviado. Limpar a seleção é uma ação deliberada que redefine as escolhas e o histórico de validação e, em seguida, move o foco para a primeira entrada. Essa ação não é acionada por um erro comum de campo. - base.css fornece cores, espaçamento, tipografia e dimensões de referência. - Os estilos de checkbox e selection-group fornecem controles agrupados e feedback em linha. - Os estilos de notification e button fornecem a superfície do resumo de erros e as ações. Consulte a especificação de apoio ## O que o exemplo comprova sobre o sistema de design Helsinki ### Detalhe de implementação sem alegar um serviço inexistente A prévia demonstra estilos reais de componentes HDS, foco pelo teclado, correção e preservação de dados em 1440, 768 e 390 px. Não afirma ser uma auditoria completa de acessibilidade. Um serviço municipal real multilíngue também precisa de rótulos localizados, metadados de idioma adequados, regras no servidor e uma resposta confirmada pelo backend do serviço. O código-fonte é licenciado pelo MIT, mas a fonte personalizada da cidade tem seus próprios direitos de uso. Este exemplo independente para fins de aprendizado usa tópicos fictícios de programas e não utiliza a identidade oficial de Helsinki. A aparência visível e o estado local nunca devem ser confundidos com uma inscrição real em um evento. Consulte a especificação de apoio ## Exemplos de componentes do sistema de design Helsinki ### Estrutura nativa de caixas de seleção agrupadas Fieldset e legend apresentam a pergunta; entradas e rótulos expressam as respostas múltiplas. ```
Topics for your afternoon

Choose at least two topics.

``` Referência de código ### Fluxo completo de seleção com erros vinculados Foco no resumo de erros, correção vinculada, revisão, alteração e limpeza da seleção. ``` Plan a skills afternoon
COMMUNITY SKILLS · LOCAL PLAN

Plan a skills afternoon

Select at least two topics for an example programme. Nothing is registered or sent.

Topics for your afternoon

Choose two or more. You can change your selection before reviewing the plan.

0 topics selected.

``` Referência de código ## Configuração do agente do sistema de design Helsinki ### Ponto de partida para implementação Caminhos exatos dos recursos do Core. O código do aplicativo cuida da validação e da revisão; HelsinkiGroteskPro não está incluída. O ZIP do exemplo funcional completo em Sources também fornece as dependências exatas da prévia e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/helsinki.html. Não abra exemplos baseados em módulos usando file://. ``` npm install hds-core@5.2.2 # CSS imports in a bundler: # import 'hds-core/lib/base.css'; # import 'hds-core/lib/components/checkbox/checkbox.css'; # import 'hds-core/lib/components/selection-group/selection-group.css'; # import 'hds-core/lib/components/notification/notification.css'; # import 'hds-core/lib/components/button/button.css'; # In plain HTML, copy these files into public assets and link base.css first. # HelsinkiGroteskPro is not bundled; the native font stack falls back to Arial. ``` ### Um prompt para seu projeto ``` Use HDS Core 5.2.2: base e o componente selecionado CSS. Agrupe caixas de seleção relacionadas com fieldset/legend, preserve rótulos e dicas e use tokens semânticos de erro. Se a revisão falhar, mostre erros vinculados abaixo do título do formulário e mova o foco para o título do resumo. Verifique novamente após a correção, preserve os valores selecionados e diferencie a revisão local de um envio confirmado pelo servidor. ``` ## Fontes e escopo do sistema de design Helsinki Exemplo independente de OpenDesign. Sem recurso de fonte Helsinki nem identidade de serviço; sem inscrição ou resultado de backend. - Configuração do Core Separação entre CSS base/component e limite de direitos da fonte. - Criação de formulários Agrupamento, escolha de controles e ordem do foco. - Padrão de validação Posicionamento do resumo, links, correção e limites do backend. - Tokens de design Tipografia, espaçamento e funções das cores. - Repositório oficial Arquitetura do pacote e licença MIT. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Recursos relacionados ao sistema de design Helsinki ### Rivet Crie páginas universitárias com a escala real de tokens de Rivet, a anatomia de componentes de HTML e as interações nativas pelo teclado. Explore uma página compacta de detalhes de oficina com abas acessíveis sobre informações de visita. ### Digital Agency sistema de design Crie interfaces japonesas legíveis para serviços públicos com funções de texto do DADS, tokens semânticos e a anatomia nativa dos componentes de HTML. Experimente uma consulta funcional de recibos com erros de formato, resultado sem correspondências e um registro de status que pode ser revisado. ### KERN Crie uma interface nativa de KERN com tipografia verificada, temas semânticos, elementos expansíveis e um fluxo de confirmação reversível. - [Referência de implementação](https://hds.hel.fi/patterns/forms/form-validation/) - [Fonte](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Fonte](https://hds.hel.fi/patterns/forms/form-building/) - [Consulte a especificação de apoio](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [Consulte a especificação de apoio](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Referência de código](https://hds.hel.fi/patterns/forms/form-building/) - [Consulte a especificação de apoio](https://hds.hel.fi/patterns/forms/form-building/) - [Consulte a especificação de apoio](https://hds.hel.fi/patterns/forms/form-validation/) - [Consulte a especificação de apoio](https://github.com/City-of-Helsinki/helsinki-design-system) - [Referência de código](https://hds.hel.fi/patterns/forms/form-validation/) - [Configuração do Core Separação entre CSS base/component e limite de direitos da fonte.](https://github.com/City-of-Helsinki/helsinki-design-system/blob/development/packages/core/README.md) - [Criação de formulários Agrupamento, escolha de controles e ordem do foco.](https://hds.hel.fi/patterns/forms/form-building/) - [Padrão de validação Posicionamento do resumo, links, correção e limites do backend.](https://hds.hel.fi/patterns/forms/form-validation/) - [Tokens de design Tipografia, espaçamento e funções das cores.](https://github.com/City-of-Helsinki/helsinki-design-system/tree/development/packages/design-tokens) - [Repositório oficial Arquitetura do pacote e licença MIT.](https://github.com/City-of-Helsinki/helsinki-design-system)