# Sistema de design HarvardSites ## Pré-visualização da interface de sistema de design HarvardSites Compare estilos de apresentação sem alterar o conteúdo do evento; abra as informações dos participantes individualmente ou todas de uma vez. ## Referência de design de sistema de design HarvardSites Padrões editoriais e orientações oficiais sobre componentes do HarvardSites. As referências públicas definem estilos configuráveis e requisitos, não um pacote público universal de tokens de CSS. A pré-visualização usa valores numéricos originais e explícitos para layout e cores, além de fontes alternativas do sistema. ### Requisitos tipográficos | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Number of typefaces | At most 2 | Use pelo menos uma fonte sem serifa; a orientação visual deve usar fonte sem serifa. | | Minimum text size | 1rem | Não reduza legendas nem rótulos de controles abaixo do padrão do navegador. | | Required x-height reference | 8.3px ±5% at a 16px font size | Critério oficial para seleção de temas; não constitui uma declaração automática de conformidade das fontes alternativas. | | Text and heading alignment | Left or right according to language | Não centralize nem justifique blocos de texto. | | Special effects | No outline, drop shadow, tracking or horizontal scaling | Preserve a forma das letras; use itálico com moderação. | ### Combinações de fontes disponíveis | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Academic pairing | Baskerville + Source Sans Pro | Combinação de fonte para títulos e corpo do texto. | | Content-heavy pairing | Merriweather + Roboto | Independente da seleção de estilo do site. | | Single-family pairing | Inter + Inter | Não altera a estrutura dos componentes. | ### Opções de estilo do site | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Light & Elegant | Soft corners; slightly lifted imagery | Apresentação aberta, geralmente sem contornos. | | Bold & Compelling | Straight corners; borders and dividers | Permite chamadas curtas além do Hero. | | Friendly & Approachable | Rounded cards; pill buttons | Apresentação agrupada com aparência mais suave. | | What style does not change | Typography, color roles, keyboard behavior | Esses aspectos continuam sendo configurados de forma independente ou tratados pelos componentes. | ### Orientações para preparar imagens | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Hero export width | Approximately 1920px | Prepare as imagens próximas à largura máxima de exibição e, depois, teste o recorte. | | 50/50 Card export width | Approximately 800px | Imagens contextuais para um item em destaque. | | Vertical Card export width | Approximately 600px | Cartões de itens com a mesma prioridade. | | List thumbnail export width | Approximately 400px | Listagens orientadas a resumos. | | Most image file sizes | Under 200KB | Recomendação prática, não um limite máximo garantido da plataforma. | | Formats | JPG photographs; PNG transparency/line art; SVG simple graphics | Escolha de acordo com o conteúdo de origem. | ### Valores originais do exemplo — não são tokens oficiais | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | Body / headings | Arial / Georgia | Fontes alternativas locais; não correspondem a uma das combinações de fontes fornecidas pela plataforma. | | Text / accent / surface | #242424 / #653f3a / #f4f1ec | Paleta neutra original; não usa nomes de tokens de cores do Harvard. | | Outer width / mobile inset | 70rem / 1.25rem | Escolhas da aplicação. | | Spacing / layout switch | 1 / 1.5 / 2rem; 48rem breakpoint | Valores de exemplo da implementação, não uma escala publicada do sistema. | ## Guia completo de sistema de design HarvardSites Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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. ```
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.

``` 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 ### Informações para participantes em painéis que permanecem abertos HTML Semântico e independente, seguindo o comportamento documentado do acordeão, com controles para abrir e fechar todos os painéis. ```
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.

``` Referência de código - Esta não é uma marcação gerada pelo HarvardSites nem um SDK oficial. - As informações essenciais sobre acesso devem permanecer visíveis fora dos painéis recolhidos. ### Exemplo completo independente O documento completo inclui layout, controles e inicialização. Extraia o arquivo de exemplo indicado para obter os recursos do fornecedor no caminho relativo exato e, em seguida, disponibilize-o por 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.

``` Referência de código - Baixe o exemplo completo em Fontes. O README informa o comando exato para iniciá-lo localmente. - Mantenha os caminhos do fornecedor relativos a este documento; o arquivo inclui todos os recursos usados nesta prévia. ## Sistema de design HarvardSites Configuração do agente de IA ### Ponto de partida para implementação Um caminho concreto de configuração e composição para editores autorizados do HarvardSites. Nenhum pacote público API nem escala de tokens não verificada é inventado. O ZIP completo do exemplo funcional, disponível em Sources, também inclui as dependências exatas para a pré-visualização e o documento completo. Extraia os arquivos, execute python3 -m http.server 8080 nesse diretório e abra http://localhost:8080/harvard-sites.html. Não abra exemplos baseados em módulos usando 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. ``` ### Um prompt para seu projeto ``` Monte uma página autorizada de evento de pesquisa no HarvardSites usando um título de seção ou Hero, uma tabela de programação compacta com duas colunas e um acordeão para participantes cujos painéis permanecem abertos. Escolha o estilo do site, a combinação de fontes aprovada e as funções das cores separadamente. Mantenha visíveis as informações essenciais sobre acesso e horários. Use texto com tamanho mínimo de 1rem, no máximo duas fontes, controles sem serifa e texto em inglês alinhado à esquerda. Não invente um pacote npm do HarvardSites, uma escala pública de tokens nem uma interface de editor. Se implementar um protótipo independente, identifique os valores de CSS como originais e não afirme que correspondem à saída oficial do CMS. ``` ## Sistema de design HarvardSites Fontes e escopo Referência editorial para o HarvardSites e um protótipo independente de evento fictício. As marcas institucionais oficiais, o acesso à plataforma e a configuração de produção continuam sob a responsabilidade de Harvard. Não se afirma que haja possibilidade de reserva, afiliação ou compatibilidade com SDK. - Padrões de design gráfico Limites para fontes, tamanho mínimo do texto, alinhamento e orientação. - Combinações de fontes Três combinações documentadas de fonte para títulos e corpo do texto. - Estilos de site Opções de apresentação independentes da tipografia e das cores. - Página única do evento Opções de componentes para agenda, sessões e informações para participantes. - Acordeão Estrutura de conteúdo secundário e comportamento independente para abrir e fechar painéis. - Preparação de imagens Orientações aproximadas para exportação e formatos. - Baixar o exemplo completo funcional ZIP com HTML completo, dependências locais CSS/JavaScript, licenças incluídas e instruções exatas de inicialização. Não é necessário executar uma etapa de compilação. ## Sistema de design HarvardSites Recursos relacionados ### Helsinki Combine grupos de seleção nativos do HDS, cores semânticas de feedback e resumos de erros vinculados em um fluxo completo de revisão e correção local. ### Rivet Crie páginas universitárias com a escala real de tokens de Rivet, a anatomia de componentes de HTML e as interações nativas pelo teclado. Explore uma página compacta de detalhes de oficina com abas acessíveis sobre informações de visita. ### Digital Agency sistema de design Crie interfaces japonesas legíveis para serviços públicos com funções de texto do DADS, tokens semânticos e a anatomia nativa dos componentes de HTML. Experimente uma consulta funcional de recibos com erros de formato, resultado sem correspondências e um registro de status que pode ser revisado. - [Referência de implementação](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Fonte](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Fonte](https://designsystem.harvardsites.harvard.edu/typography-options) - [Fonte](https://designsystem.harvardsites.harvard.edu/site-styles) - [Fonte](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/site-styles) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/color-roles) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/5050-card) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Referência de código](https://designsystem.harvardsites.harvard.edu/accordion) - [Consulte a especificação de apoio](https://designsystem.harvardsites.harvard.edu/accordion) - [Referência de código](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Padrões de design gráfico Limites para fontes, tamanho mínimo do texto, alinhamento e orientação.](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Combinações de fontes Três combinações documentadas de fonte para títulos e corpo do texto.](https://designsystem.harvardsites.harvard.edu/typography-options) - [Estilos de site Opções de apresentação independentes da tipografia e das cores.](https://designsystem.harvardsites.harvard.edu/site-styles) - [Página única do evento Opções de componentes para agenda, sessões e informações para participantes.](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Acordeão Estrutura de conteúdo secundário e comportamento independente para abrir e fechar painéis.](https://designsystem.harvardsites.harvard.edu/accordion) - [Preparação de imagens Orientações aproximadas para exportação e formatos.](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)