Explora las referencias exactas de espaciado, radio y tipografía de Horizon Workspace mediante un flujo local completo de revisión de solicitudes, con conservación de borradores, validación, filtros de estado y opciones de recuperación.
HTML/CSS/JavaScript original con las fuentes locales Cabin y Lato; sin conexión con la plataforma ServiceNow. · Referencia de implementación
02
Referencia de diseño del sistema de diseño ServiceNow Horizon
Referencias publicadas de Horizon Workspace para el espaciado, el radio de las esquinas y la tipografía. Los colores originales de la aplicación se excluyen intencionadamente de esta tabla de referencia oficial.
Referencia de diseño publicada. Los valores pequeños son adecuados para etiquetas compactas, los medianos para controles anidados y los grandes para contenedores.
now-global-border-radius--md
6px
Referencia de diseño publicada. Los valores pequeños son adecuados para etiquetas compactas, los medianos para controles anidados y los grandes para contenedores.
now-global-border-radius--lg
8px
Referencia de diseño publicada. Los valores pequeños son adecuados para etiquetas compactas, los medianos para controles anidados y los grandes para contenedores.
Espacio de trabajo y alcance de implementación del sistema de diseño ServiceNow Horizon
Empieza por el framework de la aplicación
Horizon abarca varios frameworks de aplicaciones de ServiceNow. Esta página se centra en Workspace: la cola y el registro seleccionado permanecen visibles a la vez, para que quien revisa pueda avanzar por el trabajo pendiente sin perder el contexto. No presenta Service Portal, Native Mobile y Core UI como interfaces intercambiables. El estudio en funcionamiento es una aplicación original de HTML, no una instancia de ServiceNow integrada.
Distingue las bases verificadas de las decisiones originales
La referencia especifica los nombres exactos de los valores de espaciado publicados, los valores de radio y las funciones tipográficas. El color verde de acción, las superficies neutras y el azul de foco del estudio son valores originales de OpenDesign, declarados con un prefijo de aplicación. No se presentan como exportaciones oficiales de tokens de Horizon. No se requiere instalar ningún paquete inventado de ServiceNow ni disponer de API de la plataforma para ejecutar el ejemplo completo.
Espaciado, radios y tipografía del sistema de diseño ServiceNow Horizon
Usa la secuencia de espaciado real
La escala documentada es de 2, 4, 8, 12, 16, 24, 32 y 40px. El estudio la utiliza para diferenciar el espacio entre la cola y el registro, el relleno dentro de un registro y las distancias menores entre los metadatos. Estos valores cumplen distintas funciones de agrupación, aunque se repita un mismo incremento. Una pantalla con relleno uniforme perdería esa jerarquía.
Asigna funciones distintas a los encabezados y al texto de lectura
Se usa Cabin para los encabezados y Lato para el texto del cuerpo, de acuerdo con las funciones tipográficas publicadas para cada familia. En pantallas anchas, el estudio utiliza un encabezado de página de 32px y un encabezado de registro de 24px. Las referencias de radio son 2, 6 y 8px, en lugar de una secuencia genérica supuesta de 4/8/12. Las etiquetas de estado redondeadas no comunican el estado únicamente mediante la forma o el color: también incluyen las palabras Open o Reviewed.
Cola, registro seleccionado y filtros del sistema de diseño ServiceNow Horizon
Mantén un único registro seleccionado
Cada acción de la cola identifica una solicitud de práctica y muestra a la persona responsable y el estado. Al seleccionarla, se muestran sus detalles adyacentes y se enfoca el nuevo encabezado. La acción seleccionada tiene aria-current y un borde visible. Este patrón original de lista y detalle no es un componente nativo de Horizon API; se proporciona toda su lógica de estado para que pueda inspeccionarse.
Recupera la selección cuando un filtro la excluya
El filtro de estado reduce las solicitudes visibles en la cola. Si la solicitud seleccionada deja de pertenecer a ella, la aplicación selecciona la primera solicitud coincidente disponible. Si no queda ninguna, muestra un mensaje de lista vacía y la acción Show all requests. El recuento toma como denominador la colección completa de tres registros. Filtrar nunca elimina registros ni cambia su estado de forma silenciosa.
Mantén el registro seleccionado dentro del conjunto filtrado actual.
Muestra claramente un estado vacío cuando ese conjunto no contiene registros.
Recupera la lista mediante Show all requests sin eliminar datos.
Notas en borrador y validación de revisiones del sistema de diseño ServiceNow Horizon
Vincula los borradores a su registro
El área de texto actualiza un borrador del registro correspondiente mientras la persona revisora escribe. Si pasa a otra solicitud y vuelve, el borrador se conserva. Una nota vacía o compuesta solo por espacios en blanco no puede marcar una solicitud como revisada: aparece un error integrado, se establece aria-invalid y el foco vuelve al área de texto. El modelo de datos mantiene explícitos la nota guardada y el borrador actual.
Haz observable la transición del estado local
Reapertura y avisos accesibles del sistema de diseño ServiceNow Horizon
Conserva el trabajo útil al reabrir
La acción Reopen request devuelve a Open un registro revisado y conserva su nota guardada. Si solo se muestran los registros con estado Reviewed, la lista puede quedar vacía; en ese caso, la acción de recuperación vuelve a mostrar la cola completa. Esta combinación pone a prueba la relación entre el estado del registro, los filtros y los detalles seleccionados, y resulta más reveladora que comprobar cada botón de forma aislada.
Combina texto, foco y mensajes de estado
Los colores de estado van acompañados de etiquetas de texto. La validación enfoca el campo que requiere atención, la navegación entre registros enfoca el encabezado y las actualizaciones locales se anuncian en una región de estado. El estudio no sustituye las pruebas con tecnologías de asistencia en un Workspace de producción. Proporciona un flujo local completo e inspeccionable con el que iniciar esas pruebas.
Código fuente local completo y verificaciones del sistema de diseño ServiceNow Horizon
Instala las dependencias públicas de fuentes
La entrada proporcionada importa los paquetes públicos de las fuentes Cabin y Lato, además de la hoja de estilos original de la composición. La estructura de HTML proporciona el elemento raíz. Este ejemplo no incluye un entorno de ejecución, credenciales ni puntos de conexión de ServiceNow. La integración real con la plataforma debería empezar por los recursos para Workspace y desarrollo de Horizon, en lugar de tratar la matriz local de registros como un contrato de API de ServiceNow.
Instala las dependencias públicas de fuentes en una aplicación sin framework.
Guarda la entrada completa, la hoja de estilos y la estructura raíz de HTML.
Comprueba que los borradores se conserven antes de guardar una revisión.
Combina el filtro de estado con la reapertura y la recuperación del estado vacío.
Comprueba el flujo de trabajo completo
Envía una nota vacía, escribe un borrador, visita otra solicitud y vuelve para comprobar que se haya conservado. Marca el registro como revisado, filtra por Reviewed y vuelve a abrirlo. Comprueba la recuperación del estado vacío y que la nota se conserve. En pantallas estrechas, la cola se muestra encima de los detalles y no se pierde ninguna acción. Comprueba la carga de las fuentes, los errores de JavaScript y el desbordamiento horizontal junto con estos cambios de estado.
Ejemplos de componentes del sistema de diseño ServiceNow Horizon
main.js — lógica completa de la cola y las revisiones
Todos los registros, borradores, filtros, validaciones y acciones de recuperación.
javascript
import '@fontsource/cabin/latin-600.css';
import '@fontsource/lato/latin-400.css';
import '@fontsource/lato/latin-700.css';
import './horizon.css';
const records=[{id:'REQ-104',title:'Review the workshop outline',owner:'Design team',priority:'Normal',detail:'Compare the proposed agenda with the decision the team needs to make. Capture one question that should be resolved before the workshop.'},{id:'REQ-105',title:'Check the shared resource list',owner:'Content team',priority:'High',detail:'Review the resource titles for clear action language and confirm that each summary explains when the resource is useful.'},{id:'REQ-106',title:'Prepare the research readout',owner:'Research team',priority:'Normal',detail:'Group the observations by theme. Keep direct observations separate from the team’s interpretation and include the questions still open.'}].map(x=>({...x,status:'Open',note:''}));let selected=records[0].id;
document.querySelector('#root').innerHTML=`<main><header><p class="eyebrow">OpenDesign · Workflow study</p><h1>Team review workspace</h1><p>Review three original practice requests. Update a local record while keeping the queue and details in context.</p></header><div class="toolbar"><label>Status <select id="filter"><option>All</option><option>Open</option><option>Reviewed</option></select></label><p id="queue-count" role="status"></p></div><div class="workspace"><nav aria-label="Practice request queue"><div id="queue"></div><p id="empty" hidden>No requests match this status.</p><button id="clear" hidden>Show all requests</button></nav><section id="detail" aria-labelledby="record-title"></section></div><p id="feedback" role="status"></p><footer><strong>Original application, documented foundations.</strong> Cabin headings, Lato body text, the published 2–40px spacing scale and 2/6/8px radius references inform this study. The colors and application behavior are original OpenDesign choices. This is not the ServiceNow platform or a connected Workspace.</footer></main>`;
function renderQueue(){let filter=document.querySelector('#filter').value,visible=records.filter(x=>filter==='All'||x.status===filter);if(!visible.some(x=>x.id===selected))selected=visible[0]?.id;const queue=document.querySelector('#queue');queue.replaceChildren(...visible.map(r=>{let b=document.createElement('button');b.className='queue-item';b.dataset.id=r.id;b.setAttribute('aria-current',String(r.id===selected));b.innerHTML=`<span class="record-id">${r.id}</span><strong>${r.title}</strong><span>${r.owner}</span><span class="status ${r.status.toLowerCase()}">${r.status}</span>`;b.onclick=()=>{selected=r.id;renderQueue();renderDetail();document.querySelector('#record-title')?.focus()};return b}));document.querySelector('#queue-count').textContent=`${visible.length} of ${records.length} requests`;document.querySelector('#empty').hidden=visible.length>0;document.querySelector('#clear').hidden=visible.length>0;}
function renderDetail(){const r=records.find(x=>x.id===selected),panel=document.querySelector('#detail');if(!r){panel.innerHTML='<h2 id="record-title">Choose another status</h2><p>All local requests are still available through the status filter.</p>';return}panel.innerHTML=`<p class="eyebrow">${r.id} · ${r.owner}</p><h2 id="record-title" tabindex="-1">${r.title}</h2><p>${r.detail}</p><dl><div><dt>Priority</dt><dd>${r.priority}</dd></div><div><dt>Status</dt><dd>${r.status}</dd></div></dl><form id="review"><label for="note">Review note</label><p class="hint" id="hint">Write one useful observation. This note remains in the page.</p><textarea id="note" rows="4" aria-describedby="hint error"></textarea><p id="error" class="error" hidden>Enter a review note before marking this request reviewed.</p><div class="actions"><button type="submit" class="primary">${r.status==='Open'?'Mark reviewed':'Update review'}</button><button type="button" id="reopen" ${r.status==='Open'?'hidden':''}>Reopen request</button></div></form>`;const note=panel.querySelector('#note');note.value=r.draft??r.note;note.oninput=()=>{r.draft=note.value;document.querySelector('#error').hidden=true;note.removeAttribute('aria-invalid');document.querySelector('#feedback').textContent=''};panel.querySelector('#review').onsubmit=e=>{e.preventDefault();if(!note.value.trim()){document.querySelector('#error').hidden=false;note.setAttribute('aria-invalid','true');note.focus();return}r.note=note.value.trim();r.draft=r.note;r.status='Reviewed';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reviewed locally. No record was sent to ServiceNow.';document.querySelector('#record-title')?.focus();};panel.querySelector('#reopen').onclick=()=>{r.status='Open';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reopened. The saved review note is retained.';document.querySelector('#record-title')?.focus();};}
document.querySelector('#filter').onchange=()=>{renderQueue();renderDetail();document.querySelector('#feedback').textContent=''};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All';renderQueue();renderDetail();document.querySelector('#filter').focus()};renderQueue();renderDetail();
Reemplaza el index.html raíz de Vite con este archivo.
04
Configuración del agente del sistema de diseño ServiceNow Horizon
Punto de partida para la implementación
Esto ejecuta únicamente el estudio original. La implementación nativa en ServiceNow requiere el entorno de desarrollo adecuado para la plataforma.
sh
npm create vite@latest horizon-study -- --template vanilla
cd horizon-study
npm install
npm install @fontsource/[email protected] @fontsource/[email protected]
# Save index.html at root; main.js and horizon.css in src.
npm run dev
Una instrucción para tu proyecto
Instrucción para el agente
Crea el estudio completo y original de revisión de solicitudes con las referencias verificadas de tipografía, espaciado y radios de Horizon Workspace. Usa el prefijo app- en los colores originales. Conserva los borradores por registro, valida antes de la revisión, vuelve a calcular la selección filtrada tras los cambios de estado, conserva las notas al reabrir y ofrece una opción para recuperarse de una lista vacía. No afirmes que existe una conexión activa con ServiceNow.
05
Fuentes y alcance del sistema de diseño ServiceNow Horizon
Estudio original de OpenDesign HTML/CSS, basado en los fundamentos de Horizon Workspace. Utiliza los valores documentados de tipografía Cabin/Lato y de espaciado/radios, con colores y lógica de flujo de trabajo originales. No es una instancia de ServiceNow ni un entorno de ejecución nativo de Workspace.
