DEEVO
Experience the Beat
Guia oficial da identidade visual DEEVO. Tudo que você precisa para representar a marca com consistência e impacto.
Logos
01Os assets primários da marca. Use sempre sobre fundos que garantam contraste e legibilidade.
Logo Principal — Gradiente
Versão principal com gradiente pink→violet. Usar preferencialmente em fundos escuros.
Fundo Claro (usar versão cinza)
Logo Branca
Versão monocromática branca. Ideal para fundos escuros sólidos, fotos e vídeos.
Sobre foto/gradiente
Logo Preta
Versão monocromática preta. Para materiais impressos, fundos brancos e documentos.
Fundo Claro
Logo Cinza
Versão monocromática cinza. Para uso discreto em fundos claros, watermarks e materiais secundários.
Fundo Claro
App Icons
Sistema & Auxiliares
Guia de Uso
Fundos escuros
Use a versão gradiente (preferencial) ou branca.
Fundos claros
Use a versão preta (máximo contraste) ou cinza (mais discreto).
Sobre fotos/vídeos
Use a versão branca com sombra ou overlay escuro.
Evitar
Nunca use a versão gradiente sobre fundos claros. Nunca distorça, rotacione ou altere as cores da logo.
Paleta de Cores
02Clique em qualquer cor para copiar o hex code. A paleta segue o conceito dark-first com acentos vibrantes.
Cores Principais
Superficies & Fundos
Texto
Status & Feedback
Gradientes
03Os gradientes definem a energia visual da DEEVO. Use-os com intenção em CTAs, headings e elementos de destaque.
Primary Brand
Uso principal: progress bars, highlights, acentos
linear-gradient(to right, #ec4899, #8b5cf6)
Hero
Texto hero, headings de impacto
from-pink-500 via-purple-500 to-violet-500
CTA
Botoes primarios, signup, acoes criticas
from-pink-500 to-purple-600
Text Gradient
Classe .text-gradient — headings em auth, onboarding
linear-gradient(to right, #f472b6, #8b5cf6)
Email Header
Barra superior dos emails transacionais
90deg, #ec4899, #a855f7, #6366f1
Tipografia
04Duas famílias tipográficas formam a hierarquia visual: Outfit para impacto e Inter para clareza.
Outfit
Display / Headings
Experience the Beat
Viva a cena musical
Descubra eventos perto de você
Conecte-se com a batida da cidade
CSS
font-family: 'Outfit', sans-serif;
/* h1, h2, h3, h4, .font-display */
Inter
Body / Interface
Plataforma de eventos e experiências
Ingressos digitais com QR Code exclusivo
Compre ingressos em segundos e compartilhe momentos com a comunidade.
A cena musical brasileira precisa de uma plataforma que entenda o ritmo da cultura. DEEVO conecta artistas, produtores, casas de show e fãs em um ecossistema vibrante.
CSS
font-family: 'Inter', sans-serif;
/* body, p, span, labels, inputs */
Escala Tipográfica
Design Tokens
05Tokens que garantem consistência visual em todos os componentes e telas da plataforma.
Border Radius
rounded-xl
0.75rem / 12px
Inputs, botões pequenos
rounded-2xl
1rem / 16px
Cards, botões primários
rounded-3xl
1.5rem / 24px
Cards grandes, modais
rounded-full
9999px
Avatares, pills, badges
Efeitos
Glass
Glassmorphism com blur de fundo para superfícies flutuantes.
bg-opacity: 0.8
backdrop-filter: blur(12px)
border: 1px solid #27272a
Card Hover
Passe o mouse neste card para ver o efeito de elevação com glow rosa.
translateY(-4px)
border: pink-500
shadow: pink glow
HTMX Progress
Barra de progresso fixa no topo durante requisições HTMX.
CSS Custom Properties
:root {
--bg-dark: #09090b; /* zinc-950 — page background */
--card-dark: #121215; /* deeper card surface */
--border-dark: #27272a; /* zinc-800 — borders */
--primary: #ec4899; /* pink-500 — CTA, highlights */
--primary-glow: rgba(236, 72, 153, 0.2);
--accent: #8b5cf6; /* violet-500 — secondary */
}Cores por Perfil
06Cada tipo de usuário tem uma cor distinta para navegação e identificação contextual na plataforma.
Artista
Perfil de artistas e DJs
Produtor
Organizadores de eventos
Venue
Casas de show e locais
Afiliado
Promoters e divulgadores
Componentes
07Exemplos vivos dos componentes padrão da plataforma.
Botões
Badges & Pills
Card Padrão
Título do Card
Passe o mouse para ver o efeito hover com elevação e glow rosa na borda.