Card padrão
Fundo translúcido, borda sutil e brilho no topo. Eleva no hover.
Manual de identidade visual — versão viva, aplicável em produto
Design system Corvus.
Observadora, estratégica e tecnológica: este é o sistema visual que sustenta a marca Corvus em produto, apresentações e materiais impressos — cor, tipografia, componentes e movimento em um só lugar.
0
Cores no sistema
0
Famílias tipográficas
0
Componentes de UI
Workspace Corvus
Painel de identidade da marca
Sistema ativo
Tokens de cor
10
5 primárias + 5 escala
Componentes
32
documentados
Contraste AA
100%
textos validados
Regras prioritárias
O que reforçar em toda aplicação
Night Navy como base de contraste
Fundo · Sempre
Violeta reservado a ação e destaque
Cor · Sempre
Space Grotesk só em títulos
Tipografia · Sempre
Uso do violeta
Contido
Aplicação impressaAprovada
01 · Tipografia
Duas famílias, uma hierarquia clara.
Space Grotesk sustenta o peso técnico dos títulos; Inter garante leitura limpa no corpo do texto, legendas e interfaces. Space Mono aparece pontualmente em dados e tokens.
Uso principal
Space Grotesk
Títulos, chamadas, capas e mensagens de alto impacto. Pesos 300–700.
Aa Bb Cc 0123
Uso de apoio
Inter
Textos, legendas, apresentações, documentos e interfaces. Pesos 300–800.
Aa Bb Cc 0123
Uso técnico
Space Mono
Tokens de cor, dados, legendas técnicas e trechos de código. Pesos 400/700.
#5B1CFF |
font-display: swap
PapelAmostraPesoTamanhoAltura de linhaTracking
H1 / Display
Corvus observa.
500
56–72px
0.95–1.0
-0.03em
H2
Estratégia com clareza
500
40–48px
1.05–1.1
-0.02em
H3
Título de seção
500
28–32px
1.15
-0.015em
H4
Subtítulo de bloco
500
22–24px
1.2
-0.01em
H5
Título menor
500
18–20px
1.3
0em
H6
Rótulo de destaque
600
16px
1.35
0em
Body LG
Texto corrido de destaque, usado em subheads longos.
400
17–18px
1.6
0em
Body
Texto corrido padrão para parágrafos e descrições.
400
15–16px
1.6–1.7
0em
Body SM
Texto de apoio, notas e descrições secundárias.
400
13–14px
1.5
0em
Caption
Legenda técnica — usar apenas quando necessário.
500
11–12px
1.4
0.02em
Label / Overline
Rótulo em versalete
600–700
10–11px
1.4
0.16em
02 · Sistema de cores
Profundidade escura, acento violeta de alta energia.
Night Navy é a base de contraste; o violeta é reservado para ação, destaque e reconhecimento de marca. Clique em qualquer token para copiar o HEX.
Corvus Violet
#5B1CFF
RGB 91 28 255 · CMYK 64 89 0 0
Electric Indigo
#3A0AEF
RGB 58 10 239
Night Navy
#02031A
RGB 2 3 26 · CMYK 92 88 50 76
Graphite Blue
#11152D
RGB 17 21 45
Ice White
#F7F8FF
RGB 247 248 255 · CMYK 3 3 0 0
#F7F8FF
#E8EAF5
#AEB4C5
#11152D
#02031A
#8A66FF
#6E44FF
#5B1CFF
#3A0AEF
#230075
Variantes de opacidade — Corvus Violet
10%
25%
50%
75%
100%
Gradiente institucional
#230075 → #5B1CFF → #8A66FF
Uso em fundos e detalhes de campanha. Evitar em textos longos.
Papéis semânticos
- Primary — ações principais, foco
- Secondary — apoio, hover states
- Accent — badges, links, glow
- Neutral — texto secundário, bordas
- Feedback (sucesso)
- Feedback (erro)
- Feedback (atenção)
- Decorative — fundos, painéis
Uso contextual
- Texto — Ice White sobre Night Navy (padrão); slate-400 para apoio
- Fundo — Night Navy / Graphite Blue como base
- Borda — white/10 em repouso, violeta/30 em hover
- Hover — aumento de opacidade + leve elevação (-translate-y)
- Active — violeta sólido, sombra glow reduzida
- Disabled — opacidade 40%, sem hover, cursor not-allowed
Intenção de contraste
Ice White / Night NavyAAA · 19.4:1
Neutral / Night NavyAA · 7.1:1
Night Navy / Ice WhiteAAA · 19.4:1
White / Corvus VioletAA · 4.7:1
03 · Componentes de UI
Blocos vivos, com movimento e resposta.
Cada componente segue a mesma lógica visual do símbolo: forma simples, espessura consistente e cantos levemente arredondados.
Texto de ajuda abaixo do campo.
Card em destaque
Usado para planos populares, avisos importantes e CTAs internos.
Card com progresso
74%
Aplicação da identidade no site institucional.
CorvusInícioProdutoPreços
Painel "Visão geral" — conteúdo trocado via JS ao clicar nas abas acima.
Painel "Cores" — mesma estrutura de tabs reaproveitada em qualquer seção.
Painel "Tipografia" — troca simples de classes, sem dependências.
Primário
Neutro
Aplicar identidade Corvus?
Esta ação atualiza os tokens de cor e tipografia em todo o produto.
Toggle ilustrativo — o design system Corvus é dark-first, com um único tema institucional.
04 · Iconografia
Forma simples, espessura consistente.
Ícones da linha Solar (via Iconify), traço de 1.5–1.7px, cantos levemente arredondados. Evitar 3D, pictogramas muito detalhados ou espessuras mistas.
05 · Animações
Movimento com propósito, nunca ruído.
Entradas suaves com blur, brilhos respirando, parallax 3D no hero e scroll-reveal via IntersectionObserver — tudo com timing consistente entre 300ms e 900ms.
animationIn
blur(8px)→0 · translateY 30→0
pulse-ring
scale 0.9→1.9 · opacity 0.9→0
glow-breathe
blur 28px→38px · opacity .55→1
float-3d
translateY 0→-14px · rotate .4deg
shimmer-sweep
translateX -150%→150%
progress-shimmer
translateX -100%→100%
gradient-pan
background-position 0→100→0%
tempo|
caret-blink
opacity 1→0 em steps(1)
Tokens de timing e easing
duration-fast 150–200ms
duration-base 300ms
duration-slow 700–900ms
easing ease-out
Consistência visual cria reconhecimento
Aplique o sistema Corvus em cada tela.
Símbolo, violeta institucional, base escura e linguagem objetiva — combinados com contraste, respiro e hierarquia.