Système de design HarvardSites.

Système de design HarvardSites Une plateforme pour les équipes éditoriales

Commencez par une configuration HarvardSites réelle

Le site public du design system décrit les composants éditoriaux réutilisables et les choix disponibles sur les sites de l’Université. Il ne prouve pas l’existence d’un package nommé harvard-design-system ni d’un React API importable. Un éditeur de site autorisé assemble les composants de la plateforme ; un développeur indépendant peut étudier les modèles de contenu documentés sans prétendre utiliser le même CMS.

Le point de départ utile consiste à définir le type de page : une page unique consacrée à une conférence doit présenter une vue d’ensemble, un programme, la possibilité de découvrir les séances et des informations pratiques pour les participants. La recette de configuration fournie associe chaque besoin à un véritable composant HarvardSites. Le HTML autonome montre cette composition de manière indépendante, avec du contenu fictif et sans éléments d’identité institutionnelle.

Consultez la spécification associée

Système de design HarvardSites Typographie et lisibilité

Distinguez la combinaison de polices du style

La plateforme propose trois combinaisons de polices pour les titres et le corps du texte : Baskerville avec Source Sans Pro, Merriweather avec Roboto et Inter avec Inter. Ces choix sont indépendants du style du site. Passer d’une mise en page encadrée à une mise en page arrondie n’implique pas de changer les polices.

Les normes de conception graphique limitent le design à deux polices, exigent au moins une police sans sérif et fixent la taille minimale du texte à 1rem. Les menus, commandes, libellés et autres éléments de signalétique utilisent une police sans sérif. Le critère publié pour la hauteur d’x est de 8.3px ±5% avec une taille de 16px ; il est plus précis qu’une simple recommandation d’utiliser une police lisible. Le spécimen utilise Arial et Georgia comme polices de remplacement visibles, sans prétendre qu’elles font partie des combinaisons de polices fournies par la plateforme ni qu’elles ont été officiellement évaluées selon ce critère.

Consultez la spécification associée

L’alignement fait partie des normes

Les blocs de texte et les titres suivent le sens de lecture plutôt qu’un alignement centré ou justifié. Le texte qui n’est pas un lien n’est pas souligné. Veillez à la clarté des titres et utilisez le gras pour mettre l’accent ; ne créez pas un effet d’affichage en étirant les lettres, en ajoutant des contours ou en augmentant fortement leur espacement. L’aperçu conserve donc tous les libellés à 1rem ou plus et aligne à gauche l’introduction de l’événement.

Consultez la spécification associée

Système de design HarvardSites Trois choix de style indépendants

L’encadrement, la couleur et la typographie sont des paramètres distincts

Light & Elegant propose des sections ouvertes, des angles légèrement arrondis et des images discrètement décalées. Bold & Compelling met l’accent sur les lignes droites, les contours et les séparateurs. Friendly & Approachable privilégie les regroupements arrondis et les boutons en forme de pilule. Ces styles modifient l’encadrement visuel du même contenu et de la même structure de composants.

Le spécimen propose un sélecteur de style de mise en page pour comparer les différences sans modifier le texte, l’état de l’accordéon ni le comportement du focus. Il reprend les principes visuels documentés à l’aide de valeurs originales CSS ; il ne reproduit pas les feuilles de style du CMS. En particulier, l’épaisseur des bordures et le rayon des angles sont des choix d’implémentation, et non des jetons extraits de HarvardSites.

Consultez la spécification associée

Attribuez les couleurs selon leur rôle

HarvardSites définit des rôles pour le texte, les arrière-plans, les boutons et les accents, avec des correspondances pour les thèmes clairs et sombres. La palette peut varier tout en conservant ces relations. La référence publique n’impose pas un jeu unique de couleurs hexadécimales pour tous les sites. L’aperçu désigne donc son encre neutre, son accent brun et son arrière-plan chaud comme des valeurs originales, plutôt que comme des jetons de la marque Harvard.

Consultez la spécification associée

Système de design HarvardSites Composer la page unique de l’événement

Laissez le programme principal visible

Utilisez une bannière principale ou un titre de section pour présenter l’événement, puis un tableau intégré pour son programme. Le guide officiel des pages uniques recommande des cellules concises, une notation horaire cohérente et un nombre limité de colonnes pour faciliter la lecture sur mobile. Le spécimen utilise les colonnes Heure et Séance ; le lieu et les informations d’accès figurent au-dessus ou au-dessous du tableau, plutôt que dans un programme à cinq colonnes trop serré.

Un accordéon convient aux questions pratiques supplémentaires. Les informations essentielles sur les conditions d’admissibilité, l’accès au lieu, les annulations ou les dates limites doivent rester visibles, car le texte masqué peut passer inaperçu. Un événement unique peut tenir sur une page courte et autonome ; un programme de grande ampleur comportant de longs résumés et de nombreuses séances parallèles nécessite des pages détaillées liées entre elles, plutôt que des sections dépliables imbriquées à l’infini.

• Utilisez une bannière principale ou un titre de section pour présenter l’objectif et orienter les visiteurs.
• Utilisez un tableau pour permettre aux participants de comparer les horaires d’un coup d’œil.
• Utilisez une liste fondée sur une taxonomie lorsque la découverte d’événements ou de séances nécessite des filtres.

Consultez la spécification associée

Système de design HarvardSites Choisir la structure de carte adaptée

Un élément mis en avant diffère d’une collection

Une carte 50/50 associe une image ou une zone de texte à un texte explicatif. Les champs documentés comprennent une image, une légende, un surtitre facultatif, un titre, une description et des liens d’appel à l’action. Réservez-la à un récit ou à un événement mis en avant ; les cartes verticales conviennent mieux à plusieurs éléments d’égale importance, et les cartes de type bouton aux actions rapides.

Une carte 50/50 a besoin d’espace pour fonctionner. Les recommandations déconseillent de la comprimer dans une étroite zone de navigation latérale et préconisent des images porteuses de sens, plutôt que de simples illustrations génériques. L’exemple utilise une composition divisée uniquement en texte, une variante présentée dans les exemples officiels : un court thème d’un côté, une description et un lien vers le programme de l’autre. Cela évite de laisser croire qu’une photo de campus inventée représente un véritable lieu de Harvard.

Consultez la spécification associée

Système de design HarvardSites Dimensions et solutions de remplacement des images

Préparer les ressources du composant

Le guide officiel des images suggère des fichiers d’environ 1920 px pour les images Hero, 800 px pour une carte 50/50, 600 px pour les cartes verticales et 400 px pour les vignettes de liste. Il s’agit de dimensions indicatives pour la préparation, et non de largeurs fixes CSS à l’affichage. Il recommande de limiter la plupart des fichiers à moins de 200 Ko, d’utiliser le format JPG pour les photos, le PNG lorsque la transparence ou le dessin au trait l’exige, et le SVG pour les graphiques simples.

Ajoutez un texte de remplacement pertinent aux images informatives et utilisez des légendes lorsque l’image nécessite un contexte visible ou un crédit. Une carte du lieu doit être accompagnée d’un itinéraire textuel ou d’une explication équivalente de son emplacement. Modifier le cadrage peut supprimer un visage, un objet ou une étiquette mentionnés dans le texte ; vérifiez la mise en page étroite réelle après le téléversement, au lieu de supposer qu’un cadrage large pour ordinateur convient à tous les appareils.

Consultez la spécification associée

Système de design HarvardSites Comportement et commandes de l’accordéon

Informations secondaires clairement identifiées

HarvardSites documente à la fois les accordéons qui se referment automatiquement et une variante qui reste ouverte, avec des commandes permettant d’afficher ou de fermer toutes les sections. L’exemple choisit délibérément le comportement indépendant qui permet de laisser les sections ouvertes, afin que les visiteurs puissent consulter simultanément les informations sur le trajet et la préparation. Chaque titre indique le sujet masqué sans obliger le lecteur à ouvrir les panneaux pour le découvrir.

Le code utilise ici les éléments natifs details et summary pour une implémentation indépendante. Il ne prétend pas représenter le balisage généré par HarvardSites. Les boutons d’ouverture et de fermeture de toutes les sections mettent à jour chaque propriété details.open ; le navigateur conserve l’activation native au clavier de chaque summary. Aucun accordéon imbriqué n’est nécessaire, et les informations indispensables restent en dehors de ce groupe.

<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>

Référence du code

Consultez la spécification associée

Système de design HarvardSites Un processus éditorial concret

Configurer une fois, composer de façon cohérente

Dans un projet HarvardSites autorisé, sélectionnez le style de site approuvé, l’association de polices et les rôles de couleur avant de composer la page de l’événement. Utilisez les composants existants de la plateforme au lieu de coller la démo indépendante HTML dans un éditeur en espérant que son script personnalisé s’exécute. Les commandes exactes de l’éditeur varient selon le site provisionné ; cette procédure s’appuie sur les choix documentés sans inventer d’écran de configuration.

Le sélecteur de style de la démo ne modifie que l’habillage. Après avoir ouvert les deux panneaux destinés aux participants, changez de style et vérifiez qu’ils restent ouverts. Fermez-les ensuite tous, puis utilisez le clavier pour en rouvrir un. Ce contrôle de continuité est utile : la présentation visuelle ne doit ni faire perdre au lecteur sa position ni modifier le modèle de contenu.

1. Préparez le titre, la date, le lieu, le programme et les informations d’accès vérifiés, ainsi que le nom de la personne chargée des mises à jour.
2. Créez l’introduction, un tableau de programme succinct et un accordéon secondaire à partir des composants documentés.
3. Prévisualisez les mises en page étroites et vérifiez la navigation au clavier ; assurez-vous que les liens d’inscription mènent à la destination réellement approuvée.

Consultez la spécification associée

Système de design HarvardSites Exemples de composants du système de design

<!-- Independent HTML interpretation, not HarvardSites CMS output. -->
<div aria-label="Attendee information">
  <button type="button" id="open-all">Open all sections</button>
  <button type="button" id="close-all">Close all sections</button>
  <details><summary>What will I need?</summary>
    <p>Bring a notebook. The fictional workshop supplies all reading material.</p>
  </details>
  <details><summary>Can I join part of the day?</summary>
    <p>The example schedule lets visitors choose either morning or afternoon sessions.</p>
  </details>
</div>
<script>
const panels = [...document.querySelectorAll('details')];
document.querySelector('#open-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = true; });
});
document.querySelector('#close-all').addEventListener('click', () => {
  panels.forEach(panel => { panel.open = false; });
});
</script>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research forum — HarvardSites pattern interpretation</title><style>*{box-sizing:border-box}body{margin:0;font:1rem/1.6 Arial,sans-serif;color:#242424;background:#fff}main{max-width:70rem;margin:auto;padding:2rem 1.25rem}.config{padding:1rem 0;border-bottom:1px solid #b9b4ac;margin-bottom:2rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}select,button{font:inherit;color:inherit;background:white;border:1px solid #615a51;padding:.65rem .9rem}button{cursor:pointer}h1,h2{font-family:Georgia,serif;line-height:1.15}h1{font-size:clamp(2.5rem,6vw,4rem);max-width:15ch;margin:1rem 0}h2{font-size:1.75rem}a{color:#653f3a;text-underline-offset:4px}a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #005fcc;outline-offset:4px}.hero{padding-bottom:2rem;border-bottom:1px solid #b9b4ac}.meta{color:#653f3a;font-weight:bold}.split{display:grid;gap:1.5rem;margin:2rem 0;padding:1.5rem;background:#f4f1ec}.split h2{margin:0}.split p{margin:0 0 1rem}table{width:100%;border-collapse:collapse;margin:1rem 0 2rem}caption{text-align:left;font-weight:bold;margin-bottom:1rem}th,td{text-align:left;padding:1rem .5rem;border-bottom:1px solid #b9b4ac;vertical-align:top}th:first-child,td:first-child{width:7rem}.controls{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}details{border-top:1px solid #b9b4ac;padding:1rem 0}details:last-of-type{border-bottom:1px solid #b9b4ac}summary{font-weight:bold;cursor:pointer}details p{max-width:55ch;margin-bottom:0}.note{margin:2rem 0 0;padding:1rem;border-left:4px solid #653f3a;background:#f4f1ec}footer{padding-top:2rem;margin-top:2rem;border-top:1px solid #b9b4ac}body[data-style="bold"] .split{border:2px solid #242424}body[data-style="friendly"] .split{border-radius:1.5rem}body[data-style="friendly"] button{border-radius:3rem}body[data-style="light"] .split{border-radius:.3rem;background:#faf9f6}@media(min-width:48rem){.split{grid-template-columns:1fr 1fr;padding:2rem}.body-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}main{padding:2.5rem}}</style></head><body data-style="bold"><main><div class="config"><label for="style">Explore framing</label><select id="style"><option value="bold">Bold &amp; Compelling interpretation</option><option value="light">Light &amp; Elegant interpretation</option><option value="friendly">Friendly &amp; Approachable interpretation</option></select></div><header class="hero"><p class="meta">An original academic event example</p><h1>Ideas across disciplines</h1><p>A one-day forum on how researchers turn shared questions into new methods.</p><p><strong>Friday, 16 October · 9:30–16:00 · Example Learning Centre</strong></p><p>Fictional programme. No registration or university affiliation is implied.</p></header><section class="split" aria-labelledby="theme"><h2 id="theme">One question.<br>Many ways of seeing.</h2><div><p>Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.</p><a href="#agenda">Explore the day’s programme →</a></div></section><div class="body-grid"><section id="agenda" tabindex="-1"><h2>The day at a glance</h2><table><caption>Illustrative programme</caption><thead><tr><th scope="col">Time</th><th scope="col">Session</th></tr></thead><tbody><tr><td>09:30</td><td><strong>Welcome and questions</strong><br>Shared framing for the day</td></tr><tr><td>10:00</td><td><strong>Working with evidence</strong><br>A conversation across disciplines</td></tr><tr><td>13:30</td><td><strong>Methods in practice</strong><br>Small-group demonstrations</td></tr><tr><td>15:30</td><td><strong>What changes next?</strong><br>Reflection and closing discussion</td></tr></tbody></table></section><section><h2>Attendee information</h2><div class="controls"><button id="open-all" type="button">Open all sections</button><button id="close-all" type="button">Close all sections</button></div><details><summary>What will I need?</summary><p>Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.</p></details><details><summary>Can I join part of the day?</summary><p>The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.</p></details><p class="note"><strong>Access information stays visible.</strong><br>A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.</p></section></div><footer>Independent interpretation of HarvardSites editorial guidance. Original layout values and colors; Arial and Georgia fallbacks. This is not a HarvardSites CMS page.</footer></main><script>document.querySelector('#style').addEventListener('change',e=>document.body.dataset.style=e.target.value);const panels=[...document.querySelectorAll('details')];document.querySelector('#open-all').addEventListener('click',()=>panels.forEach(p=>p.open=true));document.querySelector('#close-all').addEventListener('click',()=>panels.forEach(p=>p.open=false));</script></body></html>