# Sistema de design Nord

## Sistema de design Nord Prévia da interface

Escolha entre cinco capacidades de sala, valide um título e prepare um resumo local da solicitação.

## 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.

### Valores de função do Therapy

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --n-color-accent | #3559c7 | Ação primária. |
| --n-color-text | #0c1a3d | Conteúdo principal. |
| --n-color-text-weak | #36434a | Texto de apoio. |
| --n-color-background | #fafbfb | Página. |
| --n-color-surface | #ffffff | Painel. |
| --n-color-border | #d8dee4 | Divisor. |
| --n-color-border-strong | #bcc5cc | Borda do controle. |
| --n-color-text-error | #d24023 | Mensagem de erro. |
### Espaçamento

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --n-space-xs | 4px | Estreito. |
| --n-space-s | 8px | Relacionado. |
| --n-space-m | 16px | Grupo. |
| --n-space-l | 24px | Seção. |
| --n-space-xl | 36px | Grande. |
| --n-space-xxl | 72px | Maior. |
### Tipografia e formas

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| --n-font-size-m | 0.875rem | Texto do corpo. |
| --n-font-size-l | 1rem | Texto grande. |
| --n-font-size-xl | 1.25rem | Título da seção. |
| --n-font-size-xxl | 1.5rem | Título. |
| --n-line-height | 1.5 | Multiplicador do corpo do texto. |
| --n-line-height-form | 20px | Espessura da linha do controle. |
| --n-font-weight-heading | 600 | Cabeçalho. |
| --n-border-radius-s | 3px | Controle. |
| --n-border-radius | 5px | Superfície. |
### Contrato do campo de entrada

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| label / hint / error | Built-in field text | O campo de entrada independente tem um rótulo próprio. |
| expand | Boolean, default false | Ocupar a largura do contêiner. |
| size | s / m / l | Médio por padrão. |
| readonly versus disabled | Submitted versus excluded | O campo somente para leitura continua recebendo foco. |
| --n-input-inline-size | 240px | Largura fixa por padrão; prefira expandir para formulários responsivos. |
### Contrato do seletor

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Default slot | Native option elements | Não invente nord-option. |
| value | String | Seleção controlada. |
| required | Boolean | Use novalidate e mensagens de erro da aplicação. |
| change | User selection event | Leia component.value. |
| focus() | Component method | Aguarde a definição antes de chamar o método. |
### Contrato do botão

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| type | submit by default | Especifique button para ações que não enviam o formulário. |
| variant | default / primary / dashed / plain / danger | Use apenas um primário por seção. |
| href | Creates anchor semantics | Para navegação. |
| size | s / m / l | Médio por padrão. |
| loading | Busy presentation | Associe a um status anunciado. |
## Sistema de design Nord Guia completo

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

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

Consulte a especificação de apoio

## 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.

1. Carregue o framework CSS antes dos módulos dos componentes.

2. Aguarde customElements.whenDefined antes de chamar focus durante a inicialização.

3. Adicione manipuladores de validação e estado local.

4. Agrupe as dependências de produção em vez de depender de várias solicitações de módulos por CDN.

Consulte a especificação de apoio

## 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.

```
<!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>
```

Referência de código

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

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

Referência de código

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

## 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.

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Room request draft</title>
<link rel="stylesheet" href="https://nordcdn.net/ds/css/5.2.4/nord.min.css">
<script type="module" src="https://nordcdn.net/ds/components/5.3.0/index.js"></script>
<style>main{max-width:560px;margin:auto;padding:var(--n-space-l)}form{display:grid;gap:var(--n-space-l)}</style>
<main><h1>Prepare a room request</h1><p>For an authorized Nordhealth product. Local demonstration only.</p>
<form novalidate>
<nord-input id="request" name="request" label="Request title" hint="Use a non-sensitive meeting title." required expand></nord-input>
<nord-select id="room" name="room" label="Room" value="Birch" expand>
<option value="Birch">Birch · 4 seats</option><option value="Cedar">Cedar · 6 seats</option>
<option value="Elm">Elm · 8 seats</option><option value="Maple">Maple · 10 seats</option><option value="Pine">Pine · 12 seats</option>
</nord-select>
<nord-button type="submit" variant="primary">Prepare request</nord-button>
</form><p id="result" role="status"></p></main>
<script type="module">
await Promise.all(['nord-input','nord-select','nord-button'].map(name=>customElements.whenDefined(name)));
const form=document.querySelector('form'), title=document.querySelector('#request'),room=document.querySelector('#room'),result=document.querySelector('#result');
form.addEventListener('submit',event=>{
 event.preventDefault();title.error=title.value.trim()?'':'Enter a request title.';
 if(title.error){title.focus();return;}
 result.textContent=`Draft: ${title.value.trim()} in ${room.value}. No room is reserved.`;
});
form.addEventListener('input',()=>{result.textContent='';title.error='';});
form.addEventListener('change',()=>{result.textContent='';});
</script></html>
```

### Um prompt para seu projeto

```
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.
```

## 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.

- Referência de tokens Valores de Therapy, espaçamento e tipografia.

- Configuração de Web Components CSS necessário, importações e limites do framework.

- Input Rótulos, erros e dimensionamento responsivo.

- Select Opções e tratamento de valores.

- Button Semântica de envio e variantes de ação.

## Sistema de design Nord Recursos relacionados

### Oracle Redwood

Conheça a paleta, as funções semânticas, o espaçamento e os limites de densidade reais do Oracle JET 19 Redwood por meio de uma planilha original e completa para revisão de estoque.

### Orange OUDS Web

Inspecione os tokens semânticos reais, os pacotes de tema e o comportamento nativo de Offcanvas do Orange OUDS 1.4 em um estudo comparativo responsivo completo.

### Palantir Blueprint

Crie um espaço de trabalho de dados denso com Blueprint: tokens verificados de tipografia e intenção, uma tabela de conjuntos de dados selecionáveis, um painel de revisão e o código-fonte completo de React.


- [Referência de implementação](https://nordhealth.design/core/tokens/)
- [Fonte](https://nordhealth.design/core/tokens/)
- [Fonte](https://nordhealth.design/components/input/)
- [Fonte](https://nordhealth.design/components/select/)
- [Fonte](https://nordhealth.design/components/button/)
- [Consulte a especificação de apoio](https://nordhealth.design/docs/developer/web-components/)
- [Consulte a especificação de apoio](https://nordhealth.design/core/tokens/)
- [Consulte a especificação de apoio](https://nordhealth.design/components/input/)
- [Consulte a especificação de apoio](https://nordhealth.design/components/select/)
- [Consulte a especificação de apoio](https://nordhealth.design/components/button/)
- [Referência de código](https://nordhealth.design/core/tokens/)
- [Referência de código](https://nordhealth.design/components/input/)
- [Referência de tokens Valores de Therapy, espaçamento e tipografia.](https://nordhealth.design/core/tokens/)
- [Configuração de Web Components CSS necessário, importações e limites do framework.](https://nordhealth.design/docs/developer/web-components/)
- [Input Rótulos, erros e dimensionamento responsivo.](https://nordhealth.design/components/input/)
- [Select Opções e tratamento de valores.](https://nordhealth.design/components/select/)
- [Button Semântica de envio e variantes de ação.](https://nordhealth.design/components/button/)