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.

Explorar componentes Ver paleta cromática

0

Cores no sistema

0

Famílias tipográficas

0

Componentes de UI

Workspace Corvus

Painel de identidade da marca

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

4 regras

Night Navy como base de contraste

Fundo · Sempre

Alta

Violeta reservado a ação e destaque

Cor · Sempre

Normal

Space Grotesk só em títulos

Tipografia · Sempre

Padrão

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 |

Carregamento via Google Fonts (CDN), font-display: swap Pesos: Space Grotesk 300–700 · Inter 300–800 · Space Mono 400/700 Fallback: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
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.

Botões

Primário Secundário Texto (ghost)

Inputs

Texto de ajuda abaixo do campo.

Informe um HEX válido.

Cards

Card padrão

Fundo translúcido, borda sutil e brilho no topo. Eleva no hover.

Destaque

Card em destaque

Usado para planos populares, avisos importantes e CTAs internos.

Card com progresso

74%

Aplicação da identidade no site institucional.

Navbars

Corvus
Painel "Visão geral" — conteúdo trocado via JS ao clicar nas abas acima.

Badges

Primário Neutro Sucesso Atenção Erro Ao vivo v2026.1

Modais

Aplicar identidade Corvus?

Esta ação atualiza os tokens de cor e tipografia em todo o produto.

Alternância de tema

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.

eye
cpu-bolt
shield
widget
graph
bell
search
arrow
calendar
checklist
palette
menu
danger
moon
close
check
Grade base: 24×24px Traço: 1.5–1.7px Cantos levemente arredondados Evitar estilos 3D e mistura de bibliotecas

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.

Baixar diretrizes Voltar ao topo