# Système de design HarvardSites ## Aperçu de l’interface système de design HarvardSites Comparez les styles de présentation tout en conservant le même contenu sur l’événement ; affichez les informations destinées aux participants une par une ou toutes à la fois. ## Référence du système de design système de design HarvardSites Normes éditoriales et recommandations officielles de HarvardSites pour les composants. Les références publiques décrivent les styles configurables et les exigences, mais pas un package public universel de jetons CSS. L’aperçu utilise des valeurs numériques et colorimétriques explicitement originales, ainsi que des polices de remplacement système. ### Exigences typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Number of typefaces | At most 2 | Au moins une police sans sérif ; la signalétique utilise une police sans sérif. | | Minimum text size | 1rem | Ne réduisez pas les légendes ni les libellés de commandes en dessous de la taille par défaut du navigateur. | | Required x-height reference | 8.3px ±5% at a 16px font size | Critère officiel de sélection des thèmes ; ne garantit pas automatiquement la conformité des polices de remplacement. | | Text and heading alignment | Left or right according to language | Ne centrez pas et ne justifiez pas les blocs de texte. | | Special effects | No outline, drop shadow, tracking or horizontal scaling | Préservez la forme des caractères ; utilisez l’italique avec parcimonie. | ### Combinaisons de polices disponibles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Academic pairing | Baskerville + Source Sans Pro | Combinaison de polices pour les titres et le corps du texte. | | Content-heavy pairing | Merriweather + Roboto | Indépendante du choix du style du site. | | Single-family pairing | Inter + Inter | Ne modifie pas la structure des composants. | ### Options de style du site | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Light & Elegant | Soft corners; slightly lifted imagery | Présentation ouverte, généralement sans contour. | | Bold & Compelling | Straight corners; borders and dividers | Permet d’utiliser des surtitres au-delà de la bannière principale. | | Friendly & Approachable | Rounded cards; pill buttons | Présentation groupée plus douce. | | What style does not change | Typography, color roles, keyboard behavior | Ces éléments restent configurés indépendamment ou sont gérés par les composants. | ### Recommandations pour la préparation des images | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Hero export width | Approximately 1920px | Préparez les images à une largeur proche de la largeur d’affichage maximale, puis vérifiez leur recadrage. | | 50/50 Card export width | Approximately 800px | Images contextuelles pour un élément mis en avant. | | Vertical Card export width | Approximately 600px | Cartes d’éléments de même importance. | | List thumbnail export width | Approximately 400px | Listes axées sur les résumés. | | Most image file sizes | Under 200KB | Recommandation pratique, et non limite maximale garantie de la plateforme. | | Formats | JPG photographs; PNG transparency/line art; SVG simple graphics | Choisissez en fonction du contenu source. | ### Valeurs originales du spécimen — pas des jetons officiels | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Body / headings | Arial / Georgia | Polices de remplacement locales ; elles ne font pas partie des combinaisons de polices fournies par la plateforme. | | Text / accent / surface | #242424 / #653f3a / #f4f1ec | Palette neutre originale ; les noms de jetons de couleur Harvard ne sont pas utilisés. | | Outer width / mobile inset | 70rem / 1.25rem | Choix de mise en œuvre. | | Spacing / layout switch | 1 / 1.5 / 2rem; 48rem breakpoint | Valeurs d’implémentation données à titre d’exemple, et non échelle publiée du système. | ## Système de design HarvardSites Guide complet 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. ## 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. ```
What will I need?

Bring a notebook. The fictional workshop supplies all reading material.

Can I join part of the day?

The example schedule lets visitors choose either morning or afternoon sessions.

``` 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 ### Informations destinées aux participants, avec sections laissées ouvertes HTML sémantique autonome illustrant le comportement documenté de l’accordéon, avec des commandes pour tout ouvrir ou tout fermer. ```
What will I need?

Bring a notebook. The fictional workshop supplies all reading material.

Can I join part of the day?

The example schedule lets visitors choose either morning or afternoon sessions.

``` Référence du code - Il ne s’agit ni d’un balisage généré par HarvardSites ni d’un SDK officiel. - Les informations essentielles sur l’accès doivent rester visibles en dehors des panneaux repliés. ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP. ``` Research forum — HarvardSites pattern interpretation

An original academic event example

Ideas across disciplines

A one-day forum on how researchers turn shared questions into new methods.

Friday, 16 October · 9:30–16:00 · Example Learning Centre

Fictional programme. No registration or university affiliation is implied.

One question.
Many ways of seeing.

Historians, scientists, and designers compare the evidence they work with and the assumptions they bring to it.

Explore the day’s programme →

The day at a glance

Illustrative programme
TimeSession
09:30Welcome and questions
Shared framing for the day
10:00Working with evidence
A conversation across disciplines
13:30Methods in practice
Small-group demonstrations
15:30What changes next?
Reflection and closing discussion

Attendee information

What will I need?

Bring a notebook. All reading material is provided in this fictional programme, and no specialist preparation is required.

Can I join part of the day?

The example schedule has morning and afternoon sessions. A real event page should state whether individual sessions require separate registration.

Access information stays visible.
A real event must provide verified venue access details and an accommodation contact here, outside collapsed panels.

``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Système de design HarvardSites Configuration de l’agent ### Point de départ de l’implémentation Un parcours concret de configuration et de composition destiné aux éditeurs autorisés de HarvardSites. Aucun package public API ni aucune échelle de jetons non vérifiée n’est inventé. Le ZIP de l’exemple complet fonctionnel, disponible dans les Sources, fournit également les dépendances exactes pour l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/harvard-sites.html. N’ouvrez pas les exemples utilisant des modules via file://. ``` HarvardSites editorial configuration recipe (not a package command) 1. In an authorized HarvardSites site, choose an available site style: Bold & Compelling for clearly framed conference sections. 2. Choose typography separately: Baskerville + Source Sans Pro, Merriweather + Roboto, or Inter + Inter. 3. Apply the site's approved color roles; do not hand-color every card. 4. Compose an event page from available platform components: Section Heading/Hero -> inline schedule table -> attendee Accordion. 5. Use a 50/50 Card for one featured event or a venue map with text; use Vertical Cards or a taxonomy-driven List for equal event records. 6. Add descriptive headings, image alternatives, verified times and locations. Preview mobile layout and keyboard interactions before publication. Standalone demonstration: open the supplied harvard-sites.html. It uses ordinary HTML, CSS and JavaScript, not the HarvardSites runtime. ``` ### Un prompt pour votre projet ``` Composez une page consacrée à un événement de recherche dans un HarvardSites autorisé, avec un titre de section ou un Hero, un tableau de programme compact à deux colonnes et un accordéon destiné aux participants dont les sections restent ouvertes. Choisissez indépendamment le style du site, l’association de polices approuvée et les rôles de couleur. Laissez visibles les informations essentielles sur l’accès et les horaires. Utilisez une taille de texte minimale de 1rem, deux polices au maximum, des commandes sans empattement et un texte anglais aligné à gauche. N’inventez ni package npm HarvardSites, ni échelle publique de jetons, ni interface d’édition. Si vous créez un prototype indépendant, indiquez que ses valeurs CSS sont originales et ne prétendez pas qu’il s’agit d’une sortie officielle du CMS. ``` ## Système de design HarvardSites Sources et périmètre Référence éditoriale sur HarvardSites et prototype indépendant d’un événement fictif. L’utilisation des marques institutionnelles officielles, l’accès à la plateforme et la configuration en production restent régis par Harvard. Aucune réservation, affiliation ou compatibilité avec un SDK n’est revendiquée. - Normes de conception graphique Limites relatives aux polices, taille minimale du texte, alignement et orientation. - Associations de polices Trois associations documentées de polices pour les titres et le corps du texte. - Styles de site Choix d’habillage indépendants de la typographie et des couleurs. - Page d’événement sur une page Choix de composants pour l’ordre du jour, les séances et les informations destinées aux participants. - Accordéon Structure du contenu secondaire et comportement indépendant d’ouverture et de fermeture. - Préparation des images Dimensions indicatives des fichiers exportés et recommandations de format. - 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 HarvardSites Ressources associées ### Helsinki Composez des groupes de sélection HDS natifs, des couleurs de retour sémantiques et des résumés d’erreurs liés, avec un parcours complet de vérification et de correction en local. ### Rivet Créez des pages universitaires avec l’échelle de tokens réelle de Rivet, l’anatomie de ses composants HTML et des interactions clavier natives. Découvrez une page de présentation compacte d’atelier avec des onglets accessibles pour les informations pratiques. ### Digital Agency système de design Créez des interfaces japonaises de services publics faciles à lire grâce aux rôles typographiques DADS, aux tokens sémantiques et à l’anatomie native des composants HTML. Essayez une recherche de reçu fonctionnelle avec des erreurs de format, un résultat sans correspondance et un relevé de statut consultable. - [Référence de mise en œuvre](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Source](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Source](https://designsystem.harvardsites.harvard.edu/typography-options) - [Source](https://designsystem.harvardsites.harvard.edu/site-styles) - [Source](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/site-styles) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/color-roles) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/5050-card) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Référence du code](https://designsystem.harvardsites.harvard.edu/accordion) - [Consultez la spécification associée](https://designsystem.harvardsites.harvard.edu/accordion) - [Référence du code](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Normes de conception graphique Limites relatives aux polices, taille minimale du texte, alignement et orientation.](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Associations de polices Trois associations documentées de polices pour les titres et le corps du texte.](https://designsystem.harvardsites.harvard.edu/typography-options) - [Styles de site Choix d’habillage indépendants de la typographie et des couleurs.](https://designsystem.harvardsites.harvard.edu/site-styles) - [Page d’événement sur une page Choix de composants pour l’ordre du jour, les séances et les informations destinées aux participants.](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Accordéon Structure du contenu secondaire et comportement indépendant d’ouverture et de fermeture.](https://designsystem.harvardsites.harvard.edu/accordion) - [Préparation des images Dimensions indicatives des fichiers exportés et recommandations de format.](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)