# Sistema de design KERN

## KERN Prévia da interface do sistema de design

Edite a nota, cancele ou confirme o descarte, restaure-a e altere a aparência.

## KERN Referência de design do sistema de design

Extraído de @kern-ux/native 2.8.2; as escolhas de layout do aplicativo são identificadas separadamente.

### Tipografia e geometria

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Default font | Fira Sans | Carregue o arquivo font-face incluído no pacote; apenas CSS não carrega arquivos de fontes. |
| Static sizes | 16 / 18 / 21px | Texto estático pequeno, médio e grande. |
| Adaptive sizes below 768px | 21 / 26 / 32 / 48px | Tipografia adaptável de média a 2x-grande. |
| Adaptive sizes from 768px | 24 / 32 / 48 / 72px | O pacote altera os tokens adaptáveis nesta media query. |
| Font weights | 400 / 500 / 600 | Regular, médio e semibold. |
| Spacing | 0, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192px | Tokens de espaçamento nomeados, não uma escala de incrementos uniformes. |
| Border widths | 0 / 1 / 2 / 4 / 8px | A borda padrão é 2px. |
| Radii | 0 / 2 / 4 / 8px / 50% | Nenhum, pequeno, padrão, grande e circular. |
| Focus outline | 4px | O contorno padrão de foco visível usa a função contextual de foco de ação. |
| Specimen width | 800px | Escolha original do aplicativo, não um token de contêiner KERN. |
### Mapeamento de cores semânticas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Light text | neutral-950 | --kern-color-layout-text-default |
| Dark text | neutral-025 | A mesma função semântica muda conforme o tema. |
| Light action | darkblue-700 | --kern-color-action-default; on-action é branco. |
| Dark action | darkblue-300 | On-action fica preto. |
| Light / dark background | white / black | --kern-color-layout-background-default |
| Theme override | data-kern-theme="light" or "dark" | O atributo explícito prevalece sobre a preferência do sistema. |
## KERN Guia completo do sistema de design

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.

## Sistema de design KERN: HTML nativo, CSS e comportamento do navegador

### O que o pacote oferece

> KERN nativo 2.8.2 inclui o componente CSS e as fontes. O exemplo importa esses arquivos diretamente: o botão, a área de texto, Details e Dialog são elementos nativos com classes KERN. Não é necessário um provider React nem um construtor de componentes JavaScript. A aplicação fornece a lógica de decisão em torno do diálogo; apenas o estilo não limpa um campo de entrada.

1. Instale o pacote nativo fixado.

2. Copie a folha de estilos e as fontes em conjunto, preservando os caminhos relativos.

3. Salve o exemplo completo abaixo e disponibilize o diretório por HTTP.

Consulte a especificação de apoio

## sistema de design KERN com Fira Sans e tipografia adaptável

### Carregue a tipografia explicitamente

kern.min.css nomeia Fira Sans; fonts/fira-sans.css declara as fontes propriamente ditas e os arquivos WOFF2 relativos. Manter o diretório de fontes intacto evita que uma folha de estilos aparentemente correta use silenciosamente uma fonte alternativa. Os tamanhos de texto estáticos continuam em 16, 18 e 21px, enquanto os tokens adaptáveis de títulos e cabeçalhos mudam em 768px. Use um elemento de cabeçalho para definir a hierarquia e a classe KERN apropriada para sua apresentação visual. O exemplo mantém um único h1 e atribui ao diálogo seu próprio h2.

Consulte a especificação de apoio

## sistema de design KERN: espaçamento, largura e layout responsivo

### Separe os tokens da composição

KERN disponibiliza tokens de espaçamento nomeados de 0 a 192px, incluindo incrementos de 2px e 4px nas medidas menores. Os tokens de borda e raio seguem escalas separadas. O exemplo usa um ritmo vertical de 24px e uma linha de ações que quebra automaticamente. O limite de conteúdo de 800px e o limite de 560px do diálogo são escolhas explícitas da aplicação; nenhum dos dois é apresentado como um contêiner universal de KERN. Em telas estreitas, o preenchimento da página passa a 16px e a largura do diálogo permanece dentro da área visível. Não se aplica uma altura mínima baseada na altura da janela ao documento, evitando um ciclo de realimentação ao incorporá-lo.

Consulte a especificação de apoio

## sistema de design KERN: cores semânticas e aparência

### Alterne os papéis, não valores hexadecimais isolados

O pacote usa propriedades semânticas de CSS para texto, ação, plano de fundo e foco. As paletas clara e escura alteram esses papéis em conjunto. Por exemplo, action-default corresponde a darkblue-700 no modo claro e a darkblue-300 no modo escuro, enquanto a cor do primeiro plano muda de branco para preto. O exemplo define data-kern-theme em html e apresenta um botão com estado pressionado. A preferência dura apenas durante este documento; ela não é armazenada. Remover o atributo explícito permite que a folha de estilos siga prefers-color-scheme.

Consulte a especificação de apoio

## sistema de design KERN: uma nota editável com rótulo

### Mantenha as instruções disponíveis

A área de texto usa kern-form-input__input dentro de kern-form-input, com um rótulo real associado ao id do campo. A dica tem seu próprio id e permanece vinculada por aria-describedby. Como esta é uma nota local opcional, o exemplo não inventa erros de campo obrigatório nem salvamento no servidor. Restore example recupera o valor inicial e define o foco no campo editável. Uma região de status anuncia o resultado sem substituir o rótulo nem mover o foco para um texto passivo.

Consulte a especificação de apoio

## sistema de design KERN: informações complementares com Details

### Deixe o navegador gerenciar a abertura e o fechamento

O elemento details controla seu próprio estado de abertura; summary é o acionador. KERN adiciona kern-details__header, um pequeno elemento span para o título e kern-details__body para a apresentação. O exemplo coloca aqui as informações sobre retenção por serem complementares. As instruções obrigatórias, os erros e a ação de descarte permanecem visíveis fora da seção expansível. O comportamento nativo de teclado permite a ativação sem um segundo manipulador de clique nem um estado aria-expanded duplicado.

- Mantenha o texto de summary descritivo e conciso.

- Não coloque outro botão ou link dentro de summary.

- Use um Accordion para um conjunto de seções expansíveis relacionadas, em vez de disfarçar ações sem relação entre si como Details.

Consulte a especificação de apoio

## sistema de design KERN: uma confirmação com saída segura

### Estrutura e controle

O diálogo é identificado pelo h2 e descrito por uma breve declaração sobre as consequências. O cabeçalho, o corpo e o rodapé usam as classes documentadas de KERN. showModal() coloca o diálogo nativo na camada superior; close() encerra a interação. Keep note recebe o foco inicial por meio de autofocus. Escape fecha o diálogo sem alterar o texto, e o evento close devolve o foco a Discard note. Somente Yes, discard altera o valor. Cliques no plano de fundo não fazem nada de propósito, pois esta é uma confirmação destrutiva. Isso segue as orientações documentadas para decisões críticas, em vez de copiar indiscriminadamente o manipulador genérico de exemplo que fecha ao clicar no plano de fundo.

Consulte a especificação de apoio

## sistema de design KERN: integração e aplicabilidade

### Inclua toda a cadeia de dependências

A configuração abaixo instala um único pacote em uma versão exata e copia seu CSS e diretório de fontes. O exemplo completo inclui seu próprio CSS de layout, atributo de tema na raiz, estrutura DOM e associação de eventos. Depois de integrá-lo a um formulário real, teste os dois resultados do diálogo, Escape e telas estreitas. O código de KERN é licenciado sob EUPL; o site distingue seus materiais textuais e gráficos sob CC BY-NC-SA. Este exemplo original não copia a identidade de uma autoridade nem sugere que um serviço tenha passado por uma auditoria de acessibilidade. Uma aplicação real ainda precisa de persistência, validação no servidor e avaliação da jornada completa do usuário.

Consulte a especificação de apoio

## Exemplos de componentes do sistema de design KERN

### Exemplo nativo completo de nota e confirmação

Toda a marcação do documento, CSS de layout e comportamento da aplicação; instale os recursos usando o bloco de configuração.

```
<!doctype html><html lang="en" data-kern-theme="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>KERN workshop note</title><link rel="stylesheet" href="vendor/kern-2.8.2/kern.min.css"><link rel="stylesheet" href="vendor/kern-2.8.2/fonts/fira-sans.css"><style>body{margin:0;padding:clamp(16px,4vw,40px);color:var(--kern-color-layout-text-default)}main{max-width:800px;margin:auto;display:grid;gap:24px}.top,.actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.top{justify-content:space-between}.kern-dialog{max-width:min(560px,calc(100% - 32px))}textarea{width:100%;resize:vertical}#status{min-height:24px}.kern-details{width:100%}</style><main><div class="top"><span class="kern-preline">KERN · Native components</span><button class="kern-btn kern-btn--secondary" id="theme" aria-pressed="false"><span class="kern-label">Dark appearance</span></button></div><h1 class="kern-heading kern-heading--large">Workshop note</h1><p class="kern-body">Prepare a short note for your next workshop. This demonstration keeps edits only in this page.</p><div class="kern-form-input"><label class="kern-label" for="note">Your note</label><p class="kern-hint" id="hint">No personal information is needed. Nothing is submitted.</p><textarea class="kern-form-input__input" rows="5" id="note" aria-describedby="hint">Discuss accessible ways to collect workshop feedback.</textarea></div><details class="kern-details"><summary class="kern-details__header"><span class="kern-title kern-title--small">What happens to this note?</span></summary><div class="kern-details__body"><p class="kern-body">Edits live in this browser tab. Reloading restores the example text. Discarding clears the current note after confirmation; it does not delete a server record.</p></div></details><div class="actions"><button class="kern-btn kern-btn--primary" id="discard"><span class="kern-label">Discard note</span></button><button class="kern-btn kern-btn--secondary" id="restore"><span class="kern-label">Restore example</span></button></div><p id="status" class="kern-body" role="status"></p><dialog class="kern-dialog" id="confirm" aria-labelledby="confirm-title" aria-describedby="confirm-description"><header class="kern-dialog__header"><h2 class="kern-title kern-title--large" id="confirm-title">Discard this note?</h2></header><section class="kern-dialog__body"><p class="kern-body" id="confirm-description">Your current text will be cleared from this page. Choose Keep note to continue editing.</p></section><footer class="kern-dialog__footer"><button class="kern-btn kern-btn--secondary" id="keep" autofocus><span class="kern-label">Keep note</span></button><button class="kern-btn kern-btn--primary" id="clear"><span class="kern-label">Yes, discard</span></button></footer></dialog></main><script>const byId=id=>document.getElementById(id),note=byId('note'),modal=byId('confirm'),original=note.value;byId('discard').onclick=()=>modal.showModal();byId('keep').onclick=()=>modal.close('keep');byId('clear').onclick=()=>{note.value='';modal.close('discard');byId('status').textContent='Note discarded from this page.'};modal.addEventListener('close',()=>byId('discard').focus());byId('restore').onclick=()=>{note.value=original;byId('status').textContent='Example restored.';note.focus()};byId('theme').onclick=()=>{const dark=document.documentElement.dataset.kernTheme!=='dark';document.documentElement.dataset.kernTheme=dark?'dark':'light';byId('theme').setAttribute('aria-pressed',String(dark))};</script></html>
```

Referência de código

## Configuração do agente do sistema de design KERN

### Ponto de partida para implementação

Não é necessário executar uma etapa de compilação nem usar uma estrutura de interface. Preserve o diretório de fontes, pois seu CSS resolve os arquivos WOFF2 por caminhos relativos. O arquivo ZIP do exemplo completo e funcional em Sources também inclui as dependências exatas para a pré-visualização e o documento completo. Extraia-o, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/kern.html. Não abra exemplos baseados em módulos por meio de file://.

```
npm install --save-exact @kern-ux/native@2.8.2
mkdir -p vendor/kern-2.8.2
cp node_modules/@kern-ux/native/dist/kern.min.css vendor/kern-2.8.2/
cp -R node_modules/@kern-ux/native/dist/fonts vendor/kern-2.8.2/
# Save the complete HTML example below as kern.html beside vendor/.
python3 -m http.server 8080
# Open http://localhost:8080/kern.html
```

### Um prompt para seu projeto

```
Crie o exemplo local de anotação para oficina com @kern-ux/native 2.8.2 CSS e Fira Sans incluída no pacote. Combine uma área de texto kern-form-input identificada por um rótulo, uma seção complementar nativa Details e um kern-dialog com cabeçalho, corpo e rodapé identificados por rótulos. Abra-o com showModal(), defina autofocus em Keep note, permita que Escape cancele sem alterar o texto e limpe a nota somente após Yes, discard. Ao fechar, devolva o foco ao acionador e ofereça Restore example. Alterne data-kern-theme entre claro e escuro sem inventar novos tokens de paleta. Preserve as escolhas originais de largura da aplicação e mantenha a nota local; não é necessário enviar dados, salvar rascunhos no servidor nem fazer qualquer alegação sobre serviços governamentais.
```

## Fontes e escopo do sistema de design KERN

Demonstração original com código KERN. Não implica identidade governamental, armazenamento persistente nem certificação de acessibilidade.

- visão geral de KERN Contexto da administração pública e pontos de acesso a recursos.

- Design system Fundamentos, componentes e abordagem do sistema.

- Guia de integração Configuração documentada do pacote nativo e da folha de estilos.

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

### Michigan Forty Two

Conheça o fluxo de trabalho compatível com WordPress do Forty-Two, sua paleta para a web e seus padrões de diretório de pessoas por meio de um exemplo funcional de filtro por função e área de pesquisa.

### Aksel

Use os tokens ax reais da versão 8 de Aksel, a densidade nativa da tabela e uma estrutura semântica de cabeçalho. Ordene e selecione registros fictícios de acompanhamento enquanto compara os temas claro e escuro.

### NHS sistema de design

Use a tipografia, o espaçamento responsivo, as opções de seleção agrupadas e os detalhes contextuais do NHS.UK para criar um fluxo claro de escolha de preferências de consulta.


- [Referência de implementação](https://www.kern-ux.de/komponenten/dialog/)
- [Fonte](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Consulte a especificação de apoio](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)
- [Consulte a especificação de apoio](https://www.npmjs.com/package/@kern-ux/native/v/2.8.2)
- [Consulte a especificação de apoio](https://www.kern-ux.de/erste-schritte/entwicklerinnen/light-dark-modus/)
- [Consulte a especificação de apoio](https://www.kern-ux.de/komponenten/form-inputs/)
- [Consulte a especificação de apoio](https://www.kern-ux.de/komponenten/details/)
- [Consulte a especificação de apoio](https://www.kern-ux.de/komponenten/dialog/)
- [Consulte a especificação de apoio](https://www.kern-ux.de/lizenz-und-nutzungsbedingungen/)
- [Referência de código](https://www.kern-ux.de/komponenten/dialog/)
- [visão geral de KERN Contexto da administração pública e pontos de acesso a recursos.](https://www.kern-ux.de/)
- [Design system Fundamentos, componentes e abordagem do sistema.](https://www.kern-ux.de/design-system/)
- [Guia de integração Configuração documentada do pacote nativo e da folha de estilos.](https://www.kern-ux.de/erste-schritte/entwicklerinnen/einbinden-von-kern/)