Ouro sobre navy
A versão principal. Monograma dourado sobre o breu do templo — o uso padrão da marca.
Sistema visual oficial · v1.0 · 2026
O design do INDEX,
em um só lugar
Cores, tipografia, marca, componentes e movimento — reunidos, documentados e prontos pra copiar. Da página de vendas ao post no Instagram, uma só voz visual.
INDEX
19
Cores / tokens
2
Fontes
6
Animações vivas
100%
Copiável
Cores
Navy, ouro e reverência
Extraídas da fonte da verdade — tailwind.config.ts + index.css. Clique em qualquer cor para copiar o HEX.
Navy — a base
Ouro — a chama
Neutros & semânticos
Tipografia
Duas vozes do INDEX
A Archivo dá a estrutura; a Spectral traz o tom devocional. Clique num card para copiar a font-family.
Archivo
Display · InterfaceAa
400500600700800900
Áudio que edifica a família cristã. Clareza, firmeza e presença em cada título.
Spectral
Serifada · LeituraAa
400500600Itálica
"Aquietai-vos e sabei que eu sou Deus." A serifa que sussurra e contempla.
Display / 67pxO silêncio falaH1 / 48pxTítulo de seçãoH2 / 28pxSubtítulo forteH3 / 20pxChamada de blocoCorpo / 17pxTexto de leitura em Spectral, sereno e confortável.Marca
O símbolo em cada contexto
Passe o mouse (ou toque) para revelar cada tratamento da marca.
Navy sobre marfim
Versão monocromática navy para fundos claros — papelaria, documentos e impressos.
Marca sobre ouro
Para selos, botões e destaques nobres. Sempre o monograma navy sobre o dourado sólido.
Selo Membro Fundador
Reservado a quem entrou na fundação do INDEX. Nunca alterar suas cores.
Componentes
Peças prontas
Réplica dos tokens de button.tsx e badge.tsx. Clique num elemento para copiar a marcação.
Botões
Badges & Selos
Novo
Categoria
Rascunho
Expirado
★ Membro Fundador
Campos
Cards & Vidro
✝
Em destaque
Card com sheen
♪
Audiolivro
Card padrão
☩
Meditação
Card padrão
Painel de vidro (glass-navy)
Superfície translúcida com desfoque e borda dourada — para menus, modais e destaques flutuantes.
Movimento
O sistema respira
As animações vivas do INDEX — do index.css. Clique num card para copiar o CSS. A própria página usa auroras, spotlight, magnetismo e reveal.
INDEX
Shimmer dourado
.text-shiny-goldSheen diagonal
.card-sheenDisco (vinil)
.disc-spinChama da vela
.ac-flameÁudio que edifica · Áudio que edifica ·
Marquee
.marquee-trackBrilho do selo
.seal-shineForma & Elevação
Raios & sombras
Cantos suaves e luz dourada dão o acabamento. Clique para copiar cada token.
Radius · lg
0.75rem · --radiusRadius · md
calc(var(--radius) - 2px)Radius · full
999px · pílulasSombra · ambient
0 12px 32pxBrilho · glow
0 0 12px ouroBrilho · glow-sm
0 0 8px ouroComece a usar
Uma só voz visual, em qualquer peça
Copie os tokens direto daqui ou leve a paleta inteira pra sua próxima landing page, post ou tela do app.