Zeum. Design System
Tokens de cor, tipografia, componentes e classes utilitárias do site institucional.
Cores
Todas as cores são definidas como variáveis CSS em globals.css e expostas como tokens Tailwind via @theme inline. No Tailwind, use como bg-[var(--token)], text-[var(--token)] etc.
bg-base
#0a0a0a
--bg-base
bg-elevated
#111111
--bg-elevated
bg-card
#161616
--bg-card
border
#232323
--border
border-strong
#2e2e2e
--border-strong
text-primary
#f5f5f5
--text-primary
text-muted
#b3b3b3
--text-muted
text-subtle
#909090
--text-subtle
accent
#e8b304
--accent
accent-hover
#f5c01a
--accent-hover
accent-soft
rgba(232,179,4,.12)
--accent-soft
Tipografia
Fonte padrão: Geist (variável --font-geist-sans), carregada via next/font/google com subsets latin e display swap.
Gestão em Tecnologia
Soluções para o negócio
Heading de seção
Sub-heading
Destaque de parágrafo
Corpo de texto padrão. Utilizado em parágrafos, descrições e conteúdo corrido.
Texto secundário, labels e metadados.
Label de categoria
Classe especial
text-gradient-accent — aplica gradiente vertical de branco para cinza médio usando background-clip: text. Usado em headings de destaque.
Heading com gradiente
Botões
Não há um componente de botão compartilhado — os estilos são aplicados diretamente via Tailwind. As quatro variantes abaixo cobrem os casos de uso do site.
| Variante | Classes principais |
|---|---|
| Primário | bg-[var(--accent)] text-black hover:bg-[var(--accent-hover)] |
| Secundário | border border-[var(--border-strong)] hover:border-[var(--accent)] hover:text-[var(--accent)] |
| Ghost | text-[var(--text-muted)] hover:text-white |
| Suave | bg-[var(--accent-soft)] text-[var(--accent)] hover:bg-[var(--accent)]/20 |
Superfícies
Três níveis de fundo compõem a hierarquia visual de profundidade. Cada camada é levemente mais clara que a anterior para criar distinção sem alto contraste.
--bg-base
Base
#0a0a0a
Fundo da página
--bg-elevated
Elevated
#111111
Seções e navbar
--bg-card
Card
#161616
Cards e tabelas
Bordas & Raios
Tokens de borda
--border · #232323
Borda padrão — separadores e cards
--border-strong · #2e2e2e
Borda forte — botões secundários
--accent · #e8b304
Borda de destaque — hover e foco
--accent-soft · rgba(232,179,4,.12)
Fundo suave dourado — badges e chips
Escala de raios
Classes Utilitárias
Classes globais definidas em globals.css que encapsulam efeitos visuais reutilizáveis no site.
bg-grid
Grade de linhas finas com máscara radial central. Aplicado como camada absolutamente posicionada sobre o fundo de seções.
bg-radial-accent
Gradiente radial dourado que parte do topo. Geralmente aplicado com opacity-40 e pointer-events-none.
grid-flow
Contêiner de partículas animadas que percorrem a grade — linhas horizontais (.grid-flow-h) e verticais (.grid-flow-v) com brilho dourado. Animação desativada em prefers-reduced-motion.
marquee-track + marquee-mask
Carrossel infinito horizontal. O marquee-track anima em 40 s linear; o marquee-mask aplica fade nas bordas. O conteúdo deve ser duplicado para o loop ser contínuo.
Espaçamento & Layout
Convenções de espaçamento e largura usadas nas páginas do site. Não há um sistema de tokens de espaçamento customizado — usa-se a escala padrão do Tailwind.
| Uso | Valor / Classes |
|---|---|
| Container horizontal | container mx-auto px-6 |
| Padding topo da página | pt-32 (128 px) |
| Padding base da página | pb-24 (96 px) |
| Espaço entre seções | mt-12 (48 px) |
| Altura da Navbar | h-16 (64 px) |
| Largura máxima (artigo) | max-w-3xl |
| Largura máxima (amplo) | max-w-5xl |