modelo-html-template — Design System & Biblioteca

Cores

Escala 100→900, 500 é sempre a cor de marca. Regra de uso: 60% grayscale, 30% secondary, 10% primary (reservada para ação/CTA).

Primary (ação/CTA — 10%)

100

200

300

400

500 ★

600

700

800

900

Secondary (destaques de seção — 30%)

100

200

300

400

500 ★

600

700

800

900

Tertiary (superfície/apoio)

100 ★

200

300

400

500

600

700

800

900

Grayscale (60% da UI)

100

200

300

400

500

600

700

800

900

System (semânticas)

success

danger

warning

info

Tipografia

Display — text-display

Heading 1 — text-h1

Heading 2 — text-h2

Heading 3 — text-h3

Heading 4 — text-h4

Lead — text-lead, para introduções de seção.

Body — text-body, corpo de texto padrão.

Body small — text-body-sm.

CAPTION — text-caption

Eyebrow — text-eyebrow

Espaçamento (escala 4px)

spacing-1 — 4px

spacing-2 — 8px

spacing-4 — 16px

spacing-6 — 24px

spacing-8 — 32px

spacing-12 — 48px

spacing-16 — 64px

Radius

sm 4px

md 6px

lg 8px

xl 16px

pill

full

Grid & breakpoints

Faixa	Largura	Colunas	Container
Mobile	0–579px	4	fluido
Tablet	580–991px	8	fluido
Desktop	992–1279px	12	1280px
Desktop Large	≥1280px	12	1440px

col-span-12

col-span-6

col-span-4

Tamanhos de imagem padrão

Uso	Desktop	Mobile	Proporção
Banner/hero home	1920×800px	750×900px	desktop 12:5 · mobile 5:6
Header interno (page-header)	1920×420px	750×480px	desktop ~4.6:1 · mobile ~1.6:1
Card/thumbnail (notícia, evento)	640×420px	640×420px	16:10.5
Avatar/ícone circular	96×96px	96×96px	1:1
Logo parceiros/certificações	160×80px	160×80px	2:1 (max-height)

Exportar sempre em @1x e @2x (retina); usar <picture>/srcset para servir a versão mobile abaixo do breakpoint tablet. Peso alvo: até 200KB por imagem de banner, comprimida em WebP/AVIF com fallback JPG.

Componentes

Markup e comportamento prontos — copie o HTML de dentro de cada preview, junto do parcial de estilo/script correspondente em styles/components/ e scripts/components/.

ComponenteHeader interno

library/componentes/header-interno.html

Header fixo (logo + nav + ações) seguido de uma faixa de página (.page-header) com breadcrumb e título — usado em toda página que não seja a home.

ComponenteBanner

library/componentes/banner.html

Hero full-width com overlay para contraste do texto e indicadores de carrossel. Usado como primeira seção da Home Full Banner, ou sozinho como destaque pontual.

Relações com Investidores

Título de impacto do banner

Linha de apoio curta — uma frase, não um parágrafo.

Saiba mais

Ver código HTML

<div class="banner">
  <div class="banner__overlay" aria-hidden="true"></div>
  <div class="banner__content">
    <p class="text-eyebrow">Relações com Investidores</p>
    <h2 class="text-h1">Título de impacto do banner</h2>
    <p class="text-lead">Linha de apoio curta — uma frase, não um parágrafo.</p>
    <a class="btn btn--primary" href="#">Saiba mais</a>
  </div>
  <div class="banner__dots" aria-hidden="true">
    <span class="banner__dot banner__dot--active"></span>
    <span class="banner__dot"></span>
    <span class="banner__dot"></span>
  </div>
</div>

ComponenteAccordion

library/componentes/accordion.html

Um item aberto por vez por padrão. Para permitir múltiplos abertos, adicione data-multiple="true" no .accordion.

Um HTML base pré-configurado com design system (tokens de cor, espaçamento, radius, tipografia) e uma biblioteca de componentes/páginas prontos para importar por projeto.

A altura do painel é medida em runtime (scrollHeight) e animada via transition: height — ver scripts/components/accordion.js.

Sim: aria-expanded/aria-controls no trigger, navegável por teclado e respeita prefers-reduced-motion.

Ver código HTML

<div class="accordion">
  <div class="accordion__item">
    <h3>
      <button class="accordion__trigger" aria-expanded="true" aria-controls="acc-panel-1">
        Pergunta
        <svg class="accordion__trigger-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
          <path d="M5 7l5 6 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </h3>
    <div class="accordion__panel" id="acc-panel-1">
      <div class="accordion__panel-inner">Resposta.</div>
    </div>
  </div>
</div>
<script type="module">
  import { initAccordion } from '/scripts/components/accordion.js';
  initAccordion();
</script>

ComponenteDropdown

library/componentes/dropdown.html

Fecha ao clicar fora, ao pressionar Esc, e devolve o foco ao trigger.

Ver código HTML

<div class="dropdown">
  <button class="dropdown__trigger" aria-expanded="false" aria-haspopup="true">
    Selecionar empresa
    <svg class="dropdown__trigger-icon" viewBox="0 0 20 20" fill="none" aria-hidden="true">
      <path d="M5 7l5 6 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
  <div class="dropdown__menu" role="menu" hidden>
    <a class="dropdown__item" href="#" role="menuitem" aria-current="true">Empresa A</a>
    <a class="dropdown__item" href="#" role="menuitem">Empresa B</a>
  </div>
</div>

ComponenteFiltro + lista

library/componentes/filtro.html

Padrão para páginas data-driven (Documentos, Central de Resultados): filtro com rótulo acima do valor, lista de itens em cards — nunca linhas com border-bottom.

21 de jul. de 2026 Release de Resultados — 2T26

PDF
10 de mar. de 2026 Ata de Assembleia Geral Ordinária

PDF
18 de out. de 2025 Release de Resultados — 3T25

PDF

Ver código HTML

<div data-filter-scope>
  <label class="filter-box">
    <span class="filter-box__label">Filtrar por Ano</span>
    <select data-filter="ano">
      <option value="">Todos os anos</option>
      <option value="2026">2026</option>
    </select>
  </label>

  <ul class="item-list" role="list">
    <li class="item-list__item" data-filter-target data-filter-value-ano="2026">
      <div class="item-list__info">
        <span class="item-list__date">21 de jul. de 2026</span>
        <span class="item-list__title">Release de Resultados — 2T26</span>
      </div>
    </li>
  </ul>

  <div class="empty-state" data-filter-empty hidden>
    <p class="empty-state__title">Nenhum documento encontrado</p>
  </div>
</div>

ComponenteBusca

library/componentes/busca.html

Busca client-side por texto. Combine com data-search-text no item quando o texto buscável for diferente do conteúdo visível.

21 de jul. de 2026 Release de Resultados — 2T26
10 de mar. de 2026 Ata de Assembleia Geral Ordinária
18 de out. de 2025 Release de Resultados — 3T25

Ver código HTML

<div data-search-scope>
  <label class="search-box">
    <span class="sr-only">Buscar</span>
    <input class="search-box__input" type="search" placeholder="Buscar por nome..." />
    <button type="button" class="search-box__clear" hidden aria-label="Limpar busca">×</button>
  </label>

  <ul class="item-list" role="list">
    <li class="item-list__item" data-search-target>
      <div class="item-list__info">
        <span class="item-list__date">21 de jul. de 2026</span>
        <span class="item-list__title">Release de Resultados — 2T26</span>
      </div>
    </li>
  </ul>

  <div class="empty-state" data-search-empty hidden>
    <p class="empty-state__title">Nenhum resultado encontrado</p>
  </div>
</div>

ComponenteListas & bullets

library/componentes/listas.html

Bullets (texto corrido)

Governança corporativa alinhada às melhores práticas de mercado.
Transparência na divulgação de resultados trimestrais.
Canal direto de comunicação com investidores.

Checklist

Relatório anual publicado
Auditoria independente concluída
Código de conduta vigente

Item list (cards)

21 de jul. de 2026 Documento de exemplo

Ver código HTML

<!-- Bullets -->
<ul class="list-bullets" role="list">
  <li class="list-bullets__item">Item de texto corrido.</li>
</ul>

<!-- Checklist -->
<ul class="list-check" role="list">
  <li class="list-check__item">Item concluído.</li>
</ul>

<!-- Item list (cards) -->
<ul class="item-list" role="list">
  <li class="item-list__item">
    <div class="item-list__info">
      <span class="item-list__date">21 de jul. de 2026</span>
      <span class="item-list__title">Documento de exemplo</span>
    </div>
  </li>
</ul>

Páginas — formatos

Cada formato é um arquivo completo em /library/, pronto para servir de ponto de partida — mostrado abaixo dentro de um iframe só para caber na página.

PáginaHome Simples

library/home/simples.html

Hero compacto, destaques e FAQ — sem banner full-screen.

PáginaHome Full Banner

Em breve — hero full-screen com carrossel de imagens.

PáginaHome RI

Em breve — foco em cotação, ticker e resultados na dobra inicial.

PáginaCentral de Resultados

library/paginas/central-resultados.html

Header interno + filtro por ano/tipo + lista de documentos.

Design System & Biblioteca

Cores

Primary (ação/CTA — 10%)

Secondary (destaques de seção — 30%)

Tertiary (superfície/apoio)

Grayscale (60% da UI)

System (semânticas)

Tipografia

Espaçamento (escala 4px)

Radius

Grid & breakpoints

Tamanhos de imagem padrão

Componentes

ComponenteHeader interno

ComponenteBanner

Título de impacto do banner

ComponenteAccordion

O que é este template?

Como funciona a animação?

É acessível?

ComponenteDropdown

ComponenteFiltro + lista

ComponenteBusca

ComponenteListas & bullets

Bullets (texto corrido)

Checklist

Item list (cards)

Páginas — formatos

PáginaHome Simples

PáginaHome Full Banner

PáginaHome RI

PáginaCentral de Resultados