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.
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.
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.
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.
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.
html
<fieldset class="hds-selection-group" aria-describedby="topics-hint">
<legend class="hds-selection-group__legend">Topics for your afternoon</legend>
<p id="topics-hint">Choose at least two topics.</p>
<div class="hds-selection-group__items hds-selection-group__items--vertical">
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="repair" value="Repair and reuse">
<label class="hds-checkbox__label" for="repair">Repair and reuse</label>
</div>
<div class="hds-checkbox">
<input class="hds-checkbox__input" type="checkbox" id="garden" value="Urban gardening">
<label class="hds-checkbox__label" for="garden">Urban gardening</label>
</div>
</div>
</fieldset>
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.
Tente revisar sem selecionar tópicos e confirme que o foco vai para o resumo.
Siga o link e escolha dois tópicos; confirme que o erro desaparece.
Abra a revisão local, volte para alterar os tópicos e confirme que as duas seleções foram mantidas.
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.
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.
Foco no resumo de erros, correção vinculada, revisão, alteração e limpeza da seleção.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Plan a skills afternoon</title><link rel="stylesheet" href="vendor/hds-core-5.2.2/base.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/checkbox.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/selection-group.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/notification.css"><link rel="stylesheet" href="vendor/hds-core-5.2.2/button.css"><style>*{box-sizing:border-box}body{margin:0;padding:var(--spacing-layout-s) var(--spacing-s);font-family:var(--font-default);color:var(--color-black-90)}main{max-width:720px;margin:auto}h1{margin-top:8px}header{border-top:8px solid var(--color-copper);padding-top:var(--spacing-m)}.hds-selection-group{margin:24px 0}.hds-notification{margin:24px 0}.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}footer{font-size:14px;line-height:1.5;margin-top:32px;border-top:1px solid var(--color-black-20);padding-top:16px}#review{background:var(--color-silver-light);padding:24px;margin-top:24px}[hidden]{display:none!important}@media(max-width:575px){.heading-xl{font-size:var(--fontsize-heading-xl-mobile)}}button{max-width:100%}</style><main class="text-body"><header><small>COMMUNITY SKILLS · LOCAL PLAN</small><h1 class="heading-xl">Plan a skills afternoon</h1><p>Select at least two topics for an example programme. Nothing is registered or sent.</p></header><form id="form" novalidate><div id="summary" class="hds-notification hds-notification--error" hidden><div class="hds-notification__content"><h2 id="summary-heading" class="hds-notification__label" tabindex="-1">Check your topic selection</h2><div class="hds-notification__body"><ul><li><a href="#repair" id="error-link">Choose at least two topics</a></li></ul></div></div></div><fieldset class="hds-selection-group" aria-describedby="hint field-error"><legend class="hds-selection-group__legend">Topics for your afternoon</legend><p id="hint">Choose two or more. You can change your selection before reviewing the plan.</p><div class="hds-selection-group__items hds-selection-group__items--vertical"><div class="hds-checkbox"><input id="repair" type="checkbox" class="hds-checkbox__input" value="Repair and reuse"><label class="hds-checkbox__label" for="repair">Repair and reuse</label></div><div class="hds-checkbox"><input id="digital" type="checkbox" class="hds-checkbox__input" value="Everyday digital skills"><label class="hds-checkbox__label" for="digital">Everyday digital skills</label></div><div class="hds-checkbox"><input id="garden" type="checkbox" class="hds-checkbox__input" value="Urban gardening"><label class="hds-checkbox__label" for="garden">Urban gardening</label></div></div><div id="field-error" class="hds-selection-group__error-text" hidden>Choose at least two topics.</div></fieldset><p id="count" role="status">0 topics selected.</p><div class="actions"><button class="hds-button hds-button--primary" type="submit">Review local plan</button><button id="reset" class="hds-button hds-button--secondary" type="button">Clear selection</button></div></form><section id="review" hidden tabindex="-1"><h2 class="heading-m">Your selected topics</h2><ul id="selected"></ul><p>This is a local review, not a booking confirmation.</p><button id="change" class="hds-button hds-button--secondary">Change topics</button></section><footer>Native HDS Core5.2.2 styles with Arial fallback. Original selection rule and local review. No Helsinki branding, registration or backend.</footer></main><script>let attempted=false;const boxes=[...document.querySelectorAll('input[type=checkbox]')];const values=()=>boxes.filter(x=>x.checked);function validate(focus=false){const n=values().length;document.querySelector('#count').textContent=n+' topics selected.';const bad=attempted&&n<2;document.querySelector('#summary').hidden=!bad;document.querySelector('#field-error').hidden=!bad;boxes.forEach(x=>{if(bad)x.setAttribute('aria-invalid','true');else x.removeAttribute('aria-invalid')});if(bad&&focus)document.querySelector('#summary-heading').focus();return !bad}boxes.forEach(x=>x.onchange=()=>validate());document.querySelector('#error-link').onclick=e=>{e.preventDefault();boxes[0].focus()};document.querySelector('#form').onsubmit=e=>{e.preventDefault();attempted=true;if(!validate(true))return;const list=document.querySelector('#selected');list.replaceChildren();values().forEach(x=>{const li=document.createElement('li');li.textContent=x.value;list.append(li)});document.querySelector('#form').hidden=true;document.querySelector('#review').hidden=false;document.querySelector('#review').focus()};document.querySelector('#change').onclick=()=>{document.querySelector('#form').hidden=false;document.querySelector('#review').hidden=true;boxes[0].focus()};document.querySelector('#reset').onclick=()=>{boxes.forEach(x=>x.checked=false);attempted=false;validate();boxes[0].focus()};</script></html>
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://.
bash
npm install [email protected]
# 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
Prompt para agente de IA
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.
05
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.
