Verstehen Sie HarvardSites als redaktionelle Plattform: Vergleichen Sie Website-Stile, wählen Sie dokumentierte Schriftkombinationen und gestalten Sie Universitätsseiten mit eigens dafür entwickelten Inhaltskomponenten.
Vergleichen Sie verschiedene Gestaltungsarten bei gleichbleibendem Veranstaltungsinhalt. Öffnen Sie die Informationen für Teilnehmende einzeln oder alle auf einmal.
Eigenständige Interpretation dokumentierter redaktioneller Muster von HarvardSites HTML/CSS. Eigene Farben, Größen und fiktive Inhalte; keine offizielle CMS-Laufzeitumgebung. · Implementierungsreferenz
02
HarvardSites Designsystem Designreferenz
Offizielle redaktionelle Standards und Komponentenrichtlinien von HarvardSites. Die öffentlichen Referenzen beschreiben konfigurierbare Stile und Anforderungen, aber kein universelles öffentliches CSS-Token-Paket. Die Vorschau verwendet ausdrücklich eigens festgelegte numerische Layout- und Farbwerte sowie Systemschriften als Fallbacks.
HarvardSites Designsystem Eine Plattform für Redakteurinnen und Redakteure
Mit einer echten HarvardSites-Konfiguration beginnen
Die öffentliche Website zum Designsystem beschreibt wiederverwendbare redaktionelle Komponenten und die Auswahlmöglichkeiten für Websites der Universität. Sie ist kein Beleg für ein Paket namens harvard-design-system oder ein importierbares React API. Eine autorisierte Website-Redaktion stellt die Komponenten der Plattform zusammen. Unabhängige Entwicklerinnen und Entwickler können die dokumentierten Inhaltsmuster untersuchen, ohne vorzugeben, dasselbe CMS zu verwenden.
Am besten beginnt man mit der Frage, um welche Art von Seite es geht: Eine einseitige Konferenzübersicht braucht einen Überblick, einen Zeitplan, Möglichkeiten zum Entdecken der Sessions und ergänzende Informationen für Teilnehmende. Die bereitgestellte Konfigurationsanleitung ordnet jeden Bedarf einer echten HarvardSites-Komponente zu. Das eigenständige HTML veranschaulicht diese Zusammenstellung unabhängig, mit fiktiven Inhalten und ohne institutionelle Erkennungszeichen.
HarvardSites Designsystem Typografie und Lesbarkeit
Die Schriftkombination getrennt vom Stil auswählen
Die Plattform bietet drei Kombinationen aus Überschriften- und Fließtextschriften: Baskerville mit Source Sans Pro, Merriweather mit Roboto sowie Inter mit Inter. Diese Auswahl ist unabhängig vom Website-Stil. Wird eine Seite von einem umrahmten auf ein abgerundetes Layout umgestellt, bedeutet das nicht, dass auch die Schriften gewechselt werden.
Die Grafikdesignstandards beschränken ein Design auf zwei Schriftfamilien, verlangen mindestens eine serifenlose Schrift und legen eine Mindesttextgröße von 1rem fest. Menüs, Steuerelemente, Beschriftungen und andere Elemente zur Orientierung verwenden serifenlose Schriften. Das veröffentlichte Kriterium für die x-Höhe lautet 8.3px ±5% bei einer Schriftgröße von 16px; es geht also über die bloße Empfehlung einer gut lesbaren Schrift hinaus. Das Beispiel verwendet Arial und Georgia als sichtbare Fallbacks, ohne zu behaupten, dass sie als Schriftkombination für die Plattform bereitgestellt oder formell anhand dieses Kriteriums geprüft wurden.
Textblöcke und Überschriften folgen der Leserichtung und werden weder zentriert noch im Blocksatz gesetzt. Text ohne Link wird nicht unterstrichen. Überschriften sollen klar bleiben; Hervorhebungen werden über die Schriftstärke erzielt. Buchstaben dürfen nicht gedehnt, mit Umrissen versehen oder durch große Laufweiten als plakative Gestaltung inszeniert werden. Deshalb bleibt in der Vorschau jede Beschriftung bei mindestens 1rem, und die Einführung zur Veranstaltung ist linksbündig ausgerichtet.
HarvardSites Designsystem Drei unabhängige Stiloptionen
Rahmen, Farbe und Typografie sind getrennte Einstellungen
Light & Elegant setzt auf offene Bereiche, leicht abgerundete Formen und dezent versetzte Bilder. Bold & Compelling betont gerade Kanten, Umrandungen und Trennlinien. Friendly & Approachable verwendet abgerundete Gruppierungen und pillenförmige Schaltflächen. Diese Optionen verändern die visuelle Gestaltung derselben Inhalte und Komponentenstruktur.
Im Beispiel lässt sich über eine Auswahl des Layoutstils zwischen den Varianten wechseln, ohne Text, Akkordeonstatus oder Fokusverhalten zu verändern. Die dokumentierten visuellen Prinzipien werden mit eigenen CSS-Werten angenähert; die Stylesheets des CMS werden nicht nachgebildet. Insbesondere sind Rahmenstärken und Eckradien Entscheidungen bei der Implementierung und keine aus HarvardSites extrahierten Tokens.
HarvardSites beschreibt Funktionen für Text, Hintergründe, Schaltflächen und Akzente sowie Zuordnungen für helle und dunkle Darstellungen. Eine Palette kann variieren, solange diese Beziehungen konsistent bleiben. Die öffentliche Referenz schreibt nicht für alle Websites einen einheitlichen Hex-Farbsatz vor. Daher kennzeichnet die Vorschau ihr neutrales Schwarz, den braunen Akzent und den warmen Hintergrund als eigene Werte, statt sie als Harvard-Markenfarben zu bezeichnen.
HarvardSites Designsystem Die einseitige Veranstaltungsübersicht zusammenstellen
Den Hauptzeitplan sichtbar halten
Die Veranstaltung mit einem Hero- oder Section Heading-Element einführen und anschließend den Zeitplan in einer Inline-Tabelle darstellen. Der offizielle Leitfaden für einseitige Übersichten empfiehlt knappe Zellen, eine einheitliche Zeitnotation und wenige Spalten, damit die Tabelle auf Mobilgeräten gut lesbar bleibt. Das Beispiel verwendet die Spalten „Uhrzeit“ und „Session“. Angaben zu Veranstaltungsort und Zugang stehen über oder unter der Tabelle, statt in einer gedrängten Tabelle mit fünf Spalten.
Ein Akkordeon eignet sich für zusätzliche praktische Fragen. Wichtige Angaben zu Teilnahmeberechtigung, Zugang zum Veranstaltungsort, Absagen oder Fristen sollten sichtbar bleiben, da eingeklappte Texte übersehen werden können. Für eine einzelne Veranstaltung genügt möglicherweise eine kurze, in sich geschlossene Seite. Ein großes Programm mit langen Abstracts und vielen parallel laufenden Tracks braucht dagegen verlinkte Detailseiten statt immer weiter verschachtelter aufklappbarer Bereiche.
Mit einem Hero- oder Section Heading-Element Zweck und Orientierung vermitteln.
Eine Tabelle verwenden, wenn Teilnehmende Uhrzeiten auf einen Blick vergleichen müssen.
Eine taxonomiebasierte List verwenden, wenn Veranstaltungen oder Sessions durch Filter auffindbar sein sollen.
HarvardSites Designsystem Die passende Kartenstruktur auswählen
Ein einzelner hervorgehobener Eintrag unterscheidet sich von einer Sammlung
Eine 50/50-Karte kombiniert ein Bild oder einen Textbereich mit erläuterndem Text. Zu den dokumentierten Feldern gehören ein Bild, eine Bildunterschrift, eine optionale Dachzeile, eine Überschrift, eine Beschreibung und Call-to-Action-Links. Verwenden Sie sie für eine einzelne herausragende Geschichte oder Veranstaltung. Vertikale Karten eignen sich besser für mehrere gleich wichtige Einträge, während Karten im Schaltflächenstil schnelle Aktionen ermöglichen.
Eine 50/50-Karte braucht ausreichend Platz. Laut den Richtlinien sollte sie nicht in einen schmalen Bereich für die Seitennavigation gequetscht werden. Bilder sollen Bedeutung vermitteln und nicht bloß dekorative Stockfotos sein. Das Beispiel zeigt eine zweigeteilte Komposition nur mit Text, eine Variante aus den offiziellen Beispielen: Auf der einen Seite steht ein kurzes Thema, auf der anderen eine Beschreibung und ein Link zum Programm. So entsteht nicht der Eindruck, ein erfundenes Campusfoto zeige einen echten Ort an der Harvard University.
HarvardSites Designsystem Bildgrößen und Alternativen
Bildmaterial für die Komponente vorbereiten
Der offizielle Bildleitfaden empfiehlt Exporte mit einer Breite von etwa 1920 px für Hero-Bilder, 800 px für eine 50/50-Karte, 600 px für vertikale Karten und 400 px für Listenminiaturen. Dies sind ungefähre Zielwerte für die Vorbereitung und keine festen CSS Darstellungsbreiten. Die meisten Dateien sollten laut Empfehlung kleiner als 200 KB sein: JPG für Fotos, PNG bei Transparenz oder Strichgrafiken und SVG für einfache Grafiken.
Versehen Sie informative Bilder mit aussagekräftigem Alternativtext und verwenden Sie Bildunterschriften, wenn ein sichtbarer Kontext oder eine Quellenangabe zum Bild gehört. Eine Lagekarte für einen Veranstaltungsort braucht zusätzlich zur visuellen Darstellung eine textliche Wegbeschreibung oder eine gleichwertige Erklärung der Lage. Durch einen geänderten Bildausschnitt können Gesichter, Objekte oder Beschriftungen verschwinden, auf die sich der Text bezieht. Prüfen Sie nach dem Hochladen daher das tatsächliche Layout auf schmalen Bildschirmen, statt davon auszugehen, dass ein breiter Desktop-Ausschnitt für jedes Gerät geeignet ist.
HarvardSites Designsystem Verhalten und Steuerelemente des Akkordeons
Weiterführende Informationen mit klaren Überschriften
HarvardSites dokumentiert sowohl Akkordeons, bei denen jeweils nur ein Abschnitt geöffnet sein kann, als auch eine Variante, bei der mehrere Abschnitte geöffnet bleiben können und Steuerelemente alle Bereiche ein- oder ausklappen. Das Beispiel verwendet bewusst die unabhängige Variante, bei der Bereiche geöffnet bleiben können, damit Besuchende gleichzeitig Hinweise zur Anreise und Vorbereitung lesen können. Die Überschriften der einzelnen Bereiche benennen deren Inhalt, sodass Lesende nicht erst jedes Feld öffnen müssen, um ihn zu erkennen.
Der Code hier verwendet für eine unabhängige Implementierung native HTML-Elemente `details` und `summary`. Er erhebt nicht den Anspruch, das von HarvardSites erzeugte Markup wiederzugeben. Die Schaltflächen zum Öffnen und Schließen aller Bereiche aktualisieren jede `details.open`-Eigenschaft; die native Tastaturbedienung der einzelnen `summary`-Elemente bleibt erhalten. Ein verschachteltes Akkordeon ist nicht erforderlich, und wichtige Informationen bleiben außerhalb dieser Gruppe sichtbar.
html
<!-- 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>
HarvardSites Designsystem Ein konkreter Arbeitsablauf für Redakteurinnen und Redakteure
Einmal konfigurieren, einheitlich zusammenstellen
Wählen Sie in einem autorisierten HarvardSites-Projekt den freigegebenen Website-Stil, die Schriftkombination und die Farbrollen aus, bevor Sie die Veranstaltungsseite zusammenstellen. Verwenden Sie die vorhandenen Komponenten der Plattform, statt die unabhängige Demo HTML in einen Editor einzufügen und davon auszugehen, dass das eigene Skript ausgeführt wird. Die verfügbaren Steuerelemente im Editor hängen von der bereitgestellten Website ab. Die Anleitung nennt dokumentierte Optionen, ohne eine Einstellungsansicht zu erfinden.
Der Stilauswahlschalter der Demo ändert nur die Gestaltung. Öffnen Sie zunächst beide Bereiche für Teilnehmende, ändern Sie dann den Stil und prüfen Sie, ob die Bereiche geöffnet bleiben. Schließen Sie anschließend alle Bereiche und öffnen Sie einen davon wieder über die Tastatur. Das ist eine nützliche Prüfung der Kontinuität: Die visuelle Darstellung sollte weder die Leseposition beeinträchtigen noch das Inhaltsmodell ändern.
Halten Sie den bestätigten Veranstaltungstitel, das Datum, den Ort, das Programm, Zugangsinformationen und die für Aktualisierungen zuständige Person bereit.
Erstellen Sie die Einleitung, eine kompakte Programmtabelle und ein Akkordeon für weiterführende Informationen aus dokumentierten Komponenten.
Prüfen Sie schmale Layouts und die Tastaturbedienung. Vergewissern Sie sich, dass Registrierungslinks zum tatsächlich freigegebenen Ziel führen.
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
html
<!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 & Compelling interpretation</option><option value="light">Light & Elegant interpretation</option><option value="friendly">Friendly & 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>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
HarvardSites Designsystem Agent einrichten
Ausgangspunkt für die Implementierung
Ein konkreter Konfigurations- und Gestaltungsablauf für autorisierte HarvardSites-Redakteurinnen und -Redakteure. Es werden weder ein öffentliches Paket API noch eine ungeprüfte Token-Skala erfunden. Das vollständige ZIP-Archiv mit dem funktionsfähigen Beispiel unter „Quellen“ enthält außerdem die genauen Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis `python3 -m http.server 8080` aus und öffnen Sie anschließend http://localhost:8080/harvard-sites.html. Öffnen Sie Beispiele auf Modulbasis nicht über `file://`.
text
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.
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie für eine autorisierte HarvardSites-Veranstaltungsseite für Forschungsprojekte einen Abschnittstitel oder Hero, eine kompakte Programmtabelle mit zwei Spalten und ein Akkordeon für Teilnehmende, dessen Bereiche geöffnet bleiben können. Wählen Sie Website-Stil, freigegebene Schriftkombination und Farbrollen unabhängig voneinander aus. Wichtige Zugangs- und Zeitangaben müssen sichtbar bleiben. Verwenden Sie eine Mindestschriftgröße von 1rem, höchstens zwei Schriftfamilien, Steuerelemente in serifenloser Schrift und linksbündige englischsprachige Inhalte. Erfinden Sie weder ein HarvardSites-npm-Paket noch eine öffentliche Token-Skala oder eine Editor-Oberfläche. Wenn Sie einen unabhängigen Prototyp umsetzen, kennzeichnen Sie seine CSS-Werte als eigene Arbeit und behaupten Sie nicht, dass sie offizielle CMS-Ausgaben sind.
05
HarvardSites Designsystem Quellen und Geltungsbereich
Redaktionelle Referenz zu HarvardSites und einem unabhängigen, fiktiven Veranstaltungsprototyp. Offizielle institutionelle Kennzeichen, Plattformzugang und Produktionskonfiguration unterliegen weiterhin den Vorgaben von Harvard. Es werden weder Buchungs- oder Zugehörigkeitsfunktionen noch SDK-Kompatibilität behauptet.
