Sistema de design Rivet.

Sistema de design Rivet para tarefas universitárias

Um sistema de componentes com ponto de entrada HTML

Rivet fornece CSS, JavaScript, classes utilitárias e layouts de página para interfaces da Indiana University. O exemplo funcional usa diretamente o pacote para navegador 2.9.1: não precisa de React nem de um compilador de componentes. O objetivo é criar uma pequena página de detalhes de uma oficina, com informações complementares sobre a visita, e não um painel disfarçado de inscrição para admissão.

A identidade institucional e o conteúdo de exemplo permanecem separados. Esta página não reproduz uma assinatura visual da IU, não afirma registrar um visitante nem confirma a existência de um espaço real. Para um serviço universitário em produção, use a marca aprovada pela universidade e siga o processo de gestão de conteúdo. A licença do código não transforma detalhes de eventos inventados em informações oficiais.

Consulte a especificação de apoio

Escala tipográfica e funções das fontes do sistema de design Rivet

Aplique utilitários de tamanho exato ao texto

A família sem serifa de Rivet começa com BentonSans; a família com serifa começa com GeorgiaPro. O exemplo local usa deliberadamente Arial e Georgia como fontes alternativas e não faz solicitações de fontes remotas. Uma implementação em produção deve verificar as permissões institucionais e a forma de disponibilizar as fontes, em vez de copiar os arquivos de fonte desta prévia.

A escala numérica segue uma progressão de segunda maior arredondada. O título do exemplo usa rvt-ts-32 e o título do painel, rvt-ts-23; os tamanhos compilados são, respectivamente, 2rem e 1.4375rem. O texto-base tem 1rem. Use rvt-lh-base para uma altura de linha de 1.5, rvt-lh-tight para 1.2 e rvt-lh-loose para 1.65. Aplique essas classes aos elementos de texto para evitar que controles aninhados em um contêiner herdem uma escala de exibição indesejada.

Consulte a especificação de apoio

Cores e superfícies do sistema de design Rivet

O carmesim não é a única cor

A paleta de referência diferencia crimson-500 (#990000) de blue-500 (#006298). O exemplo usa o carmesim com moderação em uma linha superior e controles nativos de Rivet para indicar interatividade. O texto usa black-500 (#243142), a superfície de informações complementares usa black-000 (#f8f9fa) e os divisores usam black-100 (#e2e7e9). Essas são entradas reais da paleta, não valores extraídos de uma captura de tela.

O nome de uma cor não garante que todas as combinações tenham contraste suficiente. Mantenha o indicador de foco nativo das abas e o estado selecionado junto com o conteúdo visível e o valor de aria-selected. Não indique um painel ativo apenas mudando o rótulo para carmesim. O aviso sobre o evento fictício do exemplo permanece como texto comum e legível, acima do seletor de abas.

Consulte a especificação de apoio

Espaçamento, larguras e cantos do sistema de design Rivet

Uma escala nomeada com grandes intervalos intencionais

O espaçamento de Rivet não consiste em incrementos consecutivos de quatro pixels. A escala vai de xxs, com 4px, a xs, com 8px; sm, com 16px; md, com 24px; lg, com 32px; xl, com 40px; xxl, com 64px; 3-xl, com 128px; e 4-xl, com 192px, usando uma raiz de 16px. O exemplo usa sm para a margem interna da página em dispositivos móveis, md para o espaçamento ao redor do painel e lg para a separação vertical entre seções principais.

O contêiner de leitura do exemplo, com largura máxima de 64rem, é uma escolha da aplicação, não um token de contêiner atribuído a Rivet. Dentro dele, o token de largura 4-xl é 48rem/768px; spacing-4-xl é 12rem/192px. O mesmo sufixo não indica a mesma dimensão. Radius-sm é .125rem, md é .25rem e lg é .5rem; não substitua todos os componentes por um estilo único de cartões com cantos muito arredondados.

Consulte a especificação de apoio

Abas: estrutura e estados do sistema de design Rivet

Associe os valores dos dados e depois inicialize

Um conjunto de abas tem um contêiner rvt-tabs, uma rvt-tabs__tablist com um aria-label descritivo, botões como acionadores e elementos rvt-tabs__panel como painéis correspondentes. Os valores de data-rvt-tab e data-rvt-tab-panel devem corresponder em cada par. O marcador de seleção inicial data-rvt-tab-init deve ficar em um painel, não em seu botão. Rivet pode gerar identificadores, mas os pares explícitos facilitam a inspeção deste exemplo.

Rivet.init() adiciona as funções das abas, o estado de seleção, as relações entre painéis e o comportamento do teclado. Não implemente outro manipulador de cliques que alterne independentemente a visibilidade: dois responsáveis pelo estado podem fazer com que a aba selecionada e o painel visível fiquem dessincronizados. A marcação completa abaixo contém conteúdo original e conciso e pode ser inserida entre as tags de folha de estilo e de script na configuração.

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>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.</p>
  </div>
</div>

Referência de código

Consulte a especificação de apoio

O que deve ficar fora das abas no sistema de design Rivet

Mantenha visíveis as informações essenciais da visita

O título do evento, a data, a duração e o aviso de que se trata de um exemplo fictício permanecem fora das abas. O visitante não deve precisar abrir um painel oculto para descobrir se o conteúdo descreve uma reserva real. Cada painel contém um título curto e um parágrafo; os três rótulos são breves o bastante para caber em uma única linha em uma tela estreita.

As abas são apropriadas quando o conteúdo relacionado pode ser lido separadamente. Não são uma boa opção para comparar as taxas de vários programas ou dois planos de estudo, pois a alternância oculta um dos lados da comparação. Para esse caso, uma tabela ou uma lista aberta é uma composição melhor.

• Use Visão geral, Chegada e Acessibilidade para apresentar explicações complementares que sejam úteis por si só.
• Mantenha prazos, avisos de cancelamento e a ação principal visíveis fora dos painéis das abas.
• Use uma tabela comparativa quando o leitor precisar analisar valores de várias categorias ao mesmo tempo.

Consulte a especificação de apoio

Uso responsivo e do teclado no sistema de design Rivet

Cinco pontos de quebra com abordagem mobile-first

Os pontos de quebra de Rivet são 30em, 46.25em, 67.5em, 78.75em e 87.5em. Com o tamanho inicial de fonte habitual de 16px, correspondem a 480, 740, 1080, 1260 e 1400px. O ponto de quebra médio é 740px, não o valor convencional de 768px adotado em outros sistemas. Os utilitários responsivos acrescentam o ponto de quebra seguido de -up, como em rvt-ts-32-md-up.

A faixa de abas não deve se dividir em várias linhas empilhadas. Mantenha os rótulos curtos e teste o texto real em telas estreitas; reduzir o tamanho da fonte para fazê-lo caber não substitui a escolha do componente de navegação adequado. Na interação nativa, as setas para a esquerda e para a direita movem o foco entre as abas e percorrem as opções em sequência circular. Enter ou Espaço ativa a aba em foco. Os elementos interativos dos painéis fechados não devem permanecer na ordem de tabulação.

Consulte a especificação de apoio

Instale e verifique o exemplo do sistema de design Rivet

Um pacote para navegador com uma inicialização

A instalação fornecida fixa a versão 2.9.1 e copia o CSS publicado e o JavaScript minificado para navegadores no diretório estático do site. Sirva esses arquivos antes de chamar Rivet.init(). Se uma estrutura de interface montar o HTML posteriormente, use o ciclo de vida documentado de integração do JavaScript, em vez de presumir que a verificação inicial da página encontrou os novos elementos.

A prévia independente executa localmente os arquivos oficiais CSS e JavaScript. A fonte alternativa e a largura do contêiner são substituições explícitas definidas pela aplicação. Não há solicitação de agendamento pela rede, persistência, análise de dados nem confirmação gerada. As abas nativas são toda a interação demonstrada.

1. Carregue a folha de estilos local e confirme que os três acionadores e painéis das abas existem antes da inicialização.
2. Inicialize o Rivet, alterne entre as abas com o ponteiro e repita usando as teclas de seta e Enter ou Espaço.
3. Verifique a aba selecionada, o painel visível, o indicador de foco e a largura do documento em telas de desktop e em dispositivos móveis estreitos.

Consulte a especificação de apoio

Exemplos de componentes do sistema de design Rivet

<div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>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.</p>
  </div>
</div>

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Workshop visit — Rivet specimen</title><link rel="stylesheet" href="vendor/rivet-2.9.1/rivet.min.css"><style>:root{--rvt-font-sans:Arial,sans-serif;--rvt-font-serif:Georgia,serif}body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}body{border-top:8px solid #990000;margin:0;background:#fff;color:#243142}.shell{max-width:64rem;margin:auto;padding:2rem 1rem 3rem}.eyebrow{font-size:.875rem;letter-spacing:.06em;color:#4c5a69}.intro{max-width:48rem}.facts{display:flex;gap:1.5rem;flex-wrap:wrap;padding:1.5rem;margin:2rem 0;background:#f8f9fa;border:1px solid #e2e7e9}.facts p{margin:0}.facts strong{display:block;font-size:.875rem}.rvt-tabs__panel{min-height:13rem}footer{margin-top:2rem;padding-top:1rem;border-top:1px solid #e2e7e9;font-size:.875rem;color:#4c5a69}h1{margin:.5rem 0 1rem}@media(min-width:46.25em){.shell{padding:3rem 2rem}.rvt-tabs__panel{min-height:12rem}}</style></head><body><main class="shell"><p class="eyebrow">LEARNING STUDIO · RIVET COMPONENT EXAMPLE</p><h1 class="rvt-ts-32 rvt-text-bold rvt-lh-tight">Reading the archive</h1><p class="intro rvt-ts-18">A hands-on introduction to working with historical sources. Explore the visit information below.</p><div class="facts"><p><strong>Session</strong>Saturday · 10:00–11:30</p><p><strong>Format</strong>Small-group workshop</p><p><strong>Location</strong>Learning studio · Room 204</p></div><p class="rvt-ts-14 rvt-m-bottom-lg">Fictional event for interface demonstration. No reservation is made.</p><div class="rvt-tabs" data-rvt-tabs="visit">
  <div class="rvt-tabs__tablist" aria-label="Plan your workshop visit" data-rvt-tablist>
    <button class="rvt-tabs__tab" data-rvt-tab="overview">Overview</button>
    <button class="rvt-tabs__tab" data-rvt-tab="arrival">Arrival</button>
    <button class="rvt-tabs__tab" data-rvt-tab="access">Access</button>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="overview" data-rvt-tab-init>
    <h2 class="rvt-ts-23 rvt-text-bold">A practical introduction to archives</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="arrival">
    <h2 class="rvt-ts-23 rvt-text-bold">Arrive at the learning studio</h2>
    <p>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.</p>
  </div>
  <div class="rvt-tabs__panel" data-rvt-tab-panel="access">
    <h2 class="rvt-ts-23 rvt-text-bold">Choose a comfortable way to participate</h2>
    <p>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.</p>
  </div>
</div><footer>Native Rivet 2.9.1 tabs · Arial font fallback · Original example content<br>Keyboard: use Left and Right to move between tabs, then Enter or Space to activate.</footer></main><script src="vendor/rivet-2.9.1/rivet.min.js"></script><script>Rivet.init();</script></body></html>