Guia de identidade
Design system
Sistema de design do Mundo dos Bancos — tokens, tipografia e componentes.
Cores
Tipografia
Famílias: --serif (corpo e títulos) e --sans (meta, navegação, rótulos). Os três maiores tamanhos (3xl, 4xl, display) são fluidos via clamp() — escalam com a largura da tela.
Espaçamento e raios
Escala --space-1 … --space-12 (.25rem → 4rem) e raios --radius-sm (3px) / --radius-md (6px).
Componentes
Masthead e navegação (incluindo o botão hambúrguer, visível até 48em) são o cabeçalho real desta página.
Kicker e rótulo de seção
Sistema Financeiro
Últimas publicações
Manchete (capa da home)
e do TED
Bancos
Fim do DOC e do TED: o que muda para os clientes bancários?
Painel tipográfico usado quando a matéria de capa não possui imagem — a manchete assume o protagonismo.
Ler artigo completo →Card de destaque
Item de lista
Economia
Taxa Selic: o que é e como funciona
Resumo curto com <!--more--> para demonstrar o item da lista editorial.
Chips de editoria
Botões e campos
Compartilhamento
Caixas: TOC e relacionados
Neste artigo
Tags
Newsletter
Busca
Paginação
Barra de progresso e voltar ao topo
Full-bleed e break-out
Elementos podem sair da coluna de texto com .full-bleed (sangra até a borda da viewport) ou .bleed-wide (até o container largo de 74rem). No post, use <figure class="figura full-bleed"> ou, em markdown, o atributo na linha abaixo da imagem.
Princípios
- Hierarquia clara: kicker → manchete → meta → corpo.
- Leitura confortável: texto corrido justificado com hifenização automática.
- Contenção cromática: um único acento (verde esmeralda) por tela.
- Contraste: texto
--inksobre--paper; marca reservada a detalhes. - Precisão: hairlines sutis e whitespace generoso.
- Responsivo: mobile-first; grades 3 → 2 → 1 colunas.