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.
Instale o pacote nativo fixado.
Copie a folha de estilos e as fontes em conjunto, preservando os caminhos relativos.
Salve o exemplo completo abaixo e disponibilize o diretório por HTTP.
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.
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.
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.
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.
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.
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.
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.
Toda a marcação do documento, CSS de layout e comportamento da aplicação; instale os recursos usando o bloco de configuração.
html
<!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>
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://.
bash
npm install --save-exact @kern-ux/[email protected]
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
Prompt para agente de IA
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.
05
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.
