# Système de design Michigan Forty Two ## Michigan Forty Two Aperçu de l’interface du système de design Combinez les filtres de rôle et de recherche, obtenez une liste vide, puis effacez la sélection. ## Michigan Forty Two Référence de conception du système de design Palette Web, typographie, formation et consignes de publication officielles de Michigan Engineering. La géométrie et l’exécution de l’aperçu sont explicitement originales. ### Palette Web officielle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Maize / Blue | #FFCB05 / #00274C | Association principale de l’identité visuelle ; les couleurs d’accompagnement ne la remplacent pas. | | Base text / surface | #131516 / #FAFAFA | Puma Black et Base White. | | February Grey | #E9E9E9 | Fond neutre clair pour une séparation ou une surface d’accompagnement. | | Community Blue | #1E406B | Nuance de bleu d’accompagnement. | | Research Blue | #2A5993 | Nuance de bleu d’accompagnement. | | Hyperlink Blue | #1779BA | Couleur de lien Web nommée ; vérifiez tout de même le contexte et le contraste. | | Web A2 Amethyst | #663289 | Utilisez la palette du système Web ; une ancienne page générale sur la marque indique un violet différent. | ### Typographie et langue | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Interface/headline family | Roboto | Famille de polices Web officielle ; la graisse exprime l’emphase. | | Paragraph family | Open Sans | Les consignes officielles la recommandent expressément pour les paragraphes sur le Web. | | Playfair Display | Print-oriented serif option | Ne partez pas du principe que tous les titres Web doivent l’utiliser. | | Page and section names | Sentence case | S’applique aussi aux liens d’ancrage, aux titres promotionnels et aux légendes. | | CTA punctuation | No punctuation | Convention rédactionnelle documentée ; préservez les formulations porteuses de sens. | ### Plateforme et compositions prises en charge | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Runtime | Institution-supported WordPress Forty-Two theme | Disponible dans le cadre d’un accord avec C&M ou CAEN, et non sous la forme d’un SDK npm public vérifié. | | Composition | Blocks and patterns | Les éléments et composants prennent la forme de blocs ; les groupes plus larges peuvent devenir des compositions. | | People directory | Role and Research filters; Query Sort or Sidebar layouts | Inventaire de la documentation officielle ; le plugin exact API n’a pas été vérifié publiquement ici. | | Deprecated component | Accordion Item | Indiqué comme obsolète ; ne le recommandez pas pour une nouvelle page. | | Navigation maintenance | Appearance > Editor > Navigation | Après la création de la page, ajoutez-la au menu prévu ou réorganisez-y sa position. | ### Choix explicites pour l’aperçu | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Preview runtime | Original HTML/CSS/JS | Présente le concept documenté sans charger le thème institutionnel à accès restreint. | | Preview typography | Arial; 17px body / 1.6 line-height | Valeur de remplacement et taille d’origine délibérées, et non jeton officiel. | | Preview geometry | 1040px max; 220px filter sidebar; 32px gap | Composition originale, sans reprendre de valeurs publiées pour la grille Forty-Two. | | Preview compact breakpoint | 700px | Place les filtres au-dessus des résultats ; choix de mise en page. | | Filter semantics | Role AND research area | Intersection locale originale avec gestion du cas où aucun résultat n’est trouvé. | ## Michigan Forty Two 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. ## Michigan Forty Two Mise en œuvre institutionnelle du système de design ### Un écosystème WordPress pris en charge > Forty-Two est le système de design de Michigan Engineering et un thème WordPress pris en charge. La présentation officielle décrit des éléments, des composants et des groupes de composants, représentés par des blocs et des compositions dans l’éditeur. Le thème est proposé aux départements et aux unités d’Engineering dans le cadre des services d’hébergement de Communications & Marketing ou de CAEN. Il ne faut pas le présenter comme un package npm générique installable par n’importe quel projet. Cet exemple local propose une interprétation transparente du concept documenté d’annuaire de personnes. Il utilise la palette Web publiée et des profils fictifs, tandis que sa mise en page et son code de filtrage sont originaux. Un site institutionnel autorisé devrait utiliser le thème pris en charge et ses compositions actuelles, plutôt que de copier cette démonstration dans un bloc HTML personnalisé en supposant qu’il soit équivalent. Consultez la spécification associée ## Michigan Forty Two Palette Web et contraste du système de design ### Utilisez la référence propre au Web Maize et Blue constituent l’identité visuelle principale. La palette Web comprend aussi Base Puma Black, Base White et des nuances de bleu nommées, dont Hyperlink Blue. Les teintes secondaires complètent l’association principale ; elles ne justifient pas d’attribuer à chaque sujet universitaire un fond voyant sans lien avec celui-ci. Dans cet exemple, les couleurs de l’identité visuelle sont réservées à l’en-tête, et des tons neutres plus discrets entourent les résultats. La palette du système Web et la page générale sur la marque diffèrent pour certaines valeurs secondaires, notamment A2 Amethyst. Le tableau de référence s’appuie sur la source propre au système Web. Toute dérogation aux valeurs par défaut du thème doit faire l’objet d’une vérification du contraste. Le fait qu’une couleur ait un nom officiel ne garantit pas qu’elle convienne à du petit texte sur tous les fonds. Consultez la spécification associée ## Michigan Forty Two Typographie et ton éditorial du système de design ### Créer une hiérarchie sans inventer de jetons typographiques Le guide typographique d’Engineering désigne Roboto et Open Sans comme ses principales familles de polices Web, Open Sans étant utilisée pour les paragraphes. Playfair Display est réservée à l’impression ; cela ne signifie donc pas qu’une police à empattements est obligatoire pour les titres Web. Cet aperçu utilise explicitement Arial comme police de remplacement ; le corps en 17px et la taille des titres sont des choix de démonstration, et non des jetons typographiques Forty-Two inventés. Les consignes rédactionnelles préconisent la casse de phrase pour les titres de page, les intertitres, les libellés d’ancrage, les titres promotionnels et les légendes. Cette approche convient à un annuaire de personnes : un nom, un rôle et une description de recherche clairs apportent davantage d’informations qu’un slogan promotionnel. Sur les sites réels, respectez la dénomination institutionnelle et n’ajoutez pas de titres ou de qualifications non vérifiés aux profils. Consultez la spécification associée ## Michigan Forty Two Structure des personnes et des taxonomies du système de design ### Distinguer la personne du libellé de filtre L’index officiel des formations couvre la configuration de People, l’ajout d’un rôle ou d’un domaine de recherche, ainsi que deux dispositions de filtre : Query Sort et Sidebar. Ces entrées montrent que les personnes et leurs classifications sont des contenus gérés, et non des blocs dupliqués manuellement sur chaque page d’annuaire. Les attributs actuels exacts du plugin n’ayant pas été consultés publiquement, ce guide n’invente ni noms de codes courts ni clés de requête. Dans l’exemple indépendant, chaque personne a un rôle et un domaine. Les deux filtres s’appliquent simultanément. Ce modèle volontairement réduit rend l’intersection visible : Faculty et Robotics ne renvoient aucun résultat, tandis que Research staff et Robotics en renvoient un. Une taxonomie en production peut être plus riche, mais il convient de définir explicitement son comportement AND/OR avant de créer l’interface. ``` // Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty. ``` Référence du code Consultez la spécification associée ## Michigan Forty Two Filtres et gestion des résultats vides dans le système de design ### Veillez à ce que la sélection en cours reste compréhensible La modification d’un filtre met à jour les profils affichés et une région dynamique qui annonce le nombre de résultats. Le focus reste sur le menu déroulant, ce qui permet aux personnes qui utilisent le clavier de comparer les options sans devoir revenir sans cesse au contrôle. Le message d’absence de résultats explique que cette combinaison ne donne aucun résultat et propose de modifier l’un des champs ou d’effacer les deux filtres. Effacer les filtres rétablit leurs valeurs par défaut et affiche tous les profils, puis replace le focus sur le premier filtre. Les profils conservent un ordre stable. Cela évite un problème subtil des annuaires où chaque modification de filtre supprime des personnes et les réordonne de façon inattendue. Les noms et descriptions présentés ici sont fictifs et ne laissent entendre aucune affiliation réelle à une université. 1. Sélectionnez « Personnel de recherche » et vérifiez que l’annuaire n’affiche plus qu’un profil. 2. Combinez « Corps enseignant » et « Robotique », puis examinez le message de récupération affiché en l’absence de résultats. 3. Effacez les deux filtres et vérifiez que les trois profils réapparaissent dans leur ordre initial. Consultez la spécification associée ## Système de design Michigan Forty Two : blocs, modèles et maintenance ### Choisir un modèle maintenu L’inventaire de formation comprend des modèles pour les experts, les événements, les boucles de requêtes, les publications récentes et les personnes. Choisissez le modèle adapté au type de contenu plutôt que de composer une grille d’apparence similaire à partir de zones de texte sans lien entre elles. Un modèle consacré aux personnes peut préserver le lien entre la fiche d’une personne et l’annuaire qui l’affiche. L’ancien bloc « Élément d’accordéon » est explicitement indiqué comme obsolète. Sa présence dans des ressources de formation historiques ne signifie pas qu’il est recommandé pour une nouvelle implémentation. Si des pages existantes utilisent un bloc ancien, consultez le site de formation actuel et la procédure de maintenance prise en charge avant de le remplacer. Préservez le contenu pertinent et les destinations existantes lors de la modification de la présentation. - Fiches de personnes : les noms, rôles, domaines et contenus de profil relèvent de la structure de contenu prise en charge. - Modèles : utilisez une composition actuelle et documentée pour les listes ou les sections promotionnelles. - Navigation : considérez les liens de découverte comme du contenu à maintenir, et non comme un effet secondaire de la publication d’une page. Consultez la spécification associée ## Système de design Michigan Forty Two : processus pratique pour les éditeurs ### Relier une nouvelle page au site La liste de vérification officielle pour la création de pages explique que la publication d’une page ne la rend pas automatiquement accessible depuis le site. Définissez sa page parente, puis reliez-la aux éléments requis : en-tête, sous-navigation, filtres par rôle ou domaine de recherche, ou pied de page. Dans le parcours de l’éditeur documenté, ouvrez Apparence, Éditeur et Navigation, sélectionnez le menu approprié, ajoutez la page et ajustez sa position dans la vue en liste. Pour un projet Forty-Two autorisé, ce processus dans l’éditeur constitue la méthode d’intégration concrète. Cette ressource ne prétend pas fournir une commande publique de SDK. Le bloc de configuration indique la méthode d’hébergement prise en charge et renvoie aux ressources de formation ; l’exemple de code local complet est présenté séparément pour un apprentissage autonome. Consultez la spécification associée ## Système de design Michigan Forty Two : accessibilité et limites de l’identité visuelle ### Les styles par défaut ne valident pas le contenu Les recommandations d’accessibilité d’Engineering indiquent que les composants Forty-Two par défaut sont conçus pour offrir un contraste accessible, mais que la modification des couleurs peut compromettre cet avantage. Le contenu des profils doit également comporter des titres pertinents, des intitulés de liens explicites, des textes alternatifs exacts pour les images et un message d’absence de résultats compréhensible. L’aperçu vérifie la mise en page adaptative et le comportement des filtres, mais ne certifie pas la conformité aux exigences de l’établissement. L’aperçu d’origine n’utilise ni Block M, ni signature universitaire, ni données réelles sur le personnel. Les logos institutionnels sont distribués par des canaux de marque authentifiés et relèvent d’un système d’identité distinct de ces couleurs pédagogiques. Un véritable site d’Engineering doit suivre les procédures de marque et de publication prises en charge ; un prototype indépendant doit être présenté comme tel. Consultez la spécification associée ## Système de design Michigan Forty Two : exemples de composants ### Croiser le rôle et le domaine Règle de filtrage locale d’origine qui rend concrète la conception d’annuaire documentée. ``` // Original local filter composition; not a Forty-Two plugin API. const matches = (person, role, area) => (role === 'all' || person.role === role) && (area === 'all' || person.area === area); // Apply both conditions; clearing one filter must preserve the other. // Announce the result count and offer recovery when the intersection is empty. ``` Référence du code ### Interprétation complète de l’annuaire des personnes Comprend deux filtres, l’annonce du nombre de résultats, un message d’absence de résultats avec solution et une commande de réinitialisation. ``` Research collaborators
INDEPENDENT RESEARCH DIRECTORY

Find a collaborator

Explore fictional profiles by role and research area.

3 people

Avery Chen

Faculty

Studies ways to make community energy systems easier to understand and maintain.

Energy

Jordan Ellis

Research staff

Supports experiments in human-centred robotics and field testing.

Robotics

Samira Patel

Faculty

Explores how durable materials can support repair and reuse.

Materials
``` Référence du code ## Michigan Forty Two Configuration de l’agent IA du système de design ### Point de départ de l’implémentation Adoption du thème institutionnel, et non installation d’un package public. L’exemple indépendant HTML est complet et s’exécute localement. Le fichier ZIP de l’exemple complet et fonctionnel, fourni dans les Sources, contient également les dépendances exactes nécessaires à l’aperçu et le document intégral. Extrayez son contenu, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/michigan-forty-two.html. N’ouvrez pas les exemples fondés sur des modules via file://. ``` Supported institutional adoption: 1. Confirm the site is a Michigan Engineering department or unit project. 2. Arrange a Forty-Two WordPress site through Communications & Marketing or CAEN web publishing. 3. Use the Training site to select an existing block/pattern and create page stubs. 4. Build People content with the supported role/research-area structure and the current People pattern. 5. Connect the page to the intended navigation and filters in Appearance > Editor. 6. Preview real content, contrast and narrow layouts before publishing through the institution's process. Independent study: Open the complete HTML example below locally. It does not install or reproduce the institution's theme. ``` ### Un prompt pour votre projet ``` Pour un site Michigan Engineering autorisé, utilisez le thème WordPress Forty-Two pris en charge et les modèles People actuels. Gérez les rôles et les domaines de recherche comme des catégories maintenues, utilisez la palette propre au Web et la typographie documentée, et reliez les nouvelles pages à la navigation. Pour un prototype indépendant, indiquez clairement que sa géométrie et son exécution sont d’origine, utilisez des personnes fictives et évitez les logos institutionnels. Prévoyez un filtrage combiné clair et une solution en cas d’absence de résultats. ``` ## Système de design Michigan Forty Two : sources et périmètre Interprétation indépendante OpenDesign. Le thème WordPress Forty-Two pris en charge et les composants internes exacts des extensions ne sont pas inclus ; tous les profils sont fictifs. - Périmètre du système et de l’hébergement Blocs WordPress, modèles et méthode d’hébergement autorisée. - Couleurs Web Palette propre au Web et exigences en matière de contraste. - Typographie Roboto, Open Sans et hiérarchie éditoriale. - Inventaire de formation Filtres pour les personnes, modèles et blocs obsolètes. - Processus de création de pages Étapes concrètes de navigation et d’utilisation de l’éditeur. - Recommandations sur le contraste Limites des thèmes par défaut et des couleurs personnalisées. - Conventions rédactionnelles Casse phrase et conventions relatives aux CTA. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Système de design Michigan Forty Two : ressources connexes ### Aksel Utilisez les véritables tokens ax de Aksel v8, la densité native des tableaux et la structure sémantique de leurs en-têtes. Triez et sélectionnez des dossiers de suivi fictifs tout en comparant les thèmes clair et sombre. ### NHS système de design Utilisez la typographie NHS.UK, l’espacement adaptatif, les choix groupés par boutons radio et des détails contextuels pour créer un parcours clair de choix de rendez-vous. ### NL système de design Composez une interface de service public à partir de composants créés par des contributeurs et d’un thème explicite. Cette référence utilise Utrecht CSS pour illustrer la correspondance des tokens, l’anatomie d’une liste de données et deux thèmes originaux associés au même flux de modification. - [Référence de mise en œuvre](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Source](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Source](https://cm.engin.umich.edu/our-brand/typography/) - [Source](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Source](https://training.engin.umich.edu/) - [Consultez la spécification associée](https://cm.engin.umich.edu/our-brand/design-system-42/) - [Consultez la spécification associée](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Consultez la spécification associée](https://cm.engin.umich.edu/our-brand/typography/) - [Référence du code](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Consultez la spécification associée](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Consultez la spécification associée](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [Consultez la spécification associée](https://accessibility.engin.umich.edu/color-contrast/) - [Périmètre du système et de l’hébergement Blocs WordPress, modèles et méthode d’hébergement autorisée.](https://cm.engin.umich.edu/our-brand/design-system-42/) - [Couleurs Web Palette propre au Web et exigences en matière de contraste.](https://cm.engin.umich.edu/our-brand/design-system-42/design-system-colors/) - [Typographie Roboto, Open Sans et hiérarchie éditoriale.](https://cm.engin.umich.edu/our-brand/typography/) - [Inventaire de formation Filtres pour les personnes, modèles et blocs obsolètes.](https://sites.google.com/a/umich.edu/engcom-wiki/web/42-design-system) - [Processus de création de pages Étapes concrètes de navigation et d’utilisation de l’éditeur.](https://training.engin.umich.edu/page-basics/new-page-checklist/) - [Recommandations sur le contraste Limites des thèmes par défaut et des couleurs personnalisées.](https://accessibility.engin.umich.edu/color-contrast/) - [Conventions rédactionnelles Casse phrase et conventions relatives aux CTA.](https://sites.google.com/a/umich.edu/engcom-wiki/web/writing-best-practices/text-content)