Número gigante com fonte do dado

Uma cifra só, em corpo de 280px, ocupando a dobra. Os afixos — a moeda na frente, o multiplicador atrás — ficam em corpo reduzido na mesma linha de base, para que o algarismo domine e a figura ainda se leia como uma linha de tipografia. Embaixo da cifra, o rótulo diz o que ela mede. Na coluna estreita ao lado, alinhada pelo pé, ficam a frase de contexto (que carrega a ressalva) e a linha de fonte e data. Nada se move depois de entrar: a peça é gráfica, e o movimento dela é o reveal do core — blur indo a zero sobre um glifo de 280px.

O problema editorial é o da diluição. Uma régua de três ou quatro números trata os números como equivalentes, e é isso que ela faz bem; o preço é que o mais forte perde peso ao lado dos outros. Quando existe um dado que carrega o argumento inteiro — "19 anos", "R$ 2,3 bi sob assessoria", "340 famílias" —, dividir a dobra com dois números de apoio é gastar o argumento. Um número em corpo gigante não é um número maior: é uma afirmação, e a dobra inteira existe para ela.

Substitui prova/stats-contador-regua no caso em que só um dos números importa. Em todo caso em que os números são equivalentes em peso, a régua ganha — e isso é a maioria dos casos.

Quando usar

• Quando existe um dado que sozinho responde "por que confiar", e os outros que a casa tem seriam enfeite ao lado dele.
• Quando o dado é de estoque (patrimônio sob assessoria, famílias atendidas, escritórios) ou de trajetória (anos de casa, anos sob a mesma política). Ver ## Compliance.
• Quando existe fonte nomeada e data para o número. Sem isso a peça não se usa — não é regra de estilo, é o §Compliance.
• Como emenda entre duas dobras de prosa: depois de um manifesto, antes de uma dobra de serviços. Aterrissa em fato o que a dobra anterior afirmou em palavras.
• Depois do hero, como primeira prova, quando a página é institucional e o argumento é "há quanto tempo" ou "quanto".
• Uma vez por página. Dois números gigantes na mesma rolagem e nenhum dos dois é o número.

Quando não usar

• Quando os números são equivalentes em peso. Este é o caso majoritário e o irmão direto é prova/stats-contador-regua: três a quatro números em régua, com contagem, filete vertical entre as células. Se você hesita entre pôr um número ou três, ponha três — a régua ganha sempre que a hesitação existe, porque hesitar já é dizer que nenhum dos números carrega a dobra sozinho.
• Quando o número precisa de variação e período ("+8,2% no trimestre", "estável em 12m"): dados/grade-indicadores, que é grade de 4 a 6 indicadores e traz o canal de direção (palavra, seta, cor, período) que esta peça não tem. Um número gigante com uma seta de alta ao lado passa a ler como cotação, e cotação é resultado — ver ## Compliance.
• Quando o número tem de ser explorado, com abas de período e peças que recalculam juntas: dados/painel-patrimonio.
• Quando o número é calculado pelo visitante: conversao/calculadora-projecao ou conversao/simulador-carteira. Ali o número é resposta a um gesto; aqui é afirmação da casa.
• Acima da dobra. A régua de chaves do hero/full-bleed-media já resolve o número no hero, em 19px e com slots que nem sempre são quantidade ("CVM", "SP · POA"). Este componente em cima da dobra rouba a headline: 280px de algarismo e 40px de título não convivem.
• Quando a tipografia gigante é uma frase e não um número. Para a frase que É a peça gráfica: conteudo/manifesto-com-imagens (três linhas com foto no lugar de uma palavra), conteudo/manifesto-citacao (a fala, com aspas e autor) ou conteudo/abertura-tipografica (anúncio de capítulo da página). Número dentro de uma dessas vira promessa auditável em corpo de manifesto, sem lugar para a fonte do dado.
• Quando não há fonte para o número. Não há variação sem a linha de fonte. Escreva o número numa linha de prosa, onde ele não afirma tanto.

Padrão editorial

O que mantém a peça coesa é a cadeia número → rótulo → contexto → fonte, lida nessa ordem e cada elo mais miúdo que o anterior. Se o rótulo é mais interessante que o número, ou se o contexto precisa de três frases para o número fazer sentido, o dado não estava carregando a dobra sozinho — e a peça é a errada.

Uma cifra por peça, uma peça por página. As duas coisas são a mesma regra.

Especificação dos assets

Nenhum. A peça é inteiramente tipográfica: sem imagem, sem ícone, sem SVG. O que ela requer não é asset, é procedência:

• Fonte do dado: documento nomeável e verificável pelo cliente (relatório consolidado de custódia, contrato social, registro de escritórios). Nome do documento, não "dados internos".
• Data ou posição: a data em que o número foi apurado, no formato que o documento usa (posição de 31/12/2025, apurado em 01/2026).
• Ressalva revisada: a segunda frase do contexto tem de passar por quem responde por compliance no cliente. Ver abaixo.
• O que não pode entrar: número sem documento por trás, número de rentabilidade ou de valorização, número redondo "aproximado" apresentado como exato, e nome de instituição real no rótulo.

Compliance

Esta seção não é sobre redação. É sobre a forma da peça. Um número em corpo de 280px é o lugar da página onde a promessa mora, e a mesma frase que passa em 17px de prosa vira insinuação em 280px de display.

1. Número de estoque e de trajetória, nunca de resultado

O critério é: o número descreve o que a casa tem e por quanto tempo, ou o que o dinheiro do cliente fez? O primeiro entra; o segundo não, e não é questão de reescrever a frase. Um número de resultado em corpo gigante é a forma mais eficiente de prometer retorno que existe — ele afirma sem verbo, sem ressalva legível e sem sujeito.

Um 97% de renovação de contrato é caso de fronteira: é estoque de relação (quantos clientes ficaram), não resultado de carteira. Passa com a data de referência no rótulo e com a base da conta no contexto ("dos clientes com mais de doze meses de casa").

2. A fonte do dado fica na peça, não no rodapé

O slot .ngig-fonte é exigido no markup, e isso é decisão de arquitetura e não de gosto: se ele fosse opcional, a primeira pessoa com pressa o apagaria, e o número passaria de fato a alegação sem que nada acusasse. Duas consequências no código:

• não existe variação da peça sem a linha — a lista de variações não traz "sem fonte", de propósito;
• o filete que fecha a coluna mora na própria linha de fonte, e não num invólucro. Apagá-la apaga o fechamento da composição junto, e a dobra fica visivelmente inacabada. É a única defesa que CSS consegue dar a um slot obrigatório, e é fraca — a defesa forte é esta ficha.

A cor dela é --fg-2, a mesma tinta da prosa de apoio, e não --fg-muted. Cinza de rodapé diz o contrário do que a linha existe para dizer.

3. Data de referência

97% dos clientes renovam envelhece sem que ninguém note; 97% dos clientes renovaram em 2025 não. Quando o número é taxa ou proporção, a data entra no rótulo, onde o olho já está, e se repete na linha de fonte com a posição do documento. Quando o número é de trajetória (19 anos), a data implícita é hoje e a linha de fonte basta.

4. A ressalva onde a pessoa lê o número

A segunda frase de .ngig-contexto existe para dizer o que o número não é, e ela fica ao lado da cifra. No exemplo: "É patrimônio sob assessoria — não é receita da Liberta nem resultado de carteira." Uma ressalva no rodapé da página não protege ninguém: quem para nesta dobra lê a cifra, o rótulo e o contexto, e vai embora.

O que o consumidor troca antes de publicar

1. O valor, os afixos e o --ngig-glifos da seção.
2. O rótulo, com a unidade e a data de referência.
3. As duas frases do contexto — a construção do número e a ressalva —, revisadas por quem responde por compliance.
4. A linha de fonte, com o nome do documento e a posição.
5. Conferir que o número escolhido está na coluna "Entra" da tabela acima.

Como usar

<link rel="stylesheet" href="core/tokens.css">
<link rel="stylesheet" href="core/temas/<projeto>.css">
<link rel="stylesheet" href="core/base.css">
<link rel="stylesheet" href="core/motion.css">
<link rel="stylesheet" href="componentes/prova/numero-gigante/estilo.css">
...
<script src="core/motion.js"></script>

Não há script.js. A entrada vem do core/motion.js, que a página já carrega; sem ele — bloqueador, JavaScript desligado — a @media (scripting: none) do core/motion.css devolve tudo visível. Medido nos dois modos, no Chrome com javaScriptEnabled:false: a dobra tem 643px de altura com script e 643px sem, a cifra fica em opacity:1 / filter:none no segundo caso, e a linha de fonte também. A página não fica em branco.

O parafuso que ninguém adivinha

<section class="sec-paper sec-pad ngig" style="--ngig-glifos:3.5">

O corpo da cifra é dividido pela contagem de glifos, e é isso que mantém a largura da figura constante quando o número troca. A contagem:

Mínimo prático 2. A tabela pronta:

Ganchos

Variações

Não há variação sem a linha de fonte. Ver ## Compliance.

A contagem que este componente recusou

O irmão prova/stats-contador-regua conta de zero até o alvo em 1,8s, e a ficha dele explica por quê: três números subindo juntos leem como medição. Aqui a contagem foi recusada, e a recusa foi medida antes de ser argumentada.

O motivo aritmético. A largura de 0 e a de 2,3 não são a mesma, então a cifra e tudo à direita dela andariam na horizontal durante a contagem:

81px dentro de uma célula de 365px passa; a régua vive com isso. 251px numa figura de 612px é o afixo bi atravessando um terço da coluna, e reservar a largura com min-width não resolve — troca o deslize por um vão vazio de 251px durante 1,8s, ao lado de uma cifra que ainda não é a cifra.

O motivo de compliance, que é o que decide. Num número de estoque, contar de zero anima a acumulação. Uma cifra de patrimônio subindo é a imagem de uma curva de crescimento, e é exatamente a insinuação que a seção ## Compliance existe para não fazer. A régua sofre menos disso porque três números subindo juntos leem como "estamos medindo", não como "está subindo".

O que fica no lugar. O reveal do core: filter: blur(14px) indo a zero sobre um glifo de 280px, mais fade e subida, escalonado em quatro tempos (cifra, rótulo, contexto, fonte) pelo data-d. Nada entra seco, e nada continua se movendo depois. Sob prefers-reduced-motion o core desliga os quatro e o número final aparece de imediato — medido: opacity:1, filter:none, transform:none, transition-duration:0s.

Uma consequência boa. Sem contagem, tabular-nums deixa de ser o que segura o número de tremer e passa a ser o que torna exata a conta de --ngig-glifos. Mesma declaração que a régua, razão diferente — e é por isso que o comentário dela no estilo.css não é o mesmo.

Gotchas

• --ngig-glifos tem de ser recontado quando o número troca, e nada acusa se não for. O sintoma não é um erro: é uma cifra grande ou pequena demais, que parece uma escolha de design. Medido em 1440: trocar 2,3 por 1.240 deixando a contagem em 3,5 multiplica a largura da figura por 1,59 — ela sai de 83,7% para 132,8% da coluna, contra 84,5% se a contagem for corrigida para 5,5. E o estouro não gera barra de rolagem: o body{overflow-x:hidden} do core recorta o excesso, então scrollWidth continua igual a clientWidth e nem o medir.js acusa. A falha é inteiramente silenciosa, e é por isso que a tabela pronta existe em "Como usar".

• A vírgula desce abaixo da caixa da cifra, e por isso o vão até o rótulo é proporcional ao CORPO e não à janela. Com --display-xl-lh:.8 a caixa fecha nos algarismos, que não têm descendente — mas a vírgula tem, e a tinta dela passa 0,109em abaixo da caixa: medido, 35,4px num corpo de 283,9px. Com o vão em vh, o rabo da vírgula sobrepunha os ascendentes do rótulo em 4,8px em 1440 e 1px em 1920, enquanto sobravam 7,1px de folga em 390 — o defeito só existia nas telas grandes, que é o pior lugar para um defeito de tipografia. A regra é margin-top:max(16px,calc(var(--ngig-corpo) * .14)), e o resultado é folga constante: 15,2px de tinta a tinta em 1280, 1440 e 1920, 7,3px em 390. Se você mexer no --display-xl-lh, meça isto de novo.

• --ngig-glifos:1 não é o valor de um número de um dígito. Ele é matematicamente correto e visualmente absurdo: o corpo triplica e chega a 993px em 1440, o que estoura o min-content da coluna. Para 4 escritórios, declare 2 e deixe a cifra em corpo de dois glifos. O mínimo prático é 2, e a conta não o impõe de propósito — impor um piso na conta esconderia o caso de tela estreita, que é o que ela existe para cobrir.

• font-variant-numeric:tabular-nums não é refinamento, mesmo sem contagem. É o que torna a conta exata. Medido nesta face: 1111 e 8888 medem 240px os dois em corpo 100px com tabular; sem tabular, 1111 mede 167,2px e 8888 mede 237px — 42% de diferença. Sem tabular, o mesmo --ngig-glifos produziria figuras de larguras muito diferentes conforme os algarismos que o número calhasse de ter. Se a --display do tema não tiver algarismos tabulares (fonte display comprada costuma não ter), o font-variant-numeric não tem o que ativar: tente font-feature-settings:"tnum" 1, ou meça a figura e calibre --ngig-glifos a olho para aquele número específico. É o mesmo gotcha da régua, com outra consequência.

• Palavra de unidade no afixo desmancha a conta. anos e famílias no .ngig-afixo-depois valem ~1,8 glifo e não 0,5, e a figura salta para 98% da coluna em 1920 — medido. A unidade pertence ao .ngig-rotulo, que é onde ela também lê melhor: "19" grande, "anos sob a mesma política" embaixo.

• .ngig-figura é flex de nível de bloco, então ele ocupa a coluna inteira — não confunda com a largura da cifra. getBoundingClientRect() nele devolve a largura da coluna, não da tinta. Para medir a figura de verdade, some do left do primeiro item ao right do último. Isto custou uma medição inteira: os primeiros números diziam "100% da coluna" em todas as telas, o que parecia um estouro e era só o retângulo do contêiner.

• Os espaços entre os três <span> da figura são intencionais. Em flex, o texto de espaço em branco entre itens não desenha nada (o vão é o gap), mas continua no textContent — e é por isso que o leitor de tela ouve "R$ 2,3 bi" e não "R$2,3bi". Não junte os <span> numa linha só para "limpar" o markup.

• Não ponha aria-hidden na figura. O número é para ser lido como número, e isso foi verificado na árvore de acessibilidade do Chrome, não deduzido. A dobra inteira chega assim:

- paragraph: Patrimônio - paragraph: R$ 2,3 bi - paragraph: sob assessoria da Liberta, em dezembro de 2025. - paragraph: Soma do patrimônio das famílias e empresas que acompanhamos, … - paragraph: "Fonte: relatório consolidado de custódia, posição de 31/12/2025."

Um parágrafo, "R$ 2,3 bi", com os espaços no lugar — não três fragmentos nem "R$2,3bi". Se um projeto precisar da leitura por extenso ("dois bilhões e trezentos milhões"), o caminho é aria-hidden="true" na .ngig-figura mais uma frase .visually-hidden do core ao lado com o valor escrito em palavras. Não está implementado porque duplica o dado em dois lugares e um dos dois vai envelhecer sozinho.

• --display-xl-lh:.8 é mais fechado que o .95 da primitiva, e o motivo é a ausência de descendente. A linha é só de algarismos: não há q para descer nem l para subir, e o .95 sobraria como vão morto entre a cifra e o rótulo. É o mesmo raciocínio que fazia o .82 antigo da primitiva funcionar em caixa alta. Medido num corpo de 283,9px: a caixa tem 227,1px, os algarismos ocupam de 14,1px a 222,5px dentro dela e a linha de base fica a 4,6px do pé da caixa — cabem com folga nos dois lados. A exceção é a vírgula, que desce até 262,5px, e é ela que obriga o gotcha acima.

• A variação .ngig--accent lê --accent-ink e não --accent, e numa cifra deste corpo a diferença não é sutil. A cor de marca é cor de botão e de filete, não de texto sobre fundo claro: o sage da Liberta sobre o creme do .sec-paper dá 1,36:1 (MANUAL §3), contra o mínimo de 3:1 para texto grande. Num realce em itálico de 40px isso já era ruim; numa cifra de 280px que É a dobra, seria a dobra inteira ilegível. O --accent-ink do core mistura 45% de accent com a tinta do escopo e dá 4,59:1 no claro, mantendo o matiz. O fallback var(--accent) fica para quem colar o bloco fora de um escopo de tom. Mesma forma do h2.sec-title em.

• A peça não tem nada interativo, e isso é a especificação. Tab atravessa a dobra sem parar — medido: zero elementos focáveis dentro de .ngig. Se um projeto quiser um botão levando ao documento que comprova o número, ele vai numa dobra seguinte, não aqui: um CTA ao lado de uma cifra de 280px transforma a afirmação em oferta.

• A coluna do lado fica estreita entre 900px e ~1200px. Nessa faixa o .wrap é limitado pela janela, e os 28% dão 254px em 1024 — cerca de 30 caracteres por linha. É estreito para prosa e aceitável para nota lateral, que é o papel dela. Abaixo de 900px a peça empilha. Se o contexto do seu projeto for mais longo que 34 palavras, use .ngig--centro (uma coluna) em vez de alargar a lateral.

• A dobra é .sec-paper por decisão, não por acidente. É o respiro claro no meio da página escura, e é o único lugar em que o contrato §3 autoriza contraste real de tom. Um número gigante em creme com tinta escura é a página de abertura de relatório; o mesmo número em .sec-deep é mais discreto e continua correto — só troque a classe. O que não se faz é pôr esta dobra entre duas .sec-paper: ela deixa de ser respiro e vira mais uma seção clara.

Histórico

A forma vem da página de abertura de relatório anual e da capa de balanço de gestora: a cifra como peça gráfica, com o apparatus — fonte, data, ressalva — impresso ao lado e não em nota de rodapé. Na tradução para o contrato mudaram três coisas, e as três são o componente:

Normalizações aplicadas: prefixo ngig- em toda classe; cor, face e ritmo só por token; a cifra vestindo a primitiva .display-xl do core em vez de escala tipográfica própria; o contexto vestindo .sec-lead; entrada pelos ganchos data-rv / data-d do core, sem observer nem keyframe próprio; escopo de tom declarado no markup (.sec-paper), sem override de --fg.

Divergências conhecidas vs. produção: nenhuma — a peça nasceu aqui.

Em aberto — a linha de procedência é candidata a primitiva

.ngig-fonte é a segunda aparição da mesma ideia com forma diferente: a régua resolve procedência com .pill ("Apurado em 01/2026") no .stat-foot, e aqui é uma linha de texto com filete em cima. O dados/grade-indicadores traz o período por indicador, que é uma terceira forma da mesma coisa. Se uma quarta peça de número precisar declarar fonte e data, isto passa do gatilho de três do §6 e vale promover — provavelmente como .fonte-dado, linha de 12,5px em --fg-2 com filete, e não como pílula. Não promovi: mexer no core está fora do escopo desta leva, e a promoção teria de reescrever a régua junto. Fica registrado.

Em aberto — --ngig-passo em vw e não na largura da coluna

A conta calibra a figura por vw, e o que ela quer de fato é a fração da coluna. Os dois batem porque o .wrap ocupa entre 86% e 90% da janela em toda a faixa útil (medido: 1240 de 1440 e 350 de 390), mas deixam de bater num contêiner mais estreito que a janela — a peça dentro de uma coluna de 60% de um layout de dashboard, por exemplo. A resposta certa seria cqw com container-type:inline-size, que nenhum componente da biblioteca usa hoje; adotar a primeira unidade de container query da casa é decisão de arquitetura e não foi tomada. Enquanto não for, a peça é de dobra de página inteira, que é o uso para o qual foi calibrada.

Calibragem no primeiro uso. Espere ajustar --ngig-passo quando o tema trouxer uma display condensada — o que se persegue é a fração da coluna, não o número —, e --ngig-afixo se a face tiver símbolo de moeda muito estreito.