Sistema de design HarvardSites.

Sistema de design HarvardSites Uma plataforma para editores

Comece com uma configuração real do HarvardSites

O site público do sistema de design descreve componentes editoriais reutilizáveis e as opções disponíveis nos sites da Universidade. Isso não comprova a existência de um pacote chamado harvard-design-system nem de um React API importável. Um editor autorizado do site monta os componentes da plataforma; um desenvolvedor independente pode estudar os padrões de conteúdo documentados sem fingir que usa o mesmo CMS.

A primeira decisão importante é definir o tipo de página: uma página única para uma conferência precisa de uma visão geral, uma programação, formas de encontrar sessões e informações complementares para participantes. A receita de configuração fornecida associa cada necessidade a um componente real do HarvardSites. O HTML independente demonstra essa composição de forma autônoma, com conteúdo fictício e sem marcas de identidade institucional.

Consulte a especificação de apoio

Tipografia e legibilidade de sistema de design HarvardSites

Separe a combinação de fontes do estilo

A plataforma oferece três combinações de títulos e corpo de texto: Baskerville com Source Sans Pro, Merriweather com Roboto e Inter com Inter. Essas opções são independentes do estilo do site. Alterar o layout de uma página de emoldurado para arredondado não significa trocar as fontes.

Os padrões de design gráfico limitam a composição a duas famílias tipográficas, exigem pelo menos uma fonte sem serifa e estabelecem o tamanho mínimo do texto em 1rem. Menus, controles, rótulos e outros elementos de orientação usam fontes sem serifa. O critério publicado para a altura-x é de 8.3px ±5% quando definida em 16px; é mais específico do que simplesmente recomendar uma fonte legível. O exemplo usa Arial e Georgia como fontes substitutas visíveis, sem afirmar que fazem parte de uma combinação de fontes fornecida pela plataforma ou que foram formalmente avaliadas segundo esse critério.

Consulte a especificação de apoio

O alinhamento faz parte do padrão

Os blocos de texto e os títulos acompanham a direção da leitura, em vez de usar alinhamento centralizado ou justificado. Textos que não sejam links não devem ser sublinhados. Mantenha os títulos claros e use o peso da fonte para dar ênfase; não crie um tratamento de destaque esticando letras, adicionando contornos ou aumentando muito o espaçamento entre elas. Por isso, a prévia mantém todos os rótulos em 1rem ou mais e alinha à esquerda a apresentação do evento.

Consulte a especificação de apoio

Três escolhas de estilo independentes em sistema de design HarvardSites

Moldura, cor e tipografia são configurações diferentes

Light & Elegant apresenta seções abertas, cantos levemente arredondados e imagens sutilmente deslocadas. Bold & Compelling destaca linhas retas, contornos e separadores. Friendly & Approachable usa agrupamentos arredondados e botões em formato de pílula. Essas opções alteram a apresentação visual do mesmo conteúdo e da mesma estrutura de componentes.

O exemplo oferece um seletor de estilo de layout para explorar as diferenças sem alterar o texto, o estado do acordeão ou o comportamento do foco. Ele reproduz de forma aproximada as ideias visuais documentadas usando CSS original; não reproduz as folhas de estilo do CMS. Em particular, as espessuras das bordas e os raios dos cantos são escolhas da aplicação, não tokens extraídos do HarvardSites.

Consulte a especificação de apoio

Atribua cores conforme sua função

O HarvardSites descreve funções para texto, planos de fundo, botões e cores de destaque, com correspondências para os modos claro e escuro. A paleta pode variar, desde que essas relações permaneçam consistentes. A referência pública não estabelece um conjunto obrigatório de cores hexadecimais para todos os sites. Por isso, a prévia identifica a tinta neutra, o destaque marrom e o fundo quente como valores originais, em vez de apresentá-los como tokens da marca Harvard.

Consulte a especificação de apoio

Monte a página única do evento com sistema de design HarvardSites

Mantenha a programação principal visível

Use um Hero ou Section Heading para apresentar o evento e, em seguida, uma tabela integrada para a programação. O guia oficial para páginas únicas recomenda células concisas, um formato de horário consistente e poucas colunas para facilitar a leitura em dispositivos móveis. O exemplo usa as colunas Horário e Sessão; informações sobre o local e o acesso ficam acima ou abaixo da tabela, em vez de compor uma programação apertada com cinco colunas.

Um acordeão é adequado para perguntas práticas adicionais. Informações essenciais sobre requisitos de participação, acesso ao local, cancelamentos ou prazos devem permanecer visíveis, pois o texto recolhido pode passar despercebido. Um evento único pode ter uma página breve e autossuficiente; um programa maior, com resumos extensos e muitas sessões paralelas, precisa de páginas de detalhes vinculadas, em vez de divulgações aninhadas sem fim.

• Use Hero ou Section Heading para indicar o propósito e orientar os participantes.
• Use uma tabela para que os participantes comparem rapidamente os horários.
• Use uma List baseada em taxonomia quando a descoberta de eventos ou sessões exigir filtros.

Consulte a especificação de apoio

Escolha a estrutura de card adequada em sistema de design HarvardSites

Um destaque é diferente de uma coleção

Um 50/50 Card combina uma imagem ou região de texto com conteúdo explicativo. Entre os campos documentados estão imagem, legenda, chamada de destaque opcional, título, descrição e links de chamada para ação. Reserve-o para uma história ou evento em destaque; Vertical Cards representam melhor vários itens de igual importância, enquanto Button-Style Cards atendem a ações rápidas.

Um 50/50 Card precisa de espaço para funcionar bem. As orientações desaconselham colocá-lo em uma área estreita de navegação lateral e recomendam imagens que transmitam significado, não meras decorações de banco de imagens. O exemplo usa uma composição dividida somente com texto, uma variante mostrada nos exemplos oficiais: um tema breve de um lado e, do outro, uma descrição e um link para a programação. Assim, evita sugerir que uma foto de campus inventada retrata um ambiente autêntico de Harvard.

Consulte a especificação de apoio

Tamanhos e alternativas de imagem do sistema de design HarvardSites

Prepare os recursos para o componente

O guia oficial de imagens sugere exportações próximas de 1920 px para imagens Hero, 800 px para um Card 50/50, 600 px para cartões verticais e 400 px para miniaturas de lista. Esses valores são referências aproximadas para a preparação, não larguras fixas de renderização de CSS. O guia recomenda que a maioria dos arquivos tenha menos de 200 KB, JPG para fotos, PNG quando houver necessidade de transparência ou arte em linha e SVG para gráficos simples.

Adicione texto alternativo significativo às imagens informativas e use legendas quando o contexto visível ou os créditos fizerem parte da imagem. Um mapa do local precisa de uma rota em texto ou de uma explicação equivalente da localização, além da versão visual. Alterar o recorte pode remover um rosto, objeto ou rótulo mencionado no texto; depois de enviar a imagem, confira o layout estreito de fato, em vez de presumir que um recorte amplo para desktop funcione em todos os dispositivos.

Consulte a especificação de apoio

Sistema de design HarvardSites Comportamento e controles do acordeão

Informações secundárias com nomes claros

A documentação do HarvardSites descreve tanto acordeões que fecham automaticamente quanto uma variante que mantém os painéis abertos, com controles para revelar ou fechar todas as seções. O exemplo escolhe deliberadamente o comportamento independente com painéis abertos, para que os participantes possam ler juntos os avisos sobre viagem e preparação. Os títulos de cada seção descrevem o conteúdo oculto, sem exigir que a pessoa abra cada painel para saber o que há nele.

O código aqui usa os elementos nativos details e summary para uma implementação independente. Isso não é uma afirmação sobre a marcação gerada pelo HarvardSites. Os botões de abrir e fechar tudo atualizam a propriedade details.open de cada elemento; o navegador mantém a ativação nativa de cada summary pelo teclado. Não é necessário usar acordeões aninhados, e as informações essenciais permanecem fora deste grupo.

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

Referência de código

Consulte a especificação de apoio

Sistema de design HarvardSites Um fluxo de trabalho concreto no editor

Configure uma vez, monte com consistência

Em um projeto autorizado do HarvardSites, selecione o estilo de site aprovado, a combinação de fontes e as funções das cores antes de montar a página do evento. Use os componentes existentes na plataforma, em vez de colar a demonstração independente HTML no editor e esperar que o script personalizado seja executado. Os controles exatos do editor dependem do site provisionado; esta receita indica opções documentadas sem inventar uma tela de configurações.

O seletor de estilo da demonstração altera apenas a apresentação. Depois de abrir os dois painéis para participantes, troque os estilos e confirme que os painéis continuam abertos. Em seguida, feche todos e use o teclado para abrir um deles novamente. Essa é uma verificação útil de continuidade: a apresentação visual não deve apagar o ponto em que a pessoa parou nem alterar o modelo de conteúdo.

1. Prepare o título, a data, o local, a agenda e as informações de acesso do evento já verificados, além de identificar a pessoa responsável pelas atualizações.
2. Monte a introdução, uma tabela de agenda resumida e um acordeão secundário com componentes documentados.
3. Confira os layouts estreitos e o uso do teclado; confirme que os links de inscrição levam ao destino aprovado correto.

Consulte a especificação de apoio

Sistema de design HarvardSites Exemplos de componentes de sistema de design

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

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