# Sistema de diseño de Rivet
## Vista previa de la interfaz del sistema de diseño de Rivet
Cambia entre paneles breves con información de la visita usando el puntero o el teclado; los datos esenciales del evento permanecen visibles.
## Referencia de diseño del sistema de diseño de Rivet
Rivet 2.9.1 publicado CSS y documentación oficial de tokens/utilidades. Las conversiones a rem presuponen una raíz de 16px; el ejemplo local sustituye las fuentes por Arial/Georgia y elige un ancho exterior propio de 64rem.
### Tipografía
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --rvt-font-sans | BentonSans, system sans-serif fallbacks | Tipografía institucional; la vista previa usa Arial explícitamente. |
| --rvt-font-serif | GeorgiaPro, Georgia, Times New Roman, Times, serif | Función serif; la vista previa usa Georgia si es necesario. |
| rvt-ts-12 / 14 / 16 / 18 / 20 / 23 / 26 | 12 / 14 / 16 / 18 / 20 / 23 / 26px | Utilidades numéricas con una raíz de 16px. |
| rvt-ts-29 / 32 / 36 / 41 / 46 / 52 | 29 / 32 / 36 / 41 / 46 / 52px | Pasos mayores; aplicar a elementos de texto. |
| rvt-lh-tight / base / loose | 1.2 / 1.5 / 1.65 | Opciones de altura de línea sin unidades. |
| --rvt-font-regular / medium / bold | 400 / 500 / 700 | La disponibilidad del peso medio depende de la fuente. |
### Espaciado y formas
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --rvt-spacing-xxs / xs / sm / md | 4 / 8 / 16 / 24px | Espaciado pequeño, hasta el nivel de componente. |
| --rvt-spacing-lg / xl / xxl | 32 / 40 / 64px | Separaciones mayores entre composiciones. |
| --rvt-spacing-3-xl / 4-xl | 128 / 192px | Espaciado amplio para elementos destacados, no para el relleno de paneles. |
| --rvt-border-radius-sm / md / lg | .125 / .25 / .5rem | 2 / 4 / 8px con la raíz estándar. |
| --rvt-width-4-xl | 48rem (768px) | El token de ancho difiere del token de espaciado, aunque tengan el mismo sufijo. |
### Paleta
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --rvt-color-black-500 | #243142 | Color de referencia oscuro principal. |
| --rvt-color-black-000 / black-100 | #f8f9fa / #e2e7e9 | Referencias de superficies claras y separadores. |
| --rvt-color-crimson-500 / crimson-600 | #990000 / #800000 | Referencias de la gama carmesí. |
| --rvt-color-blue-500 / blue-600 | #006298 / #004f80 | Referencias de la gama azul. |
| --rvt-color-green-500 | #056e41 | Gama verde; no representa el éxito por sí sola. |
### Puntos de interrupción
| Nombre / Regla | Valor / Configuración | Uso |
| --- | --- | --- |
| --rvt-breakpoint-sm | 30em / 480px | Utilidades -sm-up. |
| --rvt-breakpoint-md | 46.25em / 740px | Utilidades -md-up. |
| --rvt-breakpoint-lg | 67.5em / 1080px | Utilidades -lg-up. |
| --rvt-breakpoint-xl | 78.75em / 1260px | Utilidades -xl-up. |
| --rvt-breakpoint-xxl | 87.5em / 1400px | Utilidades -xxl-up. |
## Guía completa del sistema de diseño de Rivet
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.
## Sistema de diseño de Rivet para tareas universitarias
### Un sistema de componentes con un punto de entrada HTML
> Rivet proporciona CSS, JavaScript, clases de utilidad y diseños de página para las interfaces de Indiana University. El ejemplo funcional utiliza directamente el paquete para navegador de la versión 2.9.1: no requiere React ni un compilador de componentes. Su propósito es mostrar una pequeña página de detalles de un taller con información secundaria sobre la visita, no una solicitud de admisión disfrazada de panel de control.
La identidad institucional y el contenido de muestra se mantienen separados. Esta página no reproduce una firma de IU, no afirma registrar a un visitante ni confirma la existencia de una instalación real. Para un servicio universitario en producción, sigue el proceso aprobado por la universidad para el uso de la marca y la titularidad del contenido. La licencia del código no convierte los detalles inventados del evento en información oficial.
Consulta la especificación complementaria
## Sistema de diseño de Rivet: escala tipográfica y roles de las fuentes
### Aplica utilidades de tamaño exacto al texto
La familia sans serif de Rivet parte de BentonSans; la familia serif, de GeorgiaPro. La muestra local utiliza deliberadamente Arial y Georgia como alternativas y no solicita fuentes remotas. En una implementación de producción, hay que gestionar los permisos institucionales y la distribución de las fuentes, en lugar de copiar los archivos de fuentes de esta vista previa.
La escala numérica sigue una progresión de segunda mayor redondeada. El título del ejemplo usa rvt-ts-32 y el encabezado del panel, rvt-ts-23; sus tamaños compilados son 2rem y 1.4375rem, respectivamente. El texto base es 1rem. Usa rvt-lh-base para un interlineado de 1.5, rvt-lh-tight para 1.2 y rvt-lh-loose para 1.65. Aplica estas clases a los elementos de texto para evitar que los controles anidados en un contenedor hereden una escala tipográfica de presentación no deseada.
| Función en este ejemplo | Clase | Valor con una raíz de 16px |
| --- | --- | --- |
| Título | rvt-ts-32 | 32px |
| Título del panel | rvt-ts-23 | 23px |
| Cuerpo | rvt-ts-16 | 16px |
| Etiqueta pequeña | rvt-ts-14 | 14px |
Consulta la especificación complementaria
## Sistema de diseño de Rivet: colores y superficies
### El carmesí no es el único color
La paleta de referencia distingue crimson-500 (#990000) de blue-500 (#006298). La muestra usa el carmesí como una franja superior discreta y controles nativos de Rivet para los elementos interactivos. El texto utiliza black-500 (#243142), black-000 (#f8f9fa) para la superficie de información complementaria y black-100 (#e2e7e9) para los separadores. Son colores reales de la paleta, no valores extraídos de una captura de pantalla.
El nombre de un color no garantiza que todas las combinaciones tengan suficiente contraste. Mantén el tratamiento nativo del foco de las pestañas y su estado seleccionado, junto con el contenido visible y el valor aria-selected. No indiques que un panel está activo únicamente cambiando el color de su etiqueta a carmesí. El aviso de evento ficticio del ejemplo sigue siendo texto legible y corriente, situado encima del selector.
Consulta la especificación complementaria
## Sistema de diseño de Rivet: espaciado, anchos y esquinas
### Una escala con nombre y saltos amplios deliberados
El espaciado de Rivet no es una lista de incrementos consecutivos de cuatro píxeles. Pasa de xxs 4px a xs 8px, sm 16px, md 24px, lg 32px, xl 40px, xxl 64px, 3-xl 128px y 4-xl 192px con una raíz de 16px. El ejemplo usa sm para el margen interior de la página en móviles, md para el ritmo junto al panel y lg para las separaciones verticales principales.
El contenedor de lectura de 64rem como ancho máximo de la muestra es una decisión de la aplicación, no un supuesto token de contenedor de Rivet. Dentro de ese contenedor, el token de ancho 4-xl es 48rem/768px; spacing-4-xl es 12rem/192px. Compartir el mismo sufijo no implica compartir el mismo valor dimensional. radius-sm es .125rem, md .25rem y lg .5rem; no reemplaces todos los componentes por una estética uniforme de tarjetas muy redondeadas.
Consulta la especificación complementaria
## Sistema de diseño de Rivet: estructura y estados de las pestañas
### Haz coincidir los valores de los datos y, después, inicializa
Un conjunto de pestañas consta de un contenedor rvt-tabs, una lista rvt-tabs__tablist con un aria-label significativo, botones activadores y paneles hermanos rvt-tabs__panel. Los valores de data-rvt-tab y data-rvt-tab-panel deben coincidir en cada pareja. El marcador de selección inicial data-rvt-tab-init debe ir en un panel, no en su botón. Rivet puede generar identificadores, pero las parejas explícitas hacen que este ejemplo sea más fácil de inspeccionar.
Rivet.init() añade los roles de pestaña, el estado de selección, las relaciones entre paneles y el comportamiento del teclado. No implementes un segundo controlador de clics que alterne por separado el atributo hidden: dos responsables del estado pueden hacer que la pestaña seleccionada y el panel visible dejen de estar sincronizados. El marcado completo de abajo contiene texto original breve y puede colocarse entre las etiquetas de hoja de estilos y de script de la configuración.
```
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
Referencia de código
Consulta la especificación complementaria
## Sistema de diseño de Rivet: qué debe quedar fuera de las pestañas
### Mantén visible la información esencial de la visita
El título del evento, la fecha, la duración y el aviso de ejemplo ficticio deben quedar fuera de las pestañas. Los visitantes no deberían tener que descubrir un panel oculto para saber si el contenido describe una reserva real. Cada panel incluye un encabezado breve y un párrafo; las tres etiquetas son lo bastante cortas como para permanecer en una sola fila en una pantalla estrecha.
Las pestañas son adecuadas cuando se puede leer por separado el material relacionado. No son apropiadas para comparar varias tarifas de programas o dos planes de estudio, porque al cambiar de pestaña se oculta uno de los elementos de la comparación. Para esa tarea, es mejor usar una tabla o una lista desplegada.
- Usa «Resumen», «Llegada» y «Acceso» para explicaciones complementarias que sean útiles por separado.
- Mantén los plazos, los avisos de cancelación y la acción principal visibles fuera de los paneles de pestañas.
- Usa una tabla comparativa cuando el lector deba consultar valores de varias categorías al mismo tiempo.
Consulta la especificación complementaria
## Sistema de diseño de Rivet: diseño adaptable y uso del teclado
### Cinco puntos de ruptura con prioridad para móviles
Los puntos de ruptura de Rivet son 30em, 46.25em, 67.5em, 78.75em y 87.5em. Con el tamaño de fuente inicial habitual de 16px, equivalen a 480, 740, 1080, 1260 y 1400px. El punto de ruptura medio es 740px, no el valor convencional de 768px tomado de otro sistema. Las utilidades adaptables añaden el punto de ruptura y -up, como en rvt-ts-32-md-up.
La franja de pestañas no debe dividirse en varias filas apiladas. Mantén las etiquetas cortas y comprueba cómo se ve el texto real en anchos reducidos; reducir el tamaño del texto para que quepa no sustituye a elegir el componente de navegación adecuado. En la interacción nativa, las flechas izquierda y derecha mueven el foco entre las pestañas y permiten avanzar desde el final hasta el principio, y viceversa. Enter o Espacio activa la pestaña enfocada. Los paneles ocultos no deben dejar sus elementos interactivos en el orden de tabulación.
Consulta la especificación complementaria
## Sistema de diseño de Rivet: instala y verifica el ejemplo
### Un paquete para navegador con una sola inicialización
La instalación proporcionada fija la versión 2.9.1 y copia el CSS publicado y el JavaScript minimizado para navegador al directorio estático del sitio. Sirve esos recursos antes de llamar a Rivet.init(). Si un framework monta el HTML más tarde, usa el ciclo de vida de integración documentado de JavaScript, en lugar de dar por sentado que el análisis inicial de la página detectó los nodos nuevos.
La vista previa independiente ejecuta localmente esos recursos oficiales de CSS y JavaScript. La fuente alternativa y el ancho del contenedor son ajustes explícitos de la aplicación. No incluye solicitudes de reserva por red, persistencia, analítica ni confirmaciones generadas. Las pestañas nativas son toda la interacción que se muestra.
1. Carga la hoja de estilos local y verifica que los tres activadores de pestaña y sus paneles estén presentes antes de inicializar.
2. Inicializa Rivet, cambia de pestaña con el puntero y luego repite la prueba con las teclas de flecha y Enter o Espacio.
3. Comprueba el activador seleccionado, el panel visible, el indicador de foco y el ancho del documento en tamaños de escritorio y de móvil estrecho.
Consulta la especificación complementaria
## Ejemplos de componentes del sistema de diseño Rivet
### Selector de información de visita con tres paneles
Atributos de datos coincidentes y explícitos, y un panel inicial; Rivet nativo controla el foco y la visibilidad.
```
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
Referencia de código
- Mantén el título del evento y la información esencial fuera de los paneles.
- Incluye el CSS y el JavaScript publicados y llama a Rivet.init() una vez.
- Las teclas de flecha mueven el foco; Enter o Espacio activa la pestaña enfocada.
### 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.
```
Workshop visit — Rivet specimen
LEARNING STUDIO · RIVET COMPONENT EXAMPLE
Reading the archive
A hands-on introduction to working with historical sources. Explore the visit information below.
SessionSaturday · 10:00–11:30
FormatSmall-group workshop
LocationLearning studio · Room 204
Fictional event for interface demonstration. No reservation is made.
A practical introduction to archives
Compare a photograph, a newspaper page, and a handwritten letter. A facilitator will explain how to record a source and distinguish an observation from an interpretation.
Arrive at the learning studio
In this fictional example, the welcome desk opens at 9:45. The workshop starts at 10:00 in Room 204. Bring a notebook; all source materials are provided.
Choose a comfortable way to participate
The example session offers large-print copies and a quiet reading space. Visitors can work with a partner or review material independently. These are specimen details, not verified campus facilities.
```
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.
## Configuración del agente del sistema de diseño Rivet
### Punto de partida para la implementación
Rutas de recursos de navegador publicados de rivet-core 2.9.1 verificadas con la guía oficial de inicio. Ajusta el directorio público a tu servidor; la vista previa usa copias locales y una fuente alternativa. El ZIP del ejemplo funcional completo que aparece en Fuentes también incluye las dependencias exactas de la vista previa y el documento completo. Extráelo, ejecuta python3 -m http.server 8080 en ese directorio y abre http://localhost:8080/indiana-rivet.html. No abras ejemplos basados en módulos mediante file://.
```
npm install rivet-core@2.9.1
mkdir -p public/vendor/rivet
cp node_modules/rivet-core/css/rivet.min.css public/vendor/rivet/
cp node_modules/rivet-core/js/rivet.min.js public/vendor/rivet/
# Add these tags to the HTML served from public/:
#
# ...component markup...
#
#
```
### Una instrucción para tu proyecto
```
Crea una página de detalles de un taller universitario con Rivet 2.9.1 y pestañas nativas de HTML. Carga rivet.min.css y rivet.min.js y llama a Rivet.init(). Usa valores coincidentes para data-rvt-tab/data-rvt-tab-panel, una etiqueta descriptiva para tablist y data-rvt-tab-init en el primer panel. Mantén el título, la fecha y los avisos esenciales fuera de las pestañas. Usa texto del cuerpo de 16px, títulos de panel de 23px, un título de página de 32px y los tokens de espaciado de Rivet. Respeta los puntos de interrupción de 480/740/1080/1260/1400px. Mantén los paneles breves, conserva el comportamiento del foco y la selección con teclado, e identifica todos los detalles inventados del evento como contenido de demostración. No uses marcas de identidad de IU sin autorización.
```
## Fuentes y alcance del sistema de diseño Rivet
Una referencia técnica de Rivet y una demostración ficticia de taller. El uso de marcas institucionales y fuentes sigue sujeto a las normas de Indiana University; no se ofrecen visitas ni reservas reales.
- Resumen de Rivet Descripción oficial de los objetivos y recursos.
- Tokens de diseño Valores con nombre para decisiones visuales compartidas.
- Diseños Diseños iniciales para aplicaciones y páginas de contenido.
- Componentes Componentes de interfaz documentados.
- 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.
## Recursos relacionados con el sistema de diseño Rivet
### 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.
### KERN
Crea una interfaz nativa de KERN con tipografía verificada, temas semánticos, paneles desplegables y un flujo de confirmación reversible.
### Michigan Forty Two
Conoce los flujos de trabajo de WordPress compatibles con Forty-Two, su paleta web y sus patrones de directorio de personas mediante un ejemplo funcional de filtros por cargo e investigación.
- [Referencia de implementación](https://rivet.iu.edu/components/tabs/)
- [Fuente](https://rivet.iu.edu/utilities/typography/)
- [Fuente](https://rivet.iu.edu/design-tokens/)
- [Consulta la especificación complementaria](https://rivet.iu.edu/getting-started/)
- [Consulta la especificación complementaria](https://rivet.iu.edu/utilities/typography/)
- [Consulta la especificación complementaria](https://rivet.iu.edu/design-tokens/)
- [Referencia de código](https://rivet.iu.edu/components/tabs/)
- [Consulta la especificación complementaria](https://rivet.iu.edu/components/tabs/)
- [Resumen de Rivet Descripción oficial de los objetivos y recursos.](https://rivet.iu.edu/)
- [Tokens de diseño Valores con nombre para decisiones visuales compartidas.](https://rivet.iu.edu/design-tokens/)
- [Diseños Diseños iniciales para aplicaciones y páginas de contenido.](https://rivet.iu.edu/layouts/)
- [Componentes Componentes de interfaz documentados.](https://rivet.iu.edu/components/)