# Sistema de diseño HarvardSites ## Vista previa de la interfaz de sistema de diseño HarvardSites Compara los estilos de presentación sin cambiar el contenido del evento; consulta la información de asistentes de forma individual o toda a la vez. ## Referencia de diseño de sistema de diseño HarvardSites Estándares editoriales y directrices de componentes oficiales de HarvardSites. Las referencias públicas definen estilos configurables y requisitos, no un paquete universal público de tokens de CSS. La vista previa utiliza valores numéricos de diseño y color expresamente originales, además de fuentes del sistema como alternativa. ### Requisitos tipográficos | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Number of typefaces | At most 2 | Usa al menos una fuente sans serif; la orientación se presenta en sans serif. | | Minimum text size | 1rem | No reduzcas los pies de foto ni las etiquetas de controles por debajo del tamaño predeterminado del navegador. | | Required x-height reference | 8.3px ±5% at a 16px font size | Criterio oficial para elegir un tema; no es una declaración automática de conformidad para las fuentes alternativas. | | Text and heading alignment | Left or right according to language | No centres ni justifiques los bloques de texto. | | Special effects | No outline, drop shadow, tracking or horizontal scaling | Respeta la forma de la tipografía y usa las cursivas con moderación. | ### Combinaciones tipográficas disponibles | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Academic pairing | Baskerville + Source Sans Pro | Combinación de títulos y texto principal. | | Content-heavy pairing | Merriweather + Roboto | Independiente de la selección del estilo del sitio. | | Single-family pairing | Inter + Inter | No modifica la estructura de los componentes. | ### Opciones de estilo del sitio | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Light & Elegant | Soft corners; slightly lifted imagery | Presentación abierta, generalmente sin contornos. | | Bold & Compelling | Straight corners; borders and dividers | Permite usar antetítulos fuera del componente Hero. | | Friendly & Approachable | Rounded cards; pill buttons | Presentación agrupada más suave. | | What style does not change | Typography, color roles, keyboard behavior | Estos elementos siguen configurándose por separado o se gestionan mediante componentes. | ### Directrices para preparar imágenes | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Hero export width | Approximately 1920px | Prepara las imágenes con un ancho cercano al máximo de visualización y, después, comprueba el recorte. | | 50/50 Card export width | Approximately 800px | Imágenes contextuales para un elemento destacado. | | Vertical Card export width | Approximately 600px | Tarjetas de elementos con la misma prioridad. | | List thumbnail export width | Approximately 400px | Listados orientados a resúmenes. | | Most image file sizes | Under 200KB | Una recomendación práctica, no un límite máximo garantizado de la plataforma. | | Formats | JPG photographs; PNG transparency/line art; SVG simple graphics | Elige según el contenido de origen. | ### Valores de ejemplo originales — no son tokens oficiales | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Body / headings | Arial / Georgia | Fuentes alternativas locales; no forman parte de las combinaciones tipográficas proporcionadas por la plataforma. | | Text / accent / surface | #242424 / #653f3a / #f4f1ec | Paleta neutra original; no corresponde a nombres de tokens de color de Harvard. | | Outer width / mobile inset | 70rem / 1.25rem | Opciones de la aplicación. | | Spacing / layout switch | 1 / 1.5 / 2rem; 48rem breakpoint | Valores de implementación de ejemplo, no una escala publicada del sistema. | ## Guía completa de sistema de diseño HarvardSites Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## Una plataforma para editores de sistema de diseño HarvardSites ### Empieza con una configuración real de HarvardSites > El sitio público del sistema de diseño describe componentes editoriales reutilizables y las opciones disponibles en los sitios web de la Universidad. No demuestra que exista un paquete llamado harvard-design-system ni un React API que se pueda importar. Un editor autorizado del sitio combina los componentes de la plataforma; un desarrollador independiente puede estudiar los patrones de contenido documentados sin fingir que utiliza el mismo CMS. La decisión inicial más útil es el tipo de página: una página de una sola página para una conferencia necesita una presentación general, un programa, opciones para explorar las sesiones e información práctica para los asistentes. La receta de configuración proporcionada relaciona cada necesidad con un componente real de HarvardSites. El HTML independiente muestra esa composición por separado, con contenido ficticio y sin marcas institucionales. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Tipografía y legibilidad ### Separa la combinación tipográfica del estilo La plataforma ofrece tres combinaciones de tipografías para títulos y texto: Baskerville con Source Sans Pro, Merriweather con Roboto e Inter con Inter. Estas opciones son independientes del estilo del sitio. Cambiar una página de una composición enmarcada a una redondeada no implica cambiar sus tipografías. Las normas de diseño gráfico limitan el diseño a dos familias tipográficas, exigen al menos una sans serif y establecen un tamaño mínimo de texto de 1rem. Los menús, controles, etiquetas y otros elementos de navegación utilizan sans serif. El criterio publicado para la altura de x es 8.3px ±5% cuando se ajusta a 16px; es más específico que una simple recomendación de usar una fuente legible. La muestra utiliza Arial y Georgia como alternativas visibles, sin afirmar que sean una combinación tipográfica disponible en la plataforma ni que se hayan evaluado formalmente según ese criterio. Consulta la especificación complementaria ### La alineación forma parte de la norma Los bloques de texto y los títulos siguen la dirección de lectura, en lugar de estar centrados o justificados. El texto que no es un enlace no lleva subrayado. Procura que los títulos sean claros y utiliza el peso tipográfico para enfatizar; no crees efectos de exhibición estirando las letras, añadiendo contornos o aplicando un espaciado amplio entre caracteres. Por eso, la vista previa mantiene todas las etiquetas en 1rem o más y alinea a la izquierda la introducción del evento. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Tres opciones de estilo independientes ### El marco visual, el color y la tipografía son ajustes distintos Ligero y elegante presenta secciones abiertas, esquinas ligeramente redondeadas e imágenes sutilmente desplazadas. Audaz y convincente enfatiza los bordes rectos, los contornos y los separadores. Amable y cercano utiliza agrupaciones redondeadas y botones en forma de píldora. Estas opciones modifican el marco visual del mismo contenido y estructura de componentes. La muestra ofrece un selector de estilo de diseño para explorar las diferencias sin cambiar el texto, el estado del acordeón ni el comportamiento del foco. Representa las ideas visuales documentadas con CSS originales; no reproduce las hojas de estilo del CMS. En particular, los grosores de los bordes y los radios de las esquinas son decisiones de implementación, no tokens extraídos de HarvardSites. Consulta la especificación complementaria ### Asigna colores según su función HarvardSites describe funciones para el texto, los fondos, los botones y los acentos, con correspondencias para temas claros y oscuros. La paleta puede variar sin que cambien estas relaciones. La referencia pública no establece un único conjunto obligatorio de colores hexadecimales para todos los sitios. Por eso, la vista previa identifica su tinta neutra, acento marrón y fondo cálido como valores originales, en lugar de presentarlos como tokens de marca de Harvard. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Compón la página del evento ### Mantén visible el programa principal Utiliza Hero o Section Heading para presentar el evento y, a continuación, una tabla en línea para el programa. La guía oficial para páginas de una sola página recomienda celdas concisas, un formato horario uniforme y pocas columnas para facilitar la lectura en móviles. La muestra utiliza las columnas Hora y Sesión; la información sobre el lugar y el acceso aparece antes o después de la tabla, en vez de formar un programa comprimido de cinco columnas. Un acordeón sirve para incluir preguntas prácticas adicionales. La información esencial sobre requisitos, acceso al lugar, cancelaciones o plazos debe permanecer visible, ya que el texto contraído puede pasar desapercibido. Un evento puede presentarse en una página breve y autónoma; un programa extenso, con resúmenes largos y muchas sesiones simultáneas, necesita páginas de detalle enlazadas, en lugar de secciones desplegables anidadas sin fin. - Utiliza Hero o Section Heading para indicar el propósito y orientar al usuario. - Utiliza una tabla para que los asistentes puedan comparar horarios de un vistazo. - Utiliza un List basado en una taxonomía cuando sea necesario filtrar eventos o sesiones. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Elige la estructura de tarjeta adecuada ### Una pieza destacada no es lo mismo que una colección 50/50 Card combina una imagen o una región de texto con contenido explicativo. Sus campos documentados incluyen una imagen, un pie de foto, un antetítulo opcional, un título, una descripción y enlaces de llamada a la acción. Resérvala para una historia o evento destacado; Vertical Cards representan mejor varios elementos de igual importancia, y Button-Style Cards sirven para acciones rápidas. 50/50 Card necesita espacio para funcionar. Las pautas desaconsejan comprimirla en una zona estrecha de navegación lateral y recomiendan imágenes que aporten significado, no imágenes de archivo meramente decorativas. La muestra utiliza una composición dividida solo con texto, una variante que aparece en los ejemplos oficiales: un tema breve a un lado y una descripción con un enlace al programa al otro. Así se evita sugerir que una fotografía inventada del campus representa un entorno auténtico de Harvard. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Tamaños de imagen y alternativas ### Prepara los recursos para el componente La guía oficial de imágenes sugiere exportaciones de unos 1920px para las imágenes Hero, 800px para 50/50 Card, 600px para Vertical Cards y 400px para las miniaturas de listas. Son medidas aproximadas para preparar los recursos, no anchos renderizados fijos de CSS. Recomienda que la mayoría de los archivos pese menos de 200KB, usar JPG para fotografías, PNG cuando se necesite transparencia o arte lineal, y SVG para gráficos sencillos. Añade texto alternativo descriptivo a las imágenes informativas y usa pies de foto cuando el contexto visible o los créditos deban acompañar a la imagen. Un mapa del recinto también necesita una ruta en texto o una explicación equivalente de la ubicación. Al cambiar el encuadre, puede desaparecer una cara, un objeto o una etiqueta a los que alude el texto; después de subir la imagen, revisa cómo se ve en una pantalla estrecha en lugar de dar por sentado que un recorte para escritorio ancho sirve para todos los dispositivos. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Comportamiento y controles del acordeón ### Información secundaria con títulos claros HarvardSites documenta tanto los acordeones que se cierran automáticamente como una variante que permite mantener varias secciones abiertas e incluye controles para mostrar u ocultar todas. El ejemplo opta deliberadamente por el comportamiento independiente que permite mantener abiertas varias secciones, para que los asistentes puedan consultar a la vez las indicaciones de viaje y de preparación. Los títulos describen el contenido oculto con claridad, sin que el lector tenga que abrir cada panel para saber qué contiene. Este ejemplo usa los elementos nativos details y summary para una implementación independiente. No pretende describir el marcado que genera HarvardSites. Los botones para mostrar y ocultar todas las secciones actualizan la propiedad details.open de cada elemento; el navegador mantiene la activación nativa mediante el teclado para cada summary. No hace falta anidar acordeones, y la información imprescindible queda fuera de este 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.

``` Referencia de código Consulta la especificación complementaria ## Sistema de diseño HarvardSites Un flujo de trabajo concreto para editores ### Configura una vez y compón de forma coherente En un proyecto autorizado de HarvardSites, selecciona el estilo de sitio, la combinación tipográfica y las funciones de color aprobados antes de crear la página del evento. Usa los componentes existentes de la plataforma en lugar de pegar la demostración independiente HTML en un editor y esperar que se ejecute su script personalizado. Los controles exactos del editor dependen de la configuración del sitio; esta guía menciona opciones documentadas sin inventar una pantalla de ajustes. El selector de estilo de la demostración solo cambia el marco visual. Después de abrir los dos paneles para asistentes, cambia de estilo y comprueba que sigan abiertos. Luego ciérralos todos y vuelve a abrir uno con el teclado. Es una comprobación útil de continuidad: la presentación visual no debería borrar el lugar que ocupa el lector ni cambiar el modelo de contenido. 1. Prepara el título, la fecha, el lugar, el programa y la información de acceso del evento, todos verificados, e identifica a la persona responsable de las actualizaciones. 2. Crea la introducción, una tabla breve del programa y un acordeón secundario con componentes documentados. 3. Previsualiza la página en pantallas estrechas y comprueba el uso con teclado; confirma que los enlaces de inscripción lleven al destino aprobado real. Consulta la especificación complementaria ## Sistema de diseño HarvardSites Ejemplos de componentes del sistema de diseño de HarvardSites ### Información para asistentes con varias secciones abiertas HTML semántico e independiente para el comportamiento documentado del acordeón, con controles para mostrar y ocultar todas las secciones. ```
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.

``` Referencia de código - No es marcado generado por HarvardSites ni un SDK oficial. - La información de acceso imprescindible debe permanecer visible fuera de los paneles contraídos. ### Ejemplo independiente completo El documento completo incluye su estructura, controles e inicialización. Extrae el archivo de ejemplo enlazado para obtener los recursos del proveedor con sus rutas relativas exactas y luego sírvelo mediante 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.

``` Referencia de código - Descarga el ejemplo completo desde Fuentes. El README contiene el comando exacto para ejecutarlo en local. - Mantén las rutas de los recursos del proveedor relativas a este documento; el archivo incluye todos los recursos que utiliza esta vista previa. ## Sistema de diseño HarvardSites Configuración del agente de IA ### Punto de partida para la implementación Una ruta concreta de configuración y composición para editores autorizados de HarvardSites. No se inventan paquetes públicos API ni escalas de tokens sin verificar. El ZIP del ejemplo funcional completo que aparece en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Descomprímelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/harvard-sites.html. No abras ejemplos basados en módulos mediante 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. ``` ### Una instrucción para tu proyecto ``` Crea una página para un evento de investigación en HarvardSites con autorización, usando un encabezado de sección o un hero, una tabla de horarios compacta de dos columnas y un acordeón para asistentes que permita mantener abiertas varias secciones. Elige por separado el estilo del sitio, la combinación tipográfica aprobada y las funciones de color. Mantén visible la información esencial sobre el acceso y los horarios. Usa texto de al menos 1rem, no más de dos familias tipográficas, controles sans serif y texto en inglés alineado a la izquierda. No inventes un paquete npm de HarvardSites, una escala pública de tokens ni una interfaz de editor. Si implementas un prototipo independiente, identifica sus valores CSS como originales y no afirmes que son el resultado oficial del CMS. ``` ## Sistema de diseño HarvardSites Fuentes y alcance Referencia editorial para HarvardSites y un prototipo independiente de un evento ficticio. Harvard sigue rigiendo el uso de las marcas institucionales oficiales, el acceso a la plataforma y la configuración de producción. No se afirma que exista una reserva, afiliación ni compatibilidad con un SDK. - Normas de diseño gráfico Límites tipográficos, tamaño mínimo de texto, alineación y orientación. - Combinaciones tipográficas Tres combinaciones documentadas de títulos y texto. - Estilos de sitio Opciones de marco visual independientes de la tipografía y el color. - Página de evento de una sola página Opciones de componentes para el programa, las sesiones y la información para asistentes. - Acordeón Estructura del contenido secundario y comportamiento independiente para abrir y cerrar secciones. - Preparación de imágenes Tamaños de exportación aproximados y recomendaciones de formato. - Descargar el ejemplo funcional completo Archivo ZIP con HTML completo, dependencias locales CSS/JavaScript, licencias incluidas e instrucciones exactas para ejecutarlo. No se requiere un paso de compilación. ## Sistema de diseño HarvardSites Recursos relacionados ### Helsinki Combina grupos de selección nativos de HDS, colores semánticos para mensajes y resúmenes de errores vinculados en un flujo completo de revisión y corrección local. ### Rivet Crea páginas universitarias con la escala real de tokens de Rivet, la anatomía de componentes de HTML y las interacciones de teclado nativas. Explora una página compacta de detalles de un taller con pestañas accesibles para la información de la visita. ### Digital Agency sistema de diseño Crea interfaces japonesas accesibles para servicios públicos con los roles tipográficos de DADS, tokens semánticos y la anatomía nativa de componentes de HTML. Prueba una consulta de recibo funcional con errores de formato, un resultado sin coincidencias y un registro de estado que se puede revisar. - [Referencia de implementación](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Fuente](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Fuente](https://designsystem.harvardsites.harvard.edu/typography-options) - [Fuente](https://designsystem.harvardsites.harvard.edu/site-styles) - [Fuente](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/site-styles) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/color-roles) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/5050-card) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format) - [Referencia de código](https://designsystem.harvardsites.harvard.edu/accordion) - [Consulta la especificación complementaria](https://designsystem.harvardsites.harvard.edu/accordion) - [Referencia de código](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Normas de diseño gráfico Límites tipográficos, tamaño mínimo de texto, alineación y orientación.](https://designsystem.harvardsites.harvard.edu/graphic-design) - [Combinaciones tipográficas Tres combinaciones documentadas de títulos y texto.](https://designsystem.harvardsites.harvard.edu/typography-options) - [Estilos de sitio Opciones de marco visual independientes de la tipografía y el color.](https://designsystem.harvardsites.harvard.edu/site-styles) - [Página de evento de una sola página Opciones de componentes para el programa, las sesiones y la información para asistentes.](https://designsystem.harvardsites.harvard.edu/building-event-one-pager-summits-conferences-and-symposiums) - [Acordeón Estructura del contenido secundario y comportamiento independiente para abrir y cerrar secciones.](https://designsystem.harvardsites.harvard.edu/accordion) - [Preparación de imágenes Tamaños de exportación aproximados y recomendaciones de formato.](https://designsystem.harvardsites.harvard.edu/choose-right-image-size-and-format)