# HarvardSites Designsystem

## HarvardSites Designsystem Interface-Vorschau

Vergleichen Sie verschiedene Gestaltungsarten bei gleichbleibendem Veranstaltungsinhalt. Öffnen Sie die Informationen für Teilnehmende einzeln oder alle auf einmal.

## 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.

### Typografieanforderungen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Number of typefaces | At most 2 | Mindestens eine serifenlose Schrift; für die Orientierung auf der Website werden serifenlose Schriften verwendet. |
| Minimum text size | 1rem | Beschriftungen und Steuerelemente dürfen nicht kleiner als die Standardschriftgröße des Browsers sein. |
| Required x-height reference | 8.3px ±5% at a 16px font size | Offizielles Kriterium für die Auswahl eines Themes; keine automatische Konformitätsaussage zu Fallback-Schriften. |
| Text and heading alignment | Left or right according to language | Textblöcke weder zentrieren noch im Blocksatz setzen. |
| Special effects | No outline, drop shadow, tracking or horizontal scaling | Die Form der Schrift beibehalten; Kursivschrift sparsam einsetzen. |
### Verfügbare Schriftkombinationen

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Academic pairing | Baskerville + Source Sans Pro | Kombination aus Überschriften- und Fließtextschrift. |
| Content-heavy pairing | Merriweather + Roboto | Unabhängig von der Auswahl des Website-Stils. |
| Single-family pairing | Inter + Inter | Verändert nicht die Komponentenstruktur. |
### Stiloptionen für Websites

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Light & Elegant | Soft corners; slightly lifted imagery | Offene Darstellung, in der Regel ohne Umrandungen. |
| Bold & Compelling | Straight corners; borders and dividers | Ermöglicht Vorspänne auch außerhalb des Hero-Bereichs. |
| Friendly & Approachable | Rounded cards; pill buttons | Sanftere, gruppierte Darstellung. |
| What style does not change | Typography, color roles, keyboard behavior | Diese Einstellungen werden unabhängig konfiguriert oder von Komponenten übernommen. |
### Richtlinien zur Bildaufbereitung

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Hero export width | Approximately 1920px | Bilder ungefähr auf die maximale Darstellungsbreite zuschneiden und anschließend den Bildausschnitt prüfen. |
| 50/50 Card export width | Approximately 800px | Kontextbezogene Bilder für einen hervorgehobenen Eintrag. |
| Vertical Card export width | Approximately 600px | Karten für gleichrangige Einträge. |
| List thumbnail export width | Approximately 400px | Listen mit Schwerpunkt auf Zusammenfassungen. |
| Most image file sizes | Under 200KB | Eine praktische Empfehlung, keine garantierte harte Plattformbegrenzung. |
| Formats | JPG photographs; PNG transparency/line art; SVG simple graphics | Je nach Ausgangsinhalten auswählen. |
### Ursprüngliche Beispielwerte – keine offiziellen Tokens

| Name / Regel | Wert / Konfiguration | Verwendung |
| --- | --- | --- |
| Body / headings | Arial / Georgia | Lokale Fallbacks; keine der bereitgestellten Schriftkombinationen der Plattform. |
| Text / accent / surface | #242424 / #653f3a / #f4f1ec | Ursprüngliche neutrale Palette; keine Harvard-Farbtoken-Bezeichnungen. |
| Outer width / mobile inset | 70rem / 1.25rem | Entscheidungen bei der Implementierung. |
| Spacing / layout switch | 1 / 1.5 / 2rem; 48rem breakpoint | Beispielwerte für die Implementierung, keine veröffentlichte Systemskala. |
## HarvardSites Designsystem Vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

### Ausrichtung ist Teil des Standards

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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

### Farben nach ihrer Funktion zuweisen

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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

Unterstützende Spezifikation lesen

## 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.

```
<!-- 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>
```

Code-Referenz

Unterstützende Spezifikation lesen

## 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.

1. Halten Sie den bestätigten Veranstaltungstitel, das Datum, den Ort, das Programm, Zugangsinformationen und die für Aktualisierungen zuständige Person bereit.

2. Erstellen Sie die Einleitung, eine kompakte Programmtabelle und ein Akkordeon für weiterführende Informationen aus dokumentierten Komponenten.

3. Prüfen Sie schmale Layouts und die Tastaturbedienung. Vergewissern Sie sich, dass Registrierungslinks zum tatsächlich freigegebenen Ziel führen.

Unterstützende Spezifikation lesen

## HarvardSites Designsystem Beispiele für Designsystem-Komponenten

### Informationen für Teilnehmende, die geöffnet bleiben können

Unabhängiges semantisches HTML für das dokumentierte Akkordeonverhalten, einschließlich Steuerelementen zum Öffnen und Schließen aller Bereiche.

```
<!-- 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>
```

Code-Referenz

- Dies ist weder von HarvardSites erzeugtes Markup noch ein offizielles SDK.

- Wichtige Zugangsinformationen müssen außerhalb eingeklappter Bereiche sichtbar bleiben.

### Vollständiges eigenständiges Beispiel

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.

```
<!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>
```

Code-Referenz

- 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.

## 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://`.

```
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

```
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.
```

## 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.

- Grafikdesign-Richtlinien Vorgaben zu Schriftkombinationen, Mindestschriftgröße, Ausrichtung und Orientierung.

- Schriftkombinationen Drei dokumentierte Kombinationen aus Überschriften- und Fließtextschrift.

- Website-Stile Gestaltungsoptionen unabhängig von Typografie und Farbe.

- Einseitige Veranstaltungsübersicht Komponentenauswahl für Agenda, Programmpunkte und Informationen für Teilnehmende.

- Accordion Struktur für weiterführende Inhalte und unabhängiges Öffnen und Schließen.

- Bildmaterial vorbereiten Ungefähre Exportgrößen und Hinweise zu Dateiformaten.

- Vollständiges funktionsfähiges Beispiel herunterladen ZIP-Datei mit dem vollständigen HTML, lokalen Abhängigkeiten für CSS/JavaScript, mitgelieferten Lizenzen und genauen Startanweisungen. Ein Build-Schritt ist nicht erforderlich.

## HarvardSites Designsystem Verwandte Ressourcen

### Helsinki

Kombinieren Sie native HDS-Auswahlgruppen, semantische Feedbackfarben und verknüpfte Fehlerübersichten zu einem vollständigen lokalen Ablauf zum Prüfen und Korrigieren.

### Rivet

Erstellen Sie Universitätsseiten mit der tatsächlichen Tokenskala von Rivet, der Komponentenstruktur von HTML und nativen Tastaturinteraktionen. Entdecken Sie eine kompakte Detailseite zu einem Workshop mit barrierefreien Tabs zu Besuchsinformationen.

### Digital Agency Designsystem

Erstellen Sie gut lesbare japanische Oberflächen für öffentliche Dienste mit den Textrollen, semantischen Tokens und der nativen HTML-Komponentenstruktur von DADS. Testen Sie eine funktionsfähige Suche nach Belegen mit Formatfehlern, einem Ergebnis ohne Treffer und einem überprüfbaren Statuseintrag.


- [Implementierungsreferenz](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [Quelle](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [Quelle](https://designsystem.harvardsites.harvard.edu/typography-options)
- [Quelle](https://designsystem.harvardsites.harvard.edu/site-styles)
- [Quelle](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/site-styles)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/color-roles)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/5050-card)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)
- [Code-Referenz](https://designsystem.harvardsites.harvard.edu/accordion)
- [Unterstützende Spezifikation lesen](https://designsystem.harvardsites.harvard.edu/accordion)
- [Code-Referenz](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [Grafikdesign-Richtlinien Vorgaben zu Schriftkombinationen, Mindestschriftgröße, Ausrichtung und Orientierung.](https://designsystem.harvardsites.harvard.edu/graphic-design)
- [Schriftkombinationen Drei dokumentierte Kombinationen aus Überschriften- und Fließtextschrift.](https://designsystem.harvardsites.harvard.edu/typography-options)
- [Website-Stile Gestaltungsoptionen unabhängig von Typografie und Farbe.](https://designsystem.harvardsites.harvard.edu/site-styles)
- [Einseitige Veranstaltungsübersicht Komponentenauswahl für Agenda, Programmpunkte und Informationen für Teilnehmende.](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums)
- [Accordion Struktur für weiterführende Inhalte und unabhängiges Öffnen und Schließen.](https://designsystem.harvardsites.harvard.edu/accordion)
- [Bildmaterial vorbereiten Ungefähre Exportgrößen und Hinweise zu Dateiformaten.](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)