Inspecione os tokens do tema Therapy do Nord e os contratos de Web Components por meio de um rascunho de solicitação de sala: funções de cor reais, dimensionamento responsivo de campos, validação explícita e resultados preparados localmente.
Interpretação offline de tokens de Terapia do Nord HTML/CSS; a integração nativa de Web Component é apresentada separadamente. · Referência de implementação
02
Sistema de design Nord Referência de design
Tokens Nord 9.0.4 e documentação atual dos componentes. Os valores abaixo descrevem o tema padrão Therapy, não todas as marcas Nordhealth. A documentação pública não concede permissão para usar Nord fora do escopo previsto para Nordhealth.
Sistema de design Nord Nord é um sistema interno de produto com referências públicas
Deixe claro o uso previsto
A documentação do Nord descreve um sistema desenvolvido para as experiências Nordhealth. Seus componentes disponíveis para consulta pública são referências úteis, mas o exemplo não afirma que os termos da marca ou dos componentes permitam reutilização comercial irrestrita. Os nomes das salas e o fluxo de solicitação apresentados aqui são dados originais de demonstração.
A tabela de tokens padrão representa o Therapy. Uma aplicação veterinária ou de saúde deve selecionar o tema previsto para ela, em vez de presumir que um destaque azul define todos os produtos Nordhealth. Mantenha a escolha do tema no nível da aplicação.
Sistema de design Nord As funções do Therapy mantêm o espaço de trabalho discreto
Separe as funções de texto, borda e superfície
O exemplo usa a função de texto principal para os detalhes da solicitação e uma função mais suave para as explicações. Painéis brancos ficam sobre a página em tom quase branco; uma borda mais forte identifica os campos editáveis. O texto de erro aparece ao lado do título inválido, em vez de tingir toda a interface de vermelho. A prévia não contém informações clínicas nem dados de pacientes.
Sistema de design Nord Textos compactos precisam de espaço entre linhas suficiente
Use em conjunto o tamanho e o espaçamento entre linhas documentados.
O token combina um tamanho de corpo de 0.875rem com uma altura de linha de 1.5, enquanto o texto de formulário tem uma caixa de linha separada de 20px. São regras diferentes: aplicar o valor do formulário a parágrafos longos os comprime desnecessariamente. A referência em uso utiliza o token da família Nordhealth Sans; esta interpretação offline usa deliberadamente fontes do sistema disponíveis, sem afirmar que uma fonte licenciada foi fornecida.
Sistema de design Nord Expanda os controles dentro da grade da aplicação
O componente não define o breakpoint da página
O Input começa com uma variável inline-size de 240px. expand é a forma documentada de ocupar a coluna disponível do campo. Nosso exemplo coloca a lista de salas ao lado do editor no desktop e empilha os dois no celular; esse breakpoint é uma decisão da aplicação, não um token Nord. O nome da sala, a capacidade e o rótulo de disponibilidade continuam visíveis quando uma linha é selecionada.
A lista de salas selecionadas nesta interpretação offline é um grupo de opções de rádio nativo. O exemplo de biblioteca fornecido separadamente usa um Select com cinco opções. Ambos permitem escolher uma sala, mas demonstram layouts diferentes e não são apresentados como implementações idênticas em tempo de execução do componente.
Sistema de design Nord Escolha uma única fonte para rótulos e mensagens de erro
Campos independentes bastam para este formulário
Um Input ou Select pode exibir o próprio rótulo, dica e erro. A composição Field mais recente assume essas responsabilidades quando é usada; duplicar os dois conjuntos geraria instruções redundantes. Este exemplo usa a abordagem independente e atribui um único erro curto quando o título, após remover espaços em branco, está vazio.
Os campos desativados são removidos do envio, enquanto os campos somente leitura preservam um valor relevante para foco e envio. Não desative um identificador de sala apenas para impedir a edição se ele ainda precisar acompanhar a solicitação.
Mantenha visível o rótulo do título da solicitação.
Use a dica para indicar o conteúdo esperado, não como substituto do rótulo.
Associe a mensagem de validação ao controle inválido.
Sistema de design Nord Select contém elementos option comuns
Leia o valor do componente host
O slot padrão aceita elementos option nativos. Cada sala tem um valor estável e um rótulo descritivo visível que inclui sua capacidade. O evento change informa à aplicação que ela deve recalcular o resumo com base no valor do host. Essa composição não usa uma tag nord-option personalizada.
A Nord recomenda Select para conjuntos maiores de opções e botões de rádio quando é útil exibir algumas opções diretamente. O exemplo oferece cinco salas; a apresentação offline com opções de rádio facilita a comparação visual das capacidades.
Sistema de design Nord Os valores padrão de Button afetam a composição do formulário
Defina explicitamente a semântica da ação, do link e do carregamento
Por padrão, Nord Button usa type="submit". Portanto, uma ação secundária de pré-visualização ou semelhante a uma redefinição dentro de um formulário precisa de um type explícito quando não deve enviá-lo. Definir href no componente altera sua semântica para a de um link; use essa opção para navegação em vez de um manipulador de clique que imite uma âncora.
O estado de carregamento mantém o botão focalizável e impede ativações repetidas. O indicador de carregamento fica oculto para tecnologias assistivas, portanto a aplicação deve comunicar o progresso por escrito. Não use disabled indiscriminadamente: uma ação indisponível e uma ação em andamento têm necessidades diferentes de foco e feedback.
O exemplo de solicitação de sala calcula um rascunho de forma síncrona, portanto não precisa de um intervalo de carregamento. O botão principal valida o título e lê a sala selecionada; qualquer alteração em um deles remove a frase desatualizada do rascunho. As seções acima sobre campos e Select explicam quais APIs Nord controlam essas entradas.
Sistema de design Nord Carregue o CSS necessário antes de chamar métodos dos componentes
O carregamento para protótipos e a geração do pacote de produção são diferentes
O início rápido oficial combina o módulo do componente com o framework CSS. Este fornece tokens compartilhados e estilos fundamentais. Em uma aplicação empacotada, instale @nordhealth/css e @nordhealth/components, importe o CSS uma vez e importe apenas os módulos dos componentes usados. Os módulos dos pacotes registram seus elementos como efeitos colaterais.
React 19 pode usar esses elementos personalizados diretamente. O wrapper @nordhealth/react mais antigo está obsoleto nas orientações atuais. A renderização no servidor não inclui o shadow DOM do componente; as importações no Next.js precisam da fronteira de cliente. Mantenha essas limitações de integração separadas da pré-visualização offline HTML, cujas interações funcionam sem a biblioteca.
Carregue o framework CSS antes dos módulos dos componentes.
Aguarde customElements.whenDefined antes de chamar focus durante a inicialização.
Adicione manipuladores de validação e estado local.
Agrupe as dependências de produção em vez de depender de várias solicitações de módulos por CDN.
Sistema de design Nord Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação offline HTML/CSS dos tokens Nord Therapy; a integração nativa com Web Components é apresentada separadamente.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
Este exemplo exibe as opções de sala como botões de rádio; o exemplo nativo da Nord usa Select com elementos option comuns. Nenhum deles reserva uma sala de verdade.
Uma solicitação de sala com rótulo e validação explícita
nord-input e nord-select independentes fornecem rótulos sem a família Field opcional. O envio lê os valores dos componentes e define a propriedade de erro do input.
Cinco opções de sala tornam Select uma escolha compacta útil.
Button usa submit por padrão; este exemplo declara o type explicitamente.
Os elementos personalizados são aguardados antes do uso de seus métodos. Nenhum serviço de reserva é chamado.
04
Sistema de design Nord Configuração do agente
Ponto de partida para implementação
Protótipo completo usando CDN público para uso autorizado da Nordhealth. A documentação especifica atualmente CSS 5.2.4 e components 5.3.0. Em produção, os pacotes npm devem ser agrupados; a interpretação visual offline abaixo não carrega esses pacotes remotos.
Use as funções semânticas do Nord Therapy com controles rotulados. Expanda os campos em um layout de aplicação responsivo. Valide o título da solicitação após remover espaços em branco, mantenha uma única sala selecionada e mostre apenas o resultado de um rascunho local. Para uma implementação real da Nordhealth, use as permissões documentadas para pacotes e temas.
05
Sistema de design Nord Fontes e escopo
Referência independente de OpenDesign. A Nord informa que o uso previsto é nos produtos Nordhealth. Esta interpretação original de HTML não reserva uma sala nem concede direitos de uso da marca ou dos componentes.
