INVINV Design System

Buscar no Design System

Navegue para qualquer seção do INV Design System

v0.1

Typography

Componente polimórfico com variantes tipográficas do INV Design System. Usa Lora (display), Geist Sans (interface) e JetBrains Mono (dados/código).

Display — Lora

Títulos de alta autoridade. Renderiza com font-display (Lora, serif).

h1

Gestão de Patrimônio

h2

Análise de Portfólio

Interface — Geist Sans

Hierarquia de seções e conteúdo. Renderiza com font-sans (Geist).

h3

Rentabilidade Acumulada do Período

h4

Rentabilidade Acumulada do Período

h5
Rentabilidade Acumulada do Período
h6
Rentabilidade Acumulada do Período

Body & Parágrafos

lead

O fundo apresentou retorno de 18,4% no ano, superando o benchmark CDI em 6,2 pontos percentuais.

body

A estratégia combina alocação em renda fixa pós-fixada, multimercado e exposição seletiva a ações de alta liquidez. O comitê de investimentos revisa a composição mensalmente com base nos indicadores macroeconômicos.

small

Rentabilidade passada não garante rentabilidade futura. Leia o prospecto antes de investir.

muted

Última atualização: 21 jan 2026 · Fonte: B3 / CVM

Labels & Overlines

overlineFundações — Tokens de Cor
label
caption* Valores em R$ — carteira consolidada

Code — JetBrains Mono

Dados técnicos, variáveis CSS, tickers, valores numéricos de precisão.

O token --inv-green representa ganho. Use --inv-error para perdas.

Ticker: PETR4 · Preço: R$ 38,42 · Var: +1,24%

Prop as

Sobrescreve o elemento HTML mantendo o estilo da variante.

1// renderiza <h3>
2<Typography variant="h3">Análise de Portfólio</Typography>
3 
4// renderiza <div> com estilo h3
5<Typography variant="h3" as="div">Análise de Portfólio</Typography>
6 
7// code inline dentro de parágrafo
8<Typography variant="code" as="span">PETR4</Typography>

Uso

1import { Typography } from "@/components/ui/typography"
1// Display (Lora)
2<Typography variant="h1">Gestão de Patrimônio</Typography>
3<Typography variant="h2">Análise de Portfólio</Typography>
4 
5// Interface (Geist Sans)
6<Typography variant="lead">Texto introdutório de destaque.</Typography>
7<Typography variant="body">Parágrafo padrão de conteúdo.</Typography>
8<Typography variant="muted">Metadado secundário.</Typography>
9 
10// Data (JetBrains Mono)
11<Typography variant="code">--inv-green</Typography>
12 
13// Labels
14<Typography variant="overline">Fundações</Typography>
15<Typography variant="label">Valor patrimonial</Typography>