Design system
Styleguide
Paleta
Fundo
--background
Card
--card
Muted
--muted
Accent
--accent
Primária (menta)
--primary
Informação (azul mineral)
--info
Alerta (âmbar)
--warning
Erro
--destructive
Sucesso
--success
Borda
--border
Escuro é o padrão (:root/.dark); html.light vale só no app logado e nesta página. Alterne com o botão no topo — a escolha fica no cookie radap-theme, resolvida por rota em lib/theme.ts.
Escala da primária e gradientes
soft
primary
deep
ink
surface-2
Primária
--grad-primary
Hero
--grad-hero
Card
--grad-card
Vidro
--grad-glass
hatch · tile · glass · card-gradient · hero-gradient
Cards de indicador
Seção
SectionCard com dot ao vivo, eyebrow e ação.
Seção suave
Estado vazio
Ícone em vidro, título curto e uma frase.
Gráficos
Barras
Rosca e anel
- Imagem120
- Áudio80
- Vídeo30
- Documento12
Arco
Cotas e barras segmentadas
IA no mês
US$ 3.20 / US$ 10.00
Armazenamento
860 MB / 1000 MB
acima de 80% fica âmbar
Sem teto
12 / ∞
Tudo em components/charts/*: SVG/CSS puro, server components, cores por token (tone ou --chart-1..5), animação de entrada via animate-draw/animate-grow (desligada com reduced-motion).
Tipografia
Space Grotesk — títulos e interface
Texto corrido em Space Grotesk 400. Acentuação sempre correta: ação, informação, você.
JetBrains Mono — dados, horários, identificadores: 21:30:15 · 5571999999999@s.whatsapp.net
label-caps · rótulos técnicos
text-glow em destaque
Marca
Símbolo
Logo e versão compacta
Balão de conversa com anéis de radar e cunha de varredura. Traço herda a cor do texto (funciona em monocromia); cunha e ponto usam a primária. Geometria única em lib/brand.ts. Área de proteção: metade da largura do símbolo em cada lado. Tamanho mínimo: 16px. Wordmark em Space Grotesk 600 minúsculo, rad em foreground e ap em primária com glow.
Iconografia exclusiva
Radap Signal · 24 ícones originais
Pequenos sinais. Identidade própria.
Curvas abertas, superfícies suaves e pontos de sinal. Uma família desenhada a partir da linguagem do radar.
Painel
Itens
Assistente
Rotinas
Conversas
Projetos
Radar
Conexão
Importar
Armazenamento
Ajuda
Admin
Pessoas
Fila de jobs
Auditoria
Busca
Mais
Inteligência
Áudio
Documento
Arquivo ZIP
Memória
Tema claro
Tema escuro
Passe o mouse para animar. Grade de 24 × 24 · Traço de 1,65 · Temas claro e escuro · Movimento reduzido respeitado. Setas e controles universais continuam usando Lucide.
Ilustrações do produto
Captura
Tudo começa com um sinal.
Radar e conexão: vidro menta, anéis e pequenos pontos de luz.
Conversas
Contexto que fica.
Conversas e ajuda: balões de vidro e cerâmica, ligados pela mesma órbita.
Inteligência
Clareza para o próximo passo.
Itens, rotinas e assistente: ideias que encontram seu lugar.
Memória
Cada detalhe, no seu lugar.
Projetos, importações e armazenamento: uma memória organizada.
Ícone e PWA
icon.svg · 128px
icon.svg · 64px
icon.svg · 32px
maskable · Android
Fonte única em app/icon.svg; npm run icons gera favicon, apple-icon e os PNGs do manifest. Instalável como app (manifest em /manifest.webmanifest).
Componentes
Botões
Badges
Status
Inputs
Progresso
Painel
Painel com glow
Fundo translúcido, borda em fósforo a 14%, blur.
IA e caixa de entrada
Tipos de item
Confiança
Prioridade (Jev)
Parece resolvido (Jev)
Status de execução
Chips de ferramenta (assistente)
Resposta do assistente
assistente
Ficaram duas pendências com você:
- Enviar a proposta para a Ana (#a1b2c3d4)
- Confirmar o horário de quinta
12k → 380 tokens · ~US$ 0,004 · gpt-5-mini
Novos primitivos
Saída de IA usa a mesma linguagem visual da transcrição: borda info/30, fundo info/5, ícone Sparkles. Códigos #xxxxxxxx são links para a mensagem.
Estados interativos
- Hover: fundo accent/60 ou primária/80 em botões.
- Foco: anel ring/50 de 3px, borda ring.
- Ativo: translação de 1px para baixo.
- Desabilitado: opacidade 50% e sem eventos.
- Touch targets mínimos de 44×44px (h-11) em ações principais.
Radar 3D
Na landing (components/landing/landing-radar.tsx) a mesma cena ganha bloom e câmera dirigida por scroll.
Movimento na landing
ScrollReveal
Mesmo tween do Reveal, disparado quando a seção entra na viewport (uma vez). Filhos com data-reveal.
Marquee (animate-marquee)
- Texto
- Áudio
- Imagem
- Vídeo
- Documento
- Figurinha
- Texto
- Áudio
- Imagem
- Vídeo
- Documento
- Figurinha
Conteúdo duplicado, desloca 50%. Máximo de uma faixa por página; para com prefers-reduced-motion.