VIDORA DESIGN SYSTEM v1.0

Guia de Identidade Visual

Este guia padroniza os fundamentos visuais, tokens de cor, tipografia e componentes de interface do Vidora. A estética do projeto combina modernismo técnico, minimalismo escuro (*Dark Mode* de alta precisão), efeitos de profundidade com *Glassmorphism* e acentos energéticos em vermelho rubi.

1. Logotipo & Símbolo 2. Cores & Tokens 3. Tipografia 4. Componentes UI 5. Snippets Rápidos

#1 Logotipo e Símbolo da Marca

O símbolo principal é o cubo estilizado com cantos arredondados, gradiente rubi carmesim e o glifo tipográfico "V".

Principal (Fundo Escuro)
V
Vidora

Aplicação padrão em todas as interfaces web, dashboards e marketing institucional.

Símbolo Isolado (Favicon / App Icon)
V
V
V

Utilizado como favicon de navegador, ícone de dock/aplicativo e avatar de containers.

Monocromático (White on Black)
V
Vidora

Para materiais impressos de tinta única, documentação monocromática ou terminais CLI.

rule Regras de Construção e Uso:
✓ Área de Respiro Deixe pelo menos 50% da largura do símbolo como margem de segurança ao redor do logotipo.
✓ Tamanho Mínimo Digital: 24px de altura. Impresso: 8mm. Menor que isso, utilize apenas o símbolo "V".
✗ Não Distorcer Nunca estique, incline, modifique a proporção 1:1 do símbolo ou altere a fonte da palavra Vidora.
✗ Cores Não Oficiais Não aplique gradientes de outras cores (ex: azul, verde) no símbolo principal da marca.

#2 Paleta de Cores & Design Tokens

Clique em qualquer amostra de cor para copiar seu valor HEX para a área de transferência.

Cores da Marca (Crimson & Ruby)

Brand Red #EF4444 Ação / CTA / Highlights
Crimson Base #DC2626 Botão Principal / Gradiente
Deep Ruby #B91C1C Fim do Gradiente / Sombra
Crimson Glow #7F1D1D Halos e Luzes Ambientais
Dark Void #450A0A Glows Profundos de Fundo

Superfícies & Escala Neutra (Dark Canvas)

Canvas Base #0A0A0A neutral-950
Surface Card #171717 neutral-900
Border / Nav #262626 neutral-800
Border Focus #404040 neutral-700
Muted Text #A3A3A3 neutral-400
Primary Text #F5F5F5 neutral-100

Cores Semânticas de Sistema & Prioridades

Success / Online #10B981 (emerald-500) Status de saúde da API, job concluído
Warning / Processing #F59E0B (amber-500) Transcodificação ativa, alerta de processamento
Normal Priority / Info #6366F1 (indigo-500) Cota 75% standard, metadados HLS
High Priority / Error #EF4444 (red-500) Fila rápida prioritária, erros

#3 Tipografia Oficial

Duas famílias complementares atendem à legibilidade de interfaces modernas e precisão técnica.

Família Principal (UI & Títulos) Inter
Google Fonts

Projetada para telas digitais com excelente legibilidade em tamanhos pequenos e alta personalidade em títulos em negrito (*Black 900*).

Inter Black 900
Títulos de hero, logotipo e estatísticas
Inter Bold 700
Cabeçalhos de seções, modais e botões primários
Inter Medium 500
Labels de formulários, abas e navegação
Inter Regular 400
Textos corridos, parágrafos de descrição e notas
Família Técnica (Dados & Código) JetBrains Mono
Google Fonts

Utilizada exclusivamente para dados técnicos: IDs de jobs, hashes MD5/ETag, tempos de execução, bitrates, durações e URLs S3.

job_15caad82-1202-45a5-94a9-59e0d3dcd028
Job IDs e Chaves de Upload
4500 kbps • 1080p60 • H.264 / AAC
Metadados de Transcodificação
00:04:18 / 00:12:00 [Chunk 3/8]
Temporizadores Shaka Player e Fatias
video.tasks.standard [Priority: 9]
Filas RabbitMQ e Cotas de Workers

#4 Componentes de Interface Padrão

Exemplos reais dos blocos construtivos utilizados em todas as páginas do Vidora.

1. Botões de Ação

2. Badges Semânticos e Indicadores

API Online 🔥 Alta Prioridade (Cota 75%) ⚡ Prioridade Padrão 🌱 Baixa Prioridade (Cota 25%) 4K 2160p 1080p 720p

3. Seletores Segmentados (Modo de Operação)

4. Barra de Progresso de Upload e Transcoding

Progresso de Transcodificação (FFmpeg) 75% Concluído

#5 Snippets Prontos para Uso

Copie os blocos de código com as classes oficiais do Tailwind prontas para colar nas suas páginas.

Card Glassmorphism 
<div class="bg-neutral-900/65 backdrop-blur-xl border border-white/10 rounded-2xl p-6 shadow-xl">
  <h3 class="text-lg font-bold text-white">Título do Card</h3>
  <p class="text-sm text-neutral-400 mt-1">Conteúdo com profundidade elegante.</p>
</div>
Botão Primário CTA 
<button class="px-5 py-2.5 rounded-xl text-xs font-bold bg-red-600 hover:bg-red-500 text-white shadow-lg shadow-red-600/30 hover:scale-[1.02] active:scale-[0.98] transition flex items-center gap-2">
  <span>Ação Principal</span>
</button>
Copiado com sucesso!