# Système de design Ripple ## Ripple Aperçu de l’interface du système de design Consultez les notes de préparation, indiquez que vous êtes prêt, puis passez directement à la prochaine étape inachevée. ## Ripple Référence de conception du système de design Documentation de conception de Ripple publiée et consultée pour cette étude : rôles de couleur par défaut, espacements, couples taille de police/interligne et couleurs de focus. Il s’agit de références de conception, et non de l’affirmation qu’une version native de Ripple est incluse. ### Rôles de couleur publiés | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --rpl-clr-primary | #0052C2 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-primary-alt | #003174 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-accent | #0095EC | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-accent-alt | #E6F5FD | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-neutral-0 | #FFFFFF | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-neutral-100 | #F5F5F5 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-neutral-200 | #E6E6E6 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-neutral-700 | #333333 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-neutral-800 | #1A1A1A | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-type-default | #1A1A1A | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-link | #0052C2 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | | --rpl-clr-link-visited | #9F46B1 | Palette par défaut de Ripple documentée ; les valeurs du thème peuvent varier. Conservez le nom du rôle lors de l’application d’un thème. | ### Échelle d’espacement publiée | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --rpl-sp-1 | 4px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-2 | 8px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-3 | 12px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-4 | 16px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-5 | 20px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-6 | 24px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-7 | 28px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-8 | 32px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-9 | 40px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-10 | 48px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-11 | 56px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-12 | 64px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-13 | 80px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | | --rpl-sp-14 | 120px | Valeur d’espacement documentée. Les valeurs des étapes suivantes ne correspondent pas à l’index multiplié par quatre. | ### Rôles typographiques et police de remplacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | rpl-type-font-family | VIC, Arial, Helvetica, sans-serif | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | | rpl-type-h1 | 32/36px small · 56/60px large · 700 | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | | rpl-type-h2 | 24/32px small · 32/40px large · 700 | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | | rpl-type-h3 | 20/28px small · 24/32px large · 700 | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | | rpl-type-p | 16/24px | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | | rpl-type-p-small | 14/20px | Couples taille/interligne issus des rôles typographiques publiés. L’exemple autonome utilise la police Arial de remplacement documentée, et non la police VIC. | ### Contraste du focus | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --rpl-clr-focus | #FF9E1B | Couleurs de focus publiées. L’exemple définit son propre CSS de focus au lieu d’importer les classes utilitaires Ripple. | | --rpl-clr-focus-contrast | #1A1A1A | Couleurs de focus publiées. L’exemple définit son propre CSS de focus au lieu d’importer les classes utilitaires Ripple. | | --rpl-clr-dark | #1A1A1A | Couleurs de focus publiées. L’exemple définit son propre CSS de focus au lieu d’importer les classes utilitaires Ripple. | ## Ripple 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. ## Ripple Fondements et portée de l’environnement d’exécution du système de design ### Distinguez une référence de conception d’un environnement d’exécution de composants > La référence décrit le système de design Ripple publié. La chronologie d’atelier fonctionnelle est une interprétation originale et complète de HTML, CSS et JavaScript, fondée sur certaines valeurs. Elle n’exécute pas les composants Vue de Ripple, n’utilise pas de miroir de package non documenté et ne prétend pas être un service du gouvernement de Victoria. Cette limite est visible dans l’aperçu et reste indiquée dans le code source téléchargeable. ### Choisissez délibérément l’intégration native Ripple publie une voie de distribution orientée Vue et une voie limitée aux styles, toutes deux via son package principal. L’installation officielle nécessite un accès à GitHub Packages. La voie limitée aux styles laisse tout de même à l’application la responsabilité du balisage et du comportement. Pour intégrer cette distribution, suivez les instructions officielles d’accès associées et épinglez une version choisie ; l’étude autonome ci-dessous ne nécessite ni authentification ni installation de package. ## Ripple Rôles de couleur et focus clavier du système de design ### Préservez la distinction entre la marque et le contenu L’en-tête de la chronologie utilise la valeur principale la plus foncée, son bord utilise la couleur d’accent et le texte de lecture utilise le rôle de texte neutre. Il s’agit de variables CSS distinctes dans le code source fourni. Le panneau d’état original utilise la surface d’accent pâle. La référence indique les noms des rôles ainsi que leurs valeurs afin qu’un futur changement de thème puisse mettre à jour la relation prévue, plutôt qu’un ensemble de valeurs hexadécimales sans lien entre elles. ### Rendez le focus clavier visiblement distinct Le focus est orange avec un contenu sombre, plutôt que d’utiliser une autre nuance du bleu par défaut. La règle de focus d’origine pour les boutons et les résumés modifie leur surface et ajoute un contour sombre. Le focus des cases à cocher reste un contour. Il s’agit d’une mise en œuvre de l’approche publiée pour la couleur du focus, et non de l’affirmation que cet exemple importe les utilitaires de focus natifs de Ripple ou garantit l’accessibilité pour tous les thèmes possibles. ## Espacement et typographie adaptative du système de design Ripple ### Utiliser la véritable échelle d’espacement La source utilise des valeurs nommées de 8, 16, 24, 32 et 48px pour rythmer la lecture. La référence complète indique également des valeurs plus grandes ; la séquence ne suit plus un simple multiple de l’index, et rpl-sp-9 vaut donc 40px plutôt que 36px. L’espacement de la grille créée et le remplissage des sections partagent volontairement des valeurs de l’échelle, tout en remplissant des rôles différents dans la mise en page. ### Délimiter clairement l’usage des polices Ripple documente VIC avec des polices de repli Arial et Helvetica. Cette étude ne fournit aucun fichier de police VIC et utilise explicitement Arial. Le titre passe de 32/36px à 56/60px au point de rupture de 992px utilisé dans l’exemple, tandis que le corps du texte reste à 16/24px. Ces valeurs de taille et de hauteur de ligne sont des références documentées ; la composition de la chronologie est originale et ne doit pas être présentée comme un composant natif identique au pixel près. ## Contenu de la chronologie et divulgation progressive du système de design Ripple ### Attribuer un rôle distinct à chaque étape La première étape définit la décision, la deuxième prépare la participation et la troisième consigne une action. Les indications temporelles relatives communiquent l’ordre des étapes sans inventer d’échéance gouvernementale ni de promesse de service. Chaque étape comprend un bref résumé toujours visible et des notes de préparation supplémentaires dans un élément details natif. La séquence reste une liste ordonnée, même si ses marqueurs visuels sont personnalisés. - Les indications temporelles relatives décrivent le déroulement de l’atelier. - Les résumés visibles présentent l’objectif de chaque étape. - Les notes dépliables contiennent des informations secondaires. - La préparation est confirmée par une action explicite sur une case à cocher. ### Ne pas confondre lecture et préparation Déplier les notes de préparation ne marque pas une étape comme terminée. La case à cocher distincte confirme la préparation, et le décompte de progression dépend uniquement des cases cochées. L’utilisateur ne risque ainsi pas de valider une tâche par inadvertance en se contentant de la lire. La source contient tous les éléments et toute la logique d’état, ce qui permet de les examiner et de les modifier. ## Progression du système de design Ripple, prochaine étape et réinitialisation ### Déduire la prochaine action de l’état actuel L’action « Passer à la prochaine étape inachevée » repère la première étape non cochée, déplie ses notes et place le focus sur sa case à cocher. Elle ne passe pas une étape simplement parce que la personne l’a consultée auparavant. Une fois les trois cases cochées, le bouton de prochaine étape est désactivé et le statut indique que toute la préparation est terminée. Décocher un élément rend l’action de nouveau disponible. ### Réinitialiser ensemble tous les états associés La réinitialisation décoche les trois cases, replie les notes, met à jour l’élément de progression et replace le focus sur la première case à cocher. Elle ne laisse pas de bannière de confirmation et ne prétend pas qu’un enregistrement distant a été supprimé. Pour cette étude locale, l’état est volontairement conservé en mémoire ; l’explication visible indique qu’il n’est ni enregistré ni envoyé. ## Code source complet et vérification du système de design Ripple ### Exécuter l’étude autonome Enregistrez le document complet fourni sous le nom index.html et servez son répertoire. Il inclut ses propres jetons, son balisage, un contenu d’exemple lisible et le code d’interaction ; aucune requête externe pour l’exécution ou les polices n’est donc nécessaire. Consultez les liens de référence pour vérifier les API natives de Ripple, les versions à utiliser et les ressources de marque autorisées avant de créer un véritable service. 1. Enregistrer l’exemple complet de HTML sous le nom index.html. 2. Servir le répertoire localement. 3. Tester au clavier le focus de l’étape suivante, la fin du parcours et la réinitialisation. 4. Pour une intégration native distincte de Ripple, utiliser l’accès officiel aux paquets et des versions précises. ### Vérifier l’ensemble des changements d’état Cochez la première étape comme prête, utilisez l’action permettant de passer à la suivante et vérifiez que le focus passe à la deuxième case, dont les notes sont dépliées. Terminez toutes les étapes et confirmez que l’action de passage à la suivante est désactivée. Décochez ensuite une étape et vérifiez que l’action est de nouveau disponible. Réinitialisez le parcours et vérifiez la progression ainsi que les sections dépliables. À la largeur d’un téléphone, le panneau de statut passe sous la chronologie et toutes les commandes restent disponibles. ## Exemples de composants du système de design Ripple ### index.html — chronologie complète de l’atelier Toutes les valeurs des jetons, les styles adaptatifs, le contenu, la progression et le comportement du focus sont réunis dans un seul document exécutable. ``` Workshop planning timeline

OpenDesign · Workshop practice

Make room for a useful conversation

A short planning timeline for a team workshop. Mark what is ready and jump to the next unfinished step.

Your preparation timeline

  1. One week before

    Define the decision

    Agree on the question the workshop should answer and the people who need to take part.

    Preparation notes
    • Write a one-sentence outcome.
    • Invite people with different perspectives on the decision.
    • Explain what is already decided and what is still open.

  2. Two days before

    Prepare for participation

    Share a short agenda and offer a way to contribute before the session.

    Preparation notes
    • Send readable material in advance.
    • Check access needs and remote participation.
    • Choose someone to capture decisions.

  3. On the day

    Leave with a next step

    Close with a clear decision, an owner and a date to review what happens next.

    Preparation notes
    • Leave time to compare different views.
    • Record unanswered questions separately.
    • Read back the agreed action before closing.

An original OpenDesign HTML/CSS study using published Ripple color, spacing and type values. It uses Arial, Ripple’s documented fallback, and does not run the Ripple Vue components or supply the VIC font. The checklist stays in this page and is not saved or sent.

``` Référence du code - Il s’agit de code d’application original, et non du code source d’un composant Vue de Ripple. - Aucun environnement d’exécution externe, chargement de police, compte ou envoi de données n’est nécessaire. ## Configuration de l’agent de système de design Ripple ### Point de départ de l’implémentation Cette commande exécute l’interprétation autonome. Pour utiliser la version native de Ripple, suivez les instructions officielles concernant l’accès à GitHub Packages et la configuration Vue ou limitée aux styles, indiquées dans les sources. ``` # Save the complete example as index.html in an empty directory. python3 -m http.server 8000 # Open http://localhost:8000/ ``` ### Un prompt pour votre projet ``` Créer la chronologie complète et originale de l’atelier à partir du document fourni. Respecter les valeurs de rôle et d’espacement documentées de Ripple, le repli explicite sur Arial, la distinction entre lecture et préparation, le focus sur la prochaine étape inachevée, la fin du parcours et la réinitialisation complète. Présenter le résultat comme une interprétation de HTML/CSS, et non comme une implémentation native de Ripple avec Vue. ``` ## Sources et périmètre du système de design Ripple Une interprétation de OpenDesign avec HTML/CSS, fondée sur les valeurs de conception publiées de Ripple et sur la police de repli Arial documentée. Cet aperçu n’exécute pas les composants Vue de Ripple et n’inclut pas les ressources de police VIC. - Rôles des couleurs Palette par défaut et rôles du contenu. - Espacement Séquence complète d’espacement publiée. - Typographie VIC, polices de repli et paires typographiques adaptatives. - États de focus Traitement du focus orange et sombre. - Configuration native limitée aux styles Accès aux paquets et responsabilités liées aux styles uniquement. - Jetons de design Nommage des rôles et liens entre les thèmes. ## Ressources associées au système de design Ripple ### Scottish Government système de design Appliquez les rôles typographiques, d’espacement et de couleur adaptatifs du gouvernement écossais à un champ natif avec compteur de caractères, qui conserve le texte au-delà de la limite et permet de corriger la saisie. ### Singapore Government système de design Utilisez les SGDS Web Components actuels avec de véritables tokens adaptatifs, des thèmes jour et nuit et des quantités natives bornées qui maintiennent la synchronisation d’un plan local. ### Decanter Composez des pages éditoriales universitaires avec le preset Tailwind de Decanter, une échelle typographique adaptative et des marges fluides. Découvrez des cartes d’événements originales avec des filtres de sujet fonctionnels et des résumés dépliables. - [Référence de mise en œuvre](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Source](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Source](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Source](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [Source](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Référence du code](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/) - [Rôles des couleurs Palette par défaut et rôles du contenu.](https://www.ripple.sdp.vic.gov.au/design-system/styles/colour/) - [Espacement Séquence complète d’espacement publiée.](https://www.ripple.sdp.vic.gov.au/design-system/styles/spacing/) - [Typographie VIC, polices de repli et paires typographiques adaptatives.](https://www.ripple.sdp.vic.gov.au/design-system/styles/typography/) - [États de focus Traitement du focus orange et sombre.](https://www.ripple.sdp.vic.gov.au/design-system/styles/focus-state/) - [Configuration native limitée aux styles Accès aux paquets et responsabilités liées aux styles uniquement.](https://www.ripple.sdp.vic.gov.au/design-system/develop/usage/css-only/) - [Jetons de design Nommage des rôles et liens entre les thèmes.](https://www.ripple.sdp.vic.gov.au/design-system/design/design-tokens/)