Examina los tokens del tema Therapy de Nord y los contratos de Web Component mediante un borrador de solicitud de sala: roles de color reales, campos de tamaño adaptable, validación explícita y resultados preparados localmente.
Interpretación sin conexión de los tokens de Nord Therapy en HTML/CSS; la integración nativa de Web Component se muestra por separado. · Referencia de implementación
02
Referencia de diseño de sistema de diseño Nord
Tokens de Nord 9.0.4 y documentación actual de los componentes. Los valores siguientes describen el tema predeterminado Therapy, no todas las marcas de Nordhealth. La documentación pública no concede permiso para usar Nord fuera del ámbito previsto de Nordhealth.
Nord sistema de diseño Nord es un sistema de producto interno con referencias públicas
Deja claro el uso previsto
La documentación de Nord describe un sistema creado para las experiencias de Nordhealth. Sus componentes, que pueden consultarse públicamente, sirven como referencia, pero este ejemplo no afirma que la marca ni las condiciones de uso de los componentes permitan su reutilización comercial sin restricciones. Los nombres de las salas y el flujo de solicitud de este ejemplo son datos originales creados con fines ilustrativos.
La tabla de tokens predeterminada corresponde a Therapy. Una aplicación veterinaria o sanitaria debe seleccionar el tema previsto para su uso, en lugar de asumir que un acento azul define todos los productos de Nordhealth. Mantén la decisión sobre el tema en el ámbito de la aplicación.
Los roles de Therapy de sistema de diseño Nord mantienen la interfaz discreta
Separa los roles del texto, los bordes y las superficies
El ejemplo usa el estilo de texto principal para los detalles de la solicitud y el estilo secundario para las explicaciones. Los paneles blancos se sitúan sobre la página de color blanco roto; un borde más marcado identifica los campos editables. El texto de error aparece junto al título no válido, en lugar de teñir de rojo toda la interfaz. La vista previa no contiene información clínica ni de pacientes.
Sistema de diseño Nord El texto compacto necesita suficiente interlineado
Usa conjuntamente el tamaño y el interlineado documentados
El token combina un tamaño de texto de 0.875rem con un interlineado de cuerpo de 1.5, mientras que el texto de formulario tiene una caja de línea independiente de 20px. Son reglas distintas: aplicar el valor de formulario a párrafos largos los comprime innecesariamente. La referencia activa usa el token de familia Nordhealth Sans; esta interpretación sin conexión utiliza deliberadamente las fuentes del sistema disponibles, sin afirmar que se haya proporcionado una fuente con licencia.
Sistema de diseño Nord Expande los controles dentro de la cuadrícula de la aplicación
El componente no determina un punto de quiebre de página
Input comienza con una variable de tamaño en línea de 240px. expand es la forma documentada de ocupar la columna disponible del campo. Nuestro ejemplo coloca la lista de salas junto al editor en escritorio y apila ambos elementos en móviles; ese punto de quiebre es una decisión de la aplicación, no un token de Nord. El nombre de la sala, la capacidad y la etiqueta de disponibilidad siguen visibles al seleccionar una fila.
La lista de salas seleccionables de la interpretación sin conexión es un grupo de botones de opción nativos. El ejemplo de la biblioteca proporcionado por separado utiliza un Select de cinco opciones. Ambos permiten elegir una sala, pero muestran diseños distintos y no se presentan como implementaciones de ejecución idénticas del componente.
Sistema de diseño Nord Elige un único responsable de las etiquetas y los mensajes de error
Los campos independientes bastan para este formulario
Input o Select pueden mostrar por sí mismos una etiqueta, una indicación y un error. Cuando se usa la composición más reciente de Field, esta asume esas responsabilidades, por lo que duplicar ambos conjuntos produciría indicaciones redundantes. Este ejemplo usa la opción independiente y asigna un único error breve cuando el título, tras quitar los espacios sobrantes, está vacío.
Los campos deshabilitados se excluyen del envío, mientras que los de solo lectura conservan un valor pertinente para el foco y el envío. No deshabilites el identificador de una sala solo para impedir que se edite si aún debe acompañar la solicitud.
Mantén visible la etiqueta del título de la solicitud.
Usa la indicación para explicar el contenido esperado, no como sustituto de la etiqueta.
Asocia el mensaje de validación al control no válido.
Sistema de diseño Nord Select contiene elementos option estándar
Lee el valor del componente contenedor
El slot predeterminado acepta elementos option nativos. Cada sala tiene un valor estable y una etiqueta visible descriptiva que incluye su capacidad. El evento change indica a la aplicación que vuelva a calcular el resumen a partir del valor del componente contenedor. Esta composición no incluye ninguna etiqueta nord-option personalizada.
Nord recomienda Select para conjuntos de opciones más amplios y botones de opción cuando resulta útil mostrar directamente unas pocas opciones. El ejemplo ofrece cinco salas; la presentación con botones de opción sin conexión facilita distinguir visualmente las capacidades.
Sistema de diseño Nord Los valores predeterminados de Button afectan a la composición del formulario
Define explícitamente la semántica de acción, enlace y carga
Nord Button tiene type="submit" como valor predeterminado. Por eso, si una acción secundaria de vista previa o similar a un restablecimiento dentro de un formulario no debe enviarlo, necesita un type explícito. Al asignar href al componente, su semántica expuesta cambia a la de un enlace; usa esa opción para navegar, en lugar de imitar un ancla con un controlador click.
El estado de carga mantiene el botón enfocable e impide que se active repetidamente. Su indicador giratorio está oculto para las tecnologías de asistencia, por lo que la aplicación debe comunicar el progreso con palabras. No lo sustituyas indiscriminadamente por disabled: una acción no disponible y una acción en curso tienen necesidades distintas de foco y retroalimentación.
El ejemplo de solicitud de sala realiza un cálculo sincrónico del borrador, por lo que no necesita un intervalo de carga. Su botón principal valida el título y lee la sala elegida; al editar cualquiera de los dos, elimina la frase obsoleta del borrador. Las secciones anteriores sobre Field y Select explican qué API de Nord gestiona esas entradas.
Sistema de diseño Nord Carga el CSS necesario antes de llamar a los métodos del componente
La carga para prototipos y la compilación para producción son distintas
La guía oficial de inicio rápido combina el módulo del componente con el framework CSS. Este último proporciona los tokens compartidos y los estilos fundamentales. Para una aplicación empaquetada, instala @nordhealth/css y @nordhealth/components, importa CSS una sola vez e importa únicamente los módulos de los componentes que uses. Los módulos del paquete registran sus elementos como efectos secundarios.
React 19 puede usar directamente estos elementos personalizados. Las pautas actuales indican que el wrapper antiguo @nordhealth/react está obsoleto. La representación en servidor no incluye el shadow DOM del componente; las importaciones de Next.js necesitan la frontera de cliente. Mantén estas limitaciones de integración separadas de la vista previa HTML sin conexión, cuyas interacciones funcionan sin la biblioteca.
Carga el framework CSS antes que los módulos de los componentes.
Espera a que se resuelva customElements.whenDefined antes de llamar a focus durante la inicialización.
Añade controladores para la validación y el estado local.
Incluye las dependencias de producción en el paquete en lugar de depender de numerosas solicitudes de módulos a CDN.
Sistema de diseño Nord Ejemplos de componentes del sistema de diseño Nord
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación sin conexión de los tokens del sistema de diseño Nord Therapy mediante HTML/CSS; la integración nativa de Web Components se muestra por separado.
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 ejemplo presenta las opciones de sala como botones de opción; el ejemplo nativo de Nord usa Select con elementos option estándar. Ninguno reserva una sala real.
Una solicitud de sala con etiqueta y validación explícita
nord-input y nord-select independientes muestran etiquetas sin la familia Field opcional. El envío lee los valores de los componentes y asigna la propiedad de error del campo de entrada.
Cinco opciones de sala hacen de Select una opción compacta y práctica.
Button envía el formulario de forma predeterminada; este ejemplo especifica type explícitamente.
Se espera a que se registren los elementos personalizados antes de usar sus métodos. No se llama a ningún servicio de reservas.
04
Sistema de diseño Nord Configuración del agente
Punto de partida para la implementación
Prototipo completo en CDN público para uso autorizado de Nordhealth. La documentación especifica actualmente CSS 5.2.4 y componentes 5.3.0. En producción, se deben incluir los paquetes npm en el bundle; la interpretación visual sin conexión que aparece a continuación no carga estos paquetes remotos.
Usa los roles semánticos de Nord Therapy con controles etiquetados. Muestra los campos dentro de un diseño adaptable para aplicaciones. Valida el título de la solicitud después de quitar los espacios iniciales y finales, conserva una sola sala seleccionada y muestra únicamente el resultado de un borrador local. Para una implementación real de Nordhealth, respeta los permisos documentados para paquetes y temas.
05
Sistema de diseño Nord Fuentes y alcance
Referencia independiente OpenDesign. Nord indica que su uso previsto es en productos de Nordhealth. Esta interpretación original HTML no reserva una sala ni concede derechos de uso de la marca o los componentes.
