HeroProvaDecisão
Site todo claro
Ideal para leitura, comparação e fluxos longos. Alterne branco e neutro para marcar capítulos.
Fundação visual
Infraestrutura de alta performance, sem ruído.
Mais clareza para construir, operar e crescer com confiança.
Visão operacional Tudo operacional
Disponibilidade99,99%Últimos 30 dias
- Instâncias
- 28
- Regiões
- 4
- Latência
- 18 ms
Processamento agregadoRequisições por minuto
Últimas 24 horasRegiões ativasCapacidade consolidada
RegiãoEstadoLatênciaCapacidade
Miami, US1 Operacional12 ms82%
São Paulo, BR1 Operacional21 ms67%
Chapecó, BR2 Operacional29 ms54%
Guia de composição
Comece no claro e deixe a interface respirar. Escureça somente quando a história mudar.
Título e explicação mantêm escala e entrelinha próximas. A cor conduz a leitura sem empilhar vozes tipográficas.
Matriz de decisão
Escolha a superfície pela função da dobra.
Se a razão para escurecer não for concreta, mantenha o claro.
SituaçãoDobraRegra de execução
Conteúdo, produto ou navegação Clara ou neutra
Use como padrão. Preserve canvas claro, texto escuro e uma ação principal.
Visualização densa ou prova local Escura contida
Escureça apenas o painel. Mantenha a interface interna clara e os ícones claros sobre o fundo escuro.
Mudança real de contexto narrativo Escura integral
Use uma única vez. Retorne ao claro na dobra seguinte com o mesmo alinhamento e pelo menos 96 px de respiro.
Três receitas prontas
Monte a sequência antes de desenhar detalhes.
ContextoOperaçãoAção
Sequência mista
Use o escuro para uma prova decisiva. Repita o rail e um motivo visual para manter continuidade.
OfertaPainelPróximo passo
Claro com foco contido
Escolha quando a mídia precisa de contraste, mas a página não precisa mudar de atmosfera.
Dê um trabalho claro para cada camada.
- Use uma mídia dominante por dobra.
- Mantenha título e explicação na mesma escala.
- Limite o violeta a dois papéis saturados por viewport.
- Use densidade alta apenas dentro da visualização principal.
Não crie atmosfera sem função.
- Não coloque duas dobras escuras integrais em sequência.
- Não use amarelo fora do fundo roxo escuro.
- Não troque uma prova por uma grade de cards equivalentes.
- Não deixe ícones escuros desaparecerem em superfícies escuras.
Cor e contraste
Uma paleta que orienta sem disputar atenção.
Superfícies neutras carregam a maior parte da experiência. O violeta sinaliza marca e ação. Cada par de texto, ícone, borda e foco foi definido para os dois temas.
Primário Optidata#8d0de3CTA, foco de marca e estado selecionado
- Canvas
#f8f7fa--color-canvas - Superfície
#ffffff--color-surface - Superfície sutil
#f2eef5--color-surface-subtle - Texto principal
#201525--color-text-primary - Texto secundário
#584d5e--color-text-secondary - Borda forte
#8b7d92--color-border-strong - Primário
#8d0de3--color-primary - Primário suave
#f4e9fb--color-primary-soft
- Marca 100
#ecd9ff--color-brand-100 - Marca 200
#d9b3ff--color-brand-200 - Marca 300
#cba5fd--color-brand-300 - Marca 400
#af63fd--color-brand-400 - Marca 600
#8d0de3--color-brand-600 - Marca 900
#3f026a--color-brand-900 - Marca 950
#1e002f--color-brand-950 - Tinta da marca
#0b0019--color-brand-ink
Estados semânticos
Cor sempre acompanha nome e mensagem. O amarelo de warning é estado semântico e nunca faz papel de acento de marca.
- SucessoOperação concluída
- AlertaAtenção necessária
- ErroAção interrompida
- InformaçãoInformação de contexto
Nuvem soberana
Infraestrutura quenão sai do ar.
Acento de marca
Amarelo só sobre roxo escuro.
O amarelo Optidata (Pantone 7404 C) entra como eyebrow, como linha de destaque do título e como ícone de selo sobre a rampa Ultravioleta, exatamente como na hero da home. Nunca em fundo claro, nunca como fundo de bloco, nunca como cor de ação.
--color-accentEyebrow, destaque de título e ícone de selo--color-on-accentTexto sobre amarelo cheio, quando inevitável
Superfícies permitidas: --color-brand-900, --color-brand-950 e --color-brand-ink.
Cinco selos (soc, iso-27001, regions, private-cloud, account) têm variante amarela em /design/icons/accent, gerada por npm run icons:accent, só para essa superfície.
Tema opcional
Escuro com limite e função.
Um modo legível para painéis densos, visualizações e momentos de foco. A página continua clara ao redor.
- Canvas
#151018 - Superfície
#1f1823 - Superfície sutil
#29202e - Superfície elevada
#32273a - Texto principal
#f7f2f9 - Texto secundário
#d3c8d7
Cluster GPU
inferencia-br-01
GPU8 x H100Utilização72%RegiãoSão Paulo
Tipografia
Manrope, uma voz única.
Uma escala curta organiza marketing, produto e documentação. A entrelinha abre conforme o texto diminui.
Nuvem em escala humana
Display
clamp(36px, 3.4vw, 48px)Clareza para operar o que importa.
Editorial
clamp(28px, 2.6vw, 36px)Infraestrutura pronta para crescer
Título 1
28pxPerformance previsível
Título 2
22pxAmbiente de produção
Título 3
18pxUma camada de leitura confortável para introduções e explicações importantes.
Corpo grande
18pxTexto padrão para produto, conteúdo técnico e documentação.
Corpo
16pxMetadados, apoio e detalhes de interface.
Corpo pequeno
14pxInfraestrutura gerenciada
Rótulo
12pxForma e elevação
Geometria macia, hierarquia clara.
Raios crescem com o tamanho do container. Sombras descrevem sobreposição sem transformar todo card em objeto flutuante.
Raios
8 a 24 pxcontrol8pxcard12pxcard-lg16pxpanel24pxpill9999px
Elevação
3 níveis- CardSeparação discreta
--shadow-1 - PopoverContexto sobreposto
--shadow-2 - DialogDecisão em primeiro plano
--shadow-3
Controles em contexto
Alvos grandes, foco visível e ações com pesos diferentes.
Ritmo e movimento
Espaço para respirar. Tempo para entender.
O ritmo usa múltiplos de quatro. Transições são curtas, estáveis e respeitam a preferência por movimento reduzido.
Espaçamento
4 a 96 px14px28px312px416px524px632px748px864px996px10128px
Movimento
Passe o cursor ou use TabEasing padrão: cubic-bezier(0.2, 0.8, 0.2, 1)
Componentes
Primitivas com contratos completos.
Semântica, hierarquia e estados já fazem parte do componente. A composição escolhe apenas o papel certo para cada contexto.
Button
3 variantes, 3 tamanhosEditorialStatement
hierarquia por corUma afirmação define o foco. Uma expressão conduz.
A explicação mantém a mesma escala e reduz o contraste para completar o raciocínio sem criar outra voz.
Tráfego processado8,4 milhões
EstávelPico18,2 mil rpmLatência21 msErros0,02%
Sistema de ícones
Uma família, duas superfícies.
Os 49 SpotIcons compartilham a mesma geometria, traço de 1,5 e caixa óptica de 46 unidades. Use a versão clara em fundos escuros e a versão violeta em fundos claros.
Biblioteca oficial
49 silhuetas normalizadas
Fundo escuro Fundo claro
- Computação
computeEscuroClaro - Armazenamento
storageEscuroClaro - GPU
gpuEscuroClaro - Inferência
inferenceEscuroClaro - Nuvem privada
private-cloudEscuroClaro - Autosserviço
self-serveEscuroClaro - Preço
priceEscuroClaro - Velocidade
speedEscuroClaro - Suporte
supportEscuroClaro - Segurança
securityEscuroClaro - Regiões
regionsEscuroClaro - SLA
slaEscuroClaro - Conta
accountEscuroClaro - Configurar
configureEscuroClaro - Implantar
deployEscuroClaro - Ambiente de trabalho
workspaceEscuroClaro - Armazenamento de objetos
object-storageEscuroClaro - Backup
backupEscuroClaro - Snapshots
snapshotsEscuroClaro - VPC
vpcEscuroClaro - Balanceador de carga
load-balancerEscuroClaro - IP
ipEscuroClaro - Grupos de segurança
security-groupsEscuroClaro - DNS
dnsEscuroClaro - Kubernetes
kubernetesEscuroClaro - Banco de dados
databaseEscuroClaro - Bare metal
bare-metalEscuroClaro - Pilha própria
owned-stackEscuroClaro - Sem lock-in
no-lock-inEscuroClaro - Migração
migrationEscuroClaro - Proteção DDoS
anti-ddosEscuroClaro - WAF
wafEscuroClaro - Teste de invasão
pentestEscuroClaro - Varredura de vulnerabilidades
vulnerability-scanEscuroClaro - SOC
socEscuroClaro - Zero Trust
zero-trustEscuroClaro - ISO 27001
iso-27001EscuroClaro - ERP
erpEscuroClaro - Largura de banda
bandwidthEscuroClaro - Visão do console
console-viewEscuroClaro - Escala
scaleEscuroClaro - Chave de acesso
access-keyEscuroClaro - Restauração
restoreEscuroClaro - Failover
failoverEscuroClaro - Agendamento
scheduleEscuroClaro - Artigo
articleEscuroClaro - Vídeo
videoEscuroClaro - MIG
migEscuroClaro - Acesso root
root-accessEscuroClaro
Marca e arquivos
Aplique a marca sem improviso.
Escale proporcionalmente, preserve uma área livre equivalente a um círculo do símbolo e nunca acrescente contorno, brilho ou gradiente ao logo.
Nome público: Optidata Design System. A palavra Optidata mantém sempre a mesma grafia.
Baixar guia para máquinas
Logo brancoPara fundos escurosBaixar SVG
Logo pretoPara fundos clarosBaixar SVG- Logo coloridoSímbolo violeta com wordmark escuroBaixar SVG
SímboloUsa currentColor em espaços compactosBaixar SVG
Atualização do cluster
Em andamentogpu-inferencia-br-01
- Redirecionar tráfegoConcluído às 02:08
- Aplicar atualizaçãoConcluído às 02:19
- Validar integridadeConcluído às 02:31
- Retomar capacidadeEstimativa de 6 minutos