# Système de design ServiceNow Horizon ## Aperçu de l’interface du système de design ServiceNow Horizon Conservez les brouillons d’une fiche à l’autre, marquez une demande comme examinée et retrouvez-la après un filtrage ou une réouverture. ## Référence de conception du système de design ServiceNow Horizon Références publiées de Horizon Workspace concernant l’espacement, les rayons d’angle et la typographie. Les couleurs de l’application d’origine sont volontairement exclues de ce tableau de référence officiel. ### Espacements publiés de Workspace | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $now-global-space--xxs | 2px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--xs | 4px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--sm | 8px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--md | 12px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--lg | 16px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--xl | 24px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--xxl | 32px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | | $now-global-space--3xl | 40px | Noms exacts des références Sass publiées ; il ne s’agit pas de propriétés personnalisées CSS inventées. | ### Rayons d’angle publiés | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | now-global-border-radius--sm | 2px | Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs. | | now-global-border-radius--md | 6px | Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs. | | now-global-border-radius--lg | 8px | Référence de conception publiée. Les petites valeurs conviennent aux libellés compacts, les valeurs moyennes aux contrôles imbriqués et les grandes aux conteneurs. | ### Rôles typographiques publiés | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Heading family | Cabin | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | Body family | Lato | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | header-hero | 32px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | header-primary | 24px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | header-secondary | 20px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | header-tertiary | 16px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | title-primary | 20px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | | title-secondary | 16px | Rôles typographiques documentés de Workspace. Cette étude charge localement les fichiers de polices publics Cabin et Lato. | ## Système de design ServiceNow Horizon : guide complet du système de design Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Périmètre de Workspace et de sa mise en œuvre pour le système de design ServiceNow Horizon ### Commencer par le framework de l’application > Horizon couvre plusieurs frameworks d’application ServiceNow. Cette page se concentre sur Workspace : une file d’attente et une fiche sélectionnée restent visibles ensemble, afin que la personne chargée de l’examen puisse parcourir les tâches locales sans perdre le contexte. Service Portal, Native Mobile et Core UI ne sont pas présentés comme des habillages interchangeables. L’étude en direct est une application HTML originale, et non une instance ServiceNow intégrée. ### Distinguer les bases vérifiées des choix originaux La référence fournit les noms exacts des espacements publiés, les valeurs des rayons d’angle et les rôles typographiques. La couleur d’action verte, les surfaces neutres et le bleu de focus de l’étude sont des valeurs originales OpenDesign, déclarées avec un préfixe d’application. Elles ne sont pas présentées comme des exports officiels des jetons Horizon. Aucun paquet ServiceNow ni aucune API de plateforme API inventés ne sont nécessaires pour exécuter l’exemple complet. ## Espacement, rayons d’angle et typographie de Workspace dans le système de design ServiceNow Horizon ### Utiliser la véritable échelle d’espacement L’échelle documentée est de 2, 4, 8, 12, 16, 24, 32 et 40px. L’étude l’utilise pour distinguer l’espace entre la file et la fiche, le remplissage intérieur d’une fiche et les distances plus réduites entre les métadonnées. Ces valeurs répondent à différentes relations de regroupement, même lorsqu’une même étape est réutilisée. Un écran uniformément espacé perdrait cette hiérarchie. ### Attribuer des rôles distincts aux titres et au texte courant Cabin est utilisée pour les titres et Lato pour le texte courant, conformément aux rôles publiés des familles de polices. L’étude adopte un titre de page de 32px sur les écrans larges et un titre de fiche de 24px. Les rayons de référence sont de 2, 6 et 8px, plutôt qu’une séquence générique supposée de 4/8/12. La forme ou la couleur des libellés d’état arrondis ne suffit pas à communiquer l’état : ils contiennent aussi les mots Ouverte ou Examinée. ## File d’attente, fiche sélectionnée et filtres du système de design ServiceNow Horizon ### Conserver une seule fiche sélectionnée Chaque action de la file nomme une demande de pratique et affiche sa personne responsable ainsi que son état. La sélection remplit le détail adjacent et place le focus sur le nouveau titre. L’action sélectionnée comporte aria-current et une bordure visible. Il s’agit d’un modèle original de liste et de détail, et non d’un composant Horizon natif API ; toute sa logique d’état est fournie pour examen. ### Rétablir la sélection lorsqu’un filtre la masque Le filtre d’état réduit le nombre de demandes visibles. Si la demande sélectionnée n’en fait plus partie, l’application sélectionne la première demande correspondante disponible. S’il n’en reste aucune, elle affiche un message d’absence de résultats et une action Afficher toutes les demandes. Le décompte utilise l’ensemble complet des trois fiches comme dénominateur. Le filtrage ne supprime aucune fiche et ne modifie jamais son état sans le signaler. - Conserver la fiche sélectionnée dans l’ensemble filtré actuel. - Afficher clairement un état vide lorsque cet ensemble ne contient aucune fiche. - Rétablir l’affichage avec Afficher toutes les demandes, sans supprimer de données. ## Notes de brouillon et validation des examens dans le système de design ServiceNow Horizon ### Associer les brouillons à leur fiche Pendant la saisie, la zone de texte met à jour le brouillon de la fiche correspondante. Le brouillon est conservé lorsque la personne passe à une autre demande puis revient à la première. Une note vide ou composée uniquement d’espaces ne permet pas de marquer une demande comme examinée : une erreur en ligne s’affiche, aria-invalid est défini et le focus revient à la zone de texte. Le modèle de données distingue explicitement la note enregistrée du brouillon en cours. ### Rendre observable la transition d’état locale Une fois l’examen validé, la note est enregistrée après suppression des espaces superflus et l’état de la fiche passe à Examinée. La file est recalculée en fonction du filtre actif et un message d’état indique la fiche concernée. Il précise qu’aucune fiche n’a été envoyée à ServiceNow. Ainsi, la confirmation visuelle ne laisse pas croire qu’une opération a été effectuée sur la plateforme alors que ce n’est pas le cas. ## Réouverture et retours accessibles dans le système de design ServiceNow Horizon ### Conserver le travail utile lors de la réouverture La réouverture d’une demande fait repasser un dossier vérifié à l’état Ouvert, tout en conservant la note enregistrée. Avec un filtre limité aux dossiers vérifiés, la liste peut alors être vide ; l’action de récupération rétablit la file complète. Cette combinaison permet de tester les liens entre l’état du dossier, le filtrage et le détail sélectionné, un examen plus révélateur que la vérification isolée de chaque bouton. ### Associez texte, focus et état Les couleurs d’état sont accompagnées de libellés textuels. La validation place le focus sur le champ à corriger, la navigation entre les dossiers le place sur le titre, et les mises à jour locales utilisent une région d’état. Cette étude ne remplace pas les tests avec des technologies d’assistance dans un Workspace de production. Elle fournit un flux local complet et inspectable sur lequel ces tests peuvent s’appuyer. ## ServiceNow Horizon — code source local complet et vérifications du système de conception ### Installer les dépendances de polices publiques Le fichier d’entrée fourni importe les packages de polices publiques Cabin et Lato ainsi que la feuille de style de composition d’origine. Son shell HTML fournit l’élément racine. Cet exemple n’utilise ni environnement d’exécution ServiceNow, ni identifiants, ni point de terminaison. Une véritable intégration à la plateforme doit commencer par les ressources Workspace et développeurs de Horizon, plutôt que de considérer le tableau local de dossiers comme un contrat API ServiceNow. 1. Installez les dépendances de polices publiques dans une application vanilla. 2. Enregistrez le fichier d’entrée complet, la feuille de style et le shell racine HTML. 3. Testez la conservation du brouillon avant d’enregistrer une vérification. 4. Combinez le filtrage par état, la réouverture et la récupération après un état vide. ### Vérifier le flux connecté Soumettez une note vide, saisissez un brouillon, consultez une autre demande, puis revenez vérifier que le brouillon a été conservé. Marquez le dossier comme vérifié, filtrez sur les dossiers vérifiés, puis rouvrez-le. Vérifiez la récupération après un état vide et la conservation de la note. Sur les écrans étroits, la file s’affiche au-dessus du détail, sans qu’aucune action ne disparaisse. Vérifiez également le chargement des polices, les erreurs JavaScript et le débordement horizontal au fil de ces changements d’état. ## ServiceNow Horizon — exemples de composants du système de conception ### main.js — logique complète de file et de vérification Tous les dossiers, brouillons, filtres, règles de validation et mécanismes de récupération. ``` 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=`

OpenDesign · Workflow study

Team review workspace

Review three original practice requests. Update a local record while keeping the queue and details in context.

`; 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=`${r.id}${r.title}${r.owner}${r.status}`;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='

Choose another status

All local requests are still available through the status filter.

';return}panel.innerHTML=`

${r.id} · ${r.owner}

${r.title}

${r.detail}

Priority
${r.priority}
Status
${r.status}

Write one useful observation. This note remains in the page.

`;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(); ``` Référence du code - Tout le comportement repose sur du code d’application d’origine, et non sur un composant officiel de Workspace API. ### horizon.css — composition d’origine Références documentées pour la typographie, l’espacement et les rayons, avec des couleurs d’origine préfixées par le nom de l’application. ``` :root{--app-ink:#21342c;--app-action:#285c47;--app-surface:#f2f5f3;--app-border:#c9d3cd;--app-error:#a32424;--app-radius-small:2px;--app-radius-medium:6px;--app-radius-large:8px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Lato,Arial,sans-serif;color:var(--app-ink);background:var(--app-surface)}main{max-width:1160px;margin:auto;padding:32px}h1,h2,h3{font-family:Cabin,Arial,sans-serif;font-weight:600;line-height:1.25}h1{font-size:32px;margin:8px 0 16px}h2{font-size:24px;margin:8px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}header>p:last-child{max-width:68ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}.toolbar label{display:flex;gap:12px;align-items:center}select,textarea,button{font:inherit}select{padding:8px;border:1px solid var(--app-border);border-radius:6px;background:white;color:var(--app-ink)}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:24px}nav{align-self:start}.queue-item{display:grid;gap:8px;width:100%;text-align:left;margin-bottom:12px;background:white;border:1px solid var(--app-border);border-radius:8px;padding:16px;color:var(--app-ink);cursor:pointer}.queue-item[aria-current=true]{border:2px solid var(--app-action);padding:15px;background:#e8f0ea}.queue-item strong{font-size:16px}.record-id,.queue-item>span{font-size:14px}.status{justify-self:start;border-radius:2px;padding:2px 8px;background:#e8eeeb}.status.reviewed{background:#d0ead9}.workspace section{background:white;padding:24px;border:1px solid var(--app-border);border-radius:8px;min-width:0}dl{display:flex;gap:40px;margin:24px 0}dt{font-size:14px;color:#58685f}dd{margin:4px 0;font-weight:700}form>label{font-weight:700}.hint{font-size:14px;margin:8px 0}textarea{width:100%;padding:12px;border:1px solid #6b7f72;border-radius:6px;resize:vertical;color:var(--app-ink)}button{border:1px solid #6b7f72;border-radius:6px;background:white;padding:8px 16px;color:var(--app-ink);cursor:pointer}.primary{background:var(--app-action);color:white;border-color:var(--app-action)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.error{color:var(--app-error);font-weight:700}.hint,.error{max-width:60ch}#feedback:empty{display:none}#feedback{background:#d0ead9;padding:16px;border-radius:6px}footer{font-size:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--app-border)}:focus-visible{outline:3px solid #477fd0;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.workspace section{padding:16px}h1{font-size:24px}.eyebrow{overflow-wrap:anywhere}} ``` Référence du code - Ne présentez pas les couleurs d’origine comme des jetons Horizon officiels. ### index.html — shell racine Le point d’entrée complet de l’application autonome. ``` Team review study
``` Référence du code - Remplacez le fichier index.html racine de Vite par ce fichier. ## ServiceNow Horizon — configuration de l’agent pour le système de conception ### Point de départ de l’implémentation Ce code exécute uniquement l’étude d’origine. Une implémentation native de ServiceNow nécessite l’environnement de développement adapté à la plateforme. ``` npm create vite@latest horizon-study -- --template vanilla cd horizon-study npm install npm install @fontsource/cabin@5.3.0 @fontsource/lato@5.3.0 # Save index.html at root; main.js and horizon.css in src. npm run dev ``` ### Un prompt pour votre projet ``` Créez l’étude originale complète de vérification des demandes en vous appuyant sur les références vérifiées de typographie, d’espacement et de rayons de Horizon Workspace. Préfixez les couleurs d’origine par le nom de l’application. Conservez les brouillons par dossier, validez avant la vérification, recalculez le dossier sélectionné après chaque changement d’état, conservez les notes lors de la réouverture et prévoyez un mécanisme de récupération après un état vide. Ne prétendez pas qu’il existe une connexion active à ServiceNow. ``` ## ServiceNow Horizon — sources et périmètre du système de conception Étude originale OpenDesign HTML/CSS inspirée des fondements de Horizon Workspace. Elle utilise les valeurs documentées de typographie Cabin/Lato, d’espacement et de rayons, ainsi que des couleurs et une logique de flux d’origine. Il ne s’agit ni d’une instance ServiceNow ni d’un environnement d’exécution natif de Workspace. - Présentation de Workspace Contexte du framework et ressources associées. - Espacement Noms exacts de l’échelle modulaire et des références Sass. - Rayon des angles Valeurs publiées de 2/6/8 px. - Typographie Cabin/Lato et rôles des tailles. - Recommandations sur les couleurs Indices d’état fondés sur la finalité et non sur la couleur. ## ServiceNow Horizon — ressources associées au système de conception ### ServiceTitan Anvil Concrétisez Anvil2 avec son modèle de tokens à trois niveaux, ses valeurs de rôles vérifiées en mode clair et sombre, et une interaction complète d’affectation de service avec des états de technicien, d’horaire et de révision synchronisés. ### Siemens iX Examinez des événements industriels à l’aide d’un vocabulaire explicite de niveaux de gravité, de rôles de couleur adaptés au thème et de la liste d’événements iX API. Ce guide crée un carnet d’équipement local sans confondre un événement révisé avec une alarme machine résolue. ### Sprout Social Seeds Examinez les véritables tokens publics de Seeds pour les couleurs, l’espacement, la typographie des produits et les bordures dans une file complète de révision éditoriale, avec sélection mixte, états vides après filtrage et annulation. - [Référence de mise en œuvre](https://horizon.servicenow.com/workspace/overview) - [Source](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Source](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Source](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Référence du code](https://horizon.servicenow.com/workspace/overview) - [Présentation de Workspace Contexte du framework et ressources associées.](https://horizon.servicenow.com/workspace/overview) - [Espacement Noms exacts de l’échelle modulaire et des références Sass.](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Rayon des angles Valeurs publiées de 2/6/8 px.](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Typographie Cabin/Lato et rôles des tailles.](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Recommandations sur les couleurs Indices d’état fondés sur la finalité et non sur la couleur.](https://horizon.servicenow.com/workspace/foundations/color/color-overview)