Services publics et administration · Nouvelle ressource
Système de design Ontario.
Créez un guide détaillé de style ontarien avec une véritable typographie, les valeurs publiées d’espacement et de couleur, le comportement natif des accordéons et le code source complet correspondant à la version.
Ontario 9.1.0 publié CSS et script de l’accordéon, polices locales intégrées, contenu original et gestionnaire d’ouverture liée. · Référence de mise en œuvre
02
Référence de conception système de design Ontario
Jetons de conception Ontario et complete-styles 9.1.0 ; chemins d’exportation réels du package, SCSS de l’accordéon et script publié vérifiés localement.
Couleurs du texte, des surfaces et des interactions
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-greyscale-black
#1A1A1A
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-greyscale-greyscale5
#F2F2F2
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-greyscale-greyscale20
#CCCCCC
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-link
#0066CC
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-link-hover
#00478F
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-link-active
#002142
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-link-visited
#551A8B
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-focus
#009ADB
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-alert
#CD0000
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-success
#118847
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
--ontario-colour-system-information
#1080A6
Exportation réelle des jetons 9.1.0. Le composant compilé CSS associe ces rôles à des valeurs ; l’importation d’un jeton seul ne crée pas de composant.
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-font-sizes-standard-body-text
1rem
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-font-sizes-large
1.25rem
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-font-sizes-x-large
1.5rem
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-breakpoints-small
40em
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-breakpoints-medium
73em
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-grid-columns-total-columns
12
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-grid-columns-row-width
1152
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
--ontario-grid-columns-column-gutter
32
Valeur publiée du jeton ; les valeurs de grille sans unité décrivent le système source et doivent être interprétées dans l’implémentation de grille concernée.
03
Guide complet système de design Ontario
Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.
DESIGN-ontario.md
Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.
Exports du package et styles des composants système de design Ontario
Utilisez le package de styles complet de manière réfléchie
L’exemple fixe la version @ongov/ontario-design-system-complete-styles à 9.1.0 et utilise le script publié de développement/réduction. Il s’agit d’une implémentation HTML/CSS, et non du runtime distinct de composants Web d’Ontario. La table des exports du package expose le thème compilé sous styles/css/compiled/ontario-theme.min.css ; dans un bundler moderne, un chemin d’importation profond supposé, avec un préfixe dist supplémentaire, échoue.
Incluez les règles de l’accordéon
Dans le package 9.1.0 examiné, le thème compilé ne contient pas les sélecteurs d’accordéon utilisés par ce spécimen. La page inclut donc les règles compilées à partir du fichier ontario-accordion.scss du package, dans le CSS fourni. Le script est copié du répertoire dist/scripts publié, car ce chemin profond JavaScript n’est pas exporté. Il s’agit d’exigences de compilation concrètes, et non d’améliorations visuelles facultatives.
Typographie et hiérarchie Ontario système de design Ontario
Respectez l’association de polices prévue
Le thème publié fournit Raleway Modified pour les titres et Open Sans pour le texte courant. L’aperçu intègre les graisses normales 400 et 700 utilisées sur la page. Cela préserve le style distinctif des titres tout en évitant toute dépendance à des polices distantes. La typographie doit être examinée après le chargement des polices : le rendu de remplacement peut modifier les retours à la ligne et le poids relatif des titres de l’accordéon.
Facilitez le repérage des étapes
Le titre présente une tâche, le texte d’introduction explique comment utiliser le guide et les trois titres d’étape définissent une séquence claire. Les paragraphes et listes complémentaires figurent dans chaque panneau. La note adjacente reste visible, car les informations essentielles sur la participation et l’accessibilité ne doivent pas dépendre de la découverte d’un panneau masqué. La hiérarchie fait partie du modèle de contenu ; elle ne justifie pas de transformer chaque phrase en titre.
Rôles des couleurs et fonctionnalités des composants système de design Ontario
Attribuez des rôles distincts aux liens et au focus
La couleur de lien exportée est #0066CC, avec des couleurs distinctes pour les états de survol, actif et visité. Le focus utilise #009ADB. L’accordéon associe un libellé visible, une icône directionnelle et un état développé ; son fonctionnement ne peut pas être expliqué par le seul texte bleu. La bordure grise distingue les étapes sans transformer chaque paragraphe en carte distincte.
Utilisez la progression d’espacement publiée
Le tableau d’espacement va de zéro à cinq rem, avec des valeurs intermédiaires nommées. Le spécimen applique une mise en page personnalisée à deux colonnes autour des règles officielles du composant. Son point de rupture à 760px est un choix de composition pour ce guide intégré et n’est pas présenté comme un nouveau point de rupture Ontario. Les points de rupture officiels figurent séparément dans le tableau de référence.
Structure et état de l’accordéon système de design Ontario
Associez chaque bouton à son contenu
Chaque étape comporte un titre contenant un véritable bouton. Son attribut aria-controls pointe vers une section de contenu dotée d’un identifiant unique, et aria-expanded indique si cette section est ouverte. Le contenu fait référence au bouton avec aria-labelledby. Le script natif coordonne les classes du composant et aria-hidden à l’ouverture et à la fermeture du panneau. Un identifiant en double briserait cette association, même si la mise en page semble correcte.
Utilisez des identifiants uniques pour les boutons et les contenus.
Placez le titre autour d’un véritable bouton interactif.
Adaptez le balisage au comportement de visibilité du script versionné.
Synchronisez les commandes de toutes les étapes
Système de design Ontario Ouverture liée et contenu essentiel
Ouvrez une étape avec son véritable bouton
Les liens de la barre latérale désignent une étape, puis déclenchent son bouton natif si elle est fermée. Après l’ouverture, ils placent le focus sur le bouton. Ainsi, l’attribut expanded du bouton, la classe du titre et la visibilité du contenu sont modifiés au cours de la même transition. Le gestionnaire supplémentaire relève du code de l’application ; il est présenté dans son intégralité afin que le lecteur puisse reproduire ce comportement.
Rédigez des informations complémentaires qui méritent d’être développées
Les trois étapes rédigées couvrent la préparation, le matériel et le suivi d’un petit atelier. Chacune présente des actions précises et un paragraphe qui explique les limites de l’exemple. Une véritable invitation doit néanmoins indiquer directement son objectif, les modalités d’accès et les détails nécessaires pour participer. Ce modèle organise un guide plus long ; il ne doit pas masquer des informations essentielles dans le seul but de raccourcir la page.
Système de design Ontario Code source complet et vérification
Recréez l’exemple versionné
Créez un projet Vite vanilla, installez le package complete-styles épinglé et copiez son script de développement/réduction dans src. Enregistrez les fichiers main.js et ontario.css fournis en conservant l’élément racine de montage. Le fichier CSS comprend les règles officielles d’accordéon compilées pour cette version, suivies de règles de mise en page originales clairement signalées. Cette implémentation HTML ne nécessite ni enregistrement de composant ni service backend.
Installez le package complete-styles épinglé.
Copiez son script de développement/réduction et enregistrez le fichier d’entrée complet ainsi que le fichier CSS.
Ouvrez tous les panneaux, puis réduisez et rouvrez une étape à l’aide de son lien.
Vérifiez le focus clavier, les attributs expanded et l’affichage sur téléphone.
Vérifiez le comportement des liens et des commandes de groupe
Testez l’ouverture de chaque étape, la réduction de toutes les étapes, puis utilisez un lien de la barre latérale pour rouvrir l’étape centrale. Vérifiez que l’état expanded du bouton correspond à la visibilité du contenu. Répétez le test à la largeur d’un téléphone, où la barre latérale suit le guide. La vérification locale confirme également le chargement des polices, l’absence de débordement horizontal de la page et l’absence d’erreurs du script natif dans le navigateur.
Système de design Ontario Exemples de composants du système de conception
main.js — guide complet de l’atelier
Contenu original complet, import du script publié et comportement d’ouverture par lien.
javascript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
Copiez le script publié à l’aide de la commande d’installation. Les liens déclenchent le bouton natif afin de maintenir la synchronisation de l’état ARIA.
ontario.css — accordéon compilé et mise en page originale
Règles d’accordéon officielles de la version 9.1.0, suivies d’une composition adaptative originale.
Le thème compilé et la feuille de style propre au composant accordéon sont tous deux nécessaires pour cette version épinglée.
04
Système de design Ontario Configuration de l’agent
Point de départ de l’implémentation
L’aperçu exécute le même script d’accordéon publié avec des fichiers de police locaux. L’exemple ne charge pas la bibliothèque distincte de composants Web.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
Un prompt pour votre projet
Prompt pour l’agent IA
Créez le guide de l’atelier de l’Ontario avec complete-styles 9.1.0 et le script d’accordéon correspondant. Incluez le fichier CSS propre au composant accordéon, les véritables polices Raleway Modified/Open Sans, des identifiants accessibles pour les boutons et les contenus, ainsi que le comportement synchronisé de développement et de réduction. Laissez les informations essentielles visibles et faites passer les liens des étapes par les boutons natifs.
05
Système de design Ontario Sources et périmètre
Un guide d’atelier rédigé par OpenDesign, utilisant les styles Ontario 9.1.0 et son script publié de développement/réduction. Le contenu et la composition de la page sont originaux ; il ne s’agit pas d’une page de service officielle.
