Дизайн-система HarvardSites.

Дизайн-система HarvardSites Платформа для редакторов

Начните с реальной конфигурации HarvardSites

На открытом сайте дизайн-системы описаны повторно используемые редакционные компоненты и варианты для сайтов университета. Это не подтверждает существование пакета под названием harvard-design-system или импортируемого React API. Уполномоченный редактор сайта собирает страницы из компонентов платформы; независимый разработчик может изучать документированные шаблоны содержимого, не выдавая их за работу в той же CMS.

Начать стоит с определения типа страницы: для одностраничной страницы конференции нужны обзор, программа, поиск сессий и дополнительные сведения для участников. Предлагаемый рецепт конфигурации связывает каждую потребность с реальным компонентом HarvardSites. Отдельный пример HTML показывает такую композицию независимо: в нём используются вымышленное содержимое и отсутствуют знаки принадлежности учреждению.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Типографика и удобочитаемость

Отделяйте сочетание шрифтов от стиля

Платформа предлагает три сочетания шрифтов для заголовков и основного текста: Baskerville с Source Sans Pro, Merriweather с Roboto и Inter с Inter. Эти варианты выбираются независимо от стиля сайта. Если переключить страницу с оформления в рамке на оформление с закруглёнными углами, это не означает, что нужно менять шрифты.

Стандарты графического дизайна ограничивают оформление двумя гарнитурами, требуют использовать как минимум один шрифт без засечек и устанавливают минимальный размер текста 1rem. В меню, элементах управления, подписях и других навигационных элементах следует использовать шрифт без засечек. Опубликованный критерий высоты строчной буквы x составляет 8.3px ±5% при размере шрифта 16px; это более точное требование, чем простая рекомендация выбрать хорошо читаемый шрифт. В примере используются Arial и Georgia как видимые резервные шрифты — это не означает, что они входят в предоставляемое платформой сочетание или прошли формальную проверку по этому критерию.

Прочитать вспомогательную спецификацию

Выравнивание — часть стандарта

Текстовые блоки и заголовки выравнивают по направлению чтения, а не по центру или по ширине. Текст без ссылки не подчёркивают. Заголовки должны быть понятными; выделяйте текст начертанием, но не растягивайте буквы, не добавляйте обводки и не увеличивайте межбуквенный интервал, чтобы создать декоративный эффект. Поэтому в предварительном просмотре все подписи имеют размер не менее 1rem, а вступительный текст о мероприятии выровнен по левому краю.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Три независимых настройки стиля

Рамка, цвет и типографика — разные настройки

Light & Elegant — открытые разделы, небольшое скругление и слегка смещённые изображения. Bold & Compelling — прямые края, обводки и разделители. Friendly & Approachable — сгруппированные элементы с округлёнными углами и кнопки в форме капсул. Эти настройки меняют визуальное оформление одного и того же содержимого и структуры компонентов.

В примере есть переключатель стиля макета: он позволяет изучать различия, не меняя текст, состояние аккордеона или поведение фокуса. В нём оригинальными значениями CSS приближённо воссозданы документированные визуальные решения, но не таблицы стилей CMS. В частности, толщина рамок и радиусы скругления выбраны для приложения, а не взяты из токенов HarvardSites.

Прочитать вспомогательную спецификацию

Назначайте цвета по их роли

В HarvardSites описаны роли текста, фона, кнопок и акцентов, а также их варианты для светлой и тёмной тем. Палитра может меняться, пока эти соотношения сохраняются. В открытой справке не задан обязательный набор шестнадцатеричных кодов цветов для всех сайтов. Поэтому нейтральный цвет текста, коричневый акцент и тёплый фон в предварительном просмотре обозначены как оригинальные значения, а не как цветовые токены бренда Harvard.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Составьте одностраничную страницу мероприятия

Оставьте основную программу на виду

Представьте мероприятие с помощью Hero или Section Heading, затем разместите программу в виде встроенной таблицы. В официальном руководстве по одностраничным страницам рекомендуется использовать краткое содержимое ячеек, единый формат времени и небольшое число столбцов, чтобы страницу было удобно читать на мобильных устройствах. В примере есть столбцы «Время» и «Сессия»; сведения о месте и доступности размещены над таблицей или под ней, а не втиснуты в программу из пяти столбцов.

Для дополнительных практических вопросов подойдёт аккордеон. Важные сведения о праве на участие, доступе к месту проведения, отменах и сроках лучше оставить видимыми: свёрнутый текст могут не заметить. Для одного мероприятия подойдёт короткая самостоятельная страница. Если же программа масштабная, с длинными аннотациями и множеством параллельных направлений, лучше создать связанные страницы с подробной информацией, а не бесконечно вкладывать раскрывающиеся блоки друг в друга.

• Используйте Hero или Section Heading, чтобы обозначить цель и сориентировать читателя.
• Используйте таблицу, чтобы участники могли быстро сравнить время.
• Используйте список на основе таксономии, если для поиска мероприятий или сессий нужна фильтрация.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Выберите подходящую структуру карточек

Один выделенный материал — не то же самое, что коллекция

Компонент 50/50 Card объединяет изображение или текстовую область с пояснительным текстом. Среди документированных полей — изображение, подпись, необязательный надзаголовок, заголовок, описание и ссылки-призывы к действию. Используйте его для одной заметной истории или мероприятия; Vertical Cards лучше подходят для нескольких равнозначных материалов, а Button-Style Cards — для быстрых действий.

Компоненту 50/50 Card нужно достаточно пространства. В рекомендациях не советуют размещать его в узкой области боковой навигации и просят выбирать осмысленные изображения, а не декоративные стоковые фотографии. В примере используется вариант с разделением без изображения, показанный в официальных материалах: с одной стороны — краткая тема, с другой — описание и ссылка на программу. Это позволяет не создавать впечатление, будто вымышленная фотография кампуса изображает настоящее место Harvard.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Размеры изображений и альтернативный текст

Подготавливайте изображения для конкретного компонента

В официальном руководстве по изображениям предлагается готовить файлы примерно следующей ширины: 1920px для изображений Hero, 800px для компонента 50/50 Card, 600px для Vertical Cards и 400px для миниатюр в списках. Это ориентировочные размеры подготовки, а не фиксированная ширина отображения CSS. В руководстве рекомендуется, чтобы размер большинства файлов не превышал 200KB: для фотографий используйте JPG, для изображений с прозрачностью или линейной графикой — PNG, для простой графики — SVG.

Для информативных изображений указывайте содержательный альтернативный текст; если важны видимый контекст или авторство, добавляйте подписи. Для карты места проведения нужны текстовое описание маршрута или равноценное пояснение местоположения. При кадрировании могут исчезнуть лицо, объект или подпись, на которые ссылается текст. После загрузки проверьте страницу в узком макете, а не полагайтесь на то, что широкий вариант для настольных устройств подойдёт для всех экранов.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Поведение аккордеона и элементы управления

Дополнительная информация с понятным названием

В документации HarvardSites описаны аккордеоны, которые закрываются автоматически, и вариант, который остаётся открытым, с элементами управления для раскрытия или закрытия всех разделов. В примере выбран независимый режим, при котором разделы остаются открытыми: так посетитель может одновременно читать заметки о поездке и подготовке. Заголовки разделов указывают, что скрыто внутри, поэтому читателю не нужно открывать каждую панель, чтобы понять её содержание.

В приведённом коде используются нативные элементы details и summary для независимой реализации. Это не описание разметки, которую генерирует HarvardSites. Кнопки раскрытия и закрытия всех разделов обновляют свойство details.open каждого элемента; браузер сохраняет нативную активацию каждого summary с клавиатуры. Вложенный аккордеон не нужен, а обязательная информация размещается за пределами этой группы.

<!-- 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 Практический порядок работы редактора

Настройте один раз, собирайте единообразно

В авторизованном проекте HarvardSites выберите утверждённый стиль сайта, сочетание шрифтов и цветовые роли до создания страницы мероприятия. Используйте существующие компоненты платформы, а не вставляйте в редактор независимый демонстрационный пример HTML в расчёте на выполнение его пользовательского скрипта. Точный набор элементов управления зависит от конфигурации сайта; в этом руководстве перечислены документированные варианты без выдуманных экранов настроек.

В демонстрационном примере переключатель стиля меняет только оформление. Раскройте обе панели с информацией для участников, смените стиль и убедитесь, что панели остались открытыми. Затем закройте их все и откройте одну с клавиатуры. Это полезная проверка непрерывности взаимодействия: визуальное оформление не должно лишать читателя его места или менять модель содержимого.

1. Подготовьте проверенные сведения о названии мероприятия, дате, месте проведения, программе, доступности и ответственном за обновления.
2. Соберите введение, краткую таблицу программы и аккордеон со второстепенной информацией на основе документированных компонентов.
3. Проверьте отображение на узком экране и работу с клавиатуры; убедитесь, что ссылки на регистрацию ведут на фактическую утверждённую страницу.

Прочитать вспомогательную спецификацию

Дизайн-система HarvardSites Примеры компонентов дизайн-системы

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