HeroPruebaDecisión
Sitio todo claro
Ideal para lectura, comparación y flujos largos. Alterna blanco y neutro para marcar capítulos.
Fundamento visual
Infraestructura de alto rendimiento, sin ruido.
Más claridad para construir, operar y crecer con confianza.
Vista operativa Todo operativo
Disponibilidad99,99%Últimos 30 días
- Instancias
- 28
- Regiones
- 4
- Latencia
- 18 ms
Procesamiento agregadoSolicitudes por minuto
Últimas 24 horasRegiones activasCapacidad consolidada
RegiónEstadoLatenciaCapacidad
Miami, US1 Operativo12 ms82%
São Paulo, BR1 Operativo21 ms67%
Chapecó, BR2 Operativo29 ms54%
Guía de composición
Empieza en claro y deja que la interfaz respire. Oscurece solo cuando la historia cambie.
Título y explicación mantienen escala e interlineado cercanos. El color guía la lectura sin apilar voces tipográficas.
Matriz de decisión
Elige la superficie según la función del pliegue.
Si la razón para oscurecer no es concreta, mantén el claro.
SituaciónPliegueRegla de ejecución
Contenido, producto o navegación Claro o neutro
Úsalo como estándar. Conserva el lienzo claro, el texto oscuro y una acción principal.
Visualización densa o prueba local Oscuro contenido
Oscurece solo el panel. Mantén la interfaz interna clara y los íconos claros sobre el fondo oscuro.
Cambio real de contexto narrativo Oscuro integral
Úsalo una sola vez. Vuelve al claro en el siguiente pliegue con la misma alineación y al menos 96 px de respiro.
Tres recetas listas
Arma la secuencia antes de dibujar detalles.
ContextoOperaciónAcción
Secuencia mixta
Usa el oscuro para una prueba decisiva. Repite el rail y un motivo visual para mantener la continuidad.
OfertaPanelSiguiente paso
Claro con foco contenido
Elígelo cuando el medio necesita contraste, pero la página no necesita cambiar de atmósfera.
Dale un trabajo claro a cada capa.
- Usa un medio dominante por pliegue.
- Mantén título y explicación en la misma escala.
- Limita el violeta a dos roles saturados por viewport.
- Usa densidad alta solo dentro de la visualización principal.
No crees atmósfera sin función.
- No pongas dos pliegues oscuros integrales seguidos.
- No uses amarillo fuera del fondo morado oscuro.
- No cambies una prueba por una cuadrícula de tarjetas equivalentes.
- No dejes que los íconos oscuros desaparezcan en superficies oscuras.
Color y contraste
Una paleta que orienta sin disputar la atención.
Las superficies neutras cargan la mayor parte de la experiencia. El violeta señala marca y acción. Cada par de texto, ícono, borde y foco fue definido para los dos temas.
Primario Optidata#8d0de3CTA, foco de marca y estado seleccionado
- Canvas
#f8f7fa--color-canvas - Superficie
#ffffff--color-surface - Superficie sutil
#f2eef5--color-surface-subtle - Texto principal
#201525--color-text-primary - Texto secundario
#584d5e--color-text-secondary - Borde fuerte
#8b7d92--color-border-strong - Primario
#8d0de3--color-primary - Primario 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 de marca
#0b0019--color-brand-ink
Estados semánticos
El color siempre acompaña nombre y mensaje. El amarillo de warning es estado semántico y nunca hace de acento de marca.
- ÉxitoOperación concluida
- AlertaAtención necesaria
- ErrorAcción interrumpida
- InformaciónInformación de contexto
Nube soberana
Infraestructura queno se cae.
Acento de marca
Amarillo solo sobre morado oscuro.
El amarillo Optidata (Pantone 7404 C) aparece como eyebrow, como línea destacada del título y como ícono de sello sobre la rampa Ultravioleta, exactamente como en el hero de la home. Nunca sobre fondo claro, nunca como relleno de bloque, nunca como color de acción.
--color-accentEyebrow, destaque de título e ícono de sello--color-on-accentTexto sobre amarillo pleno, cuando sea inevitable
Superficies permitidas: --color-brand-900, --color-brand-950 y --color-brand-ink.
Cinco sellos (soc, iso-27001, regions, private-cloud, account) tienen variante amarilla en /design/icons/accent, generada por npm run icons:accent, solo para esa superficie.
Tema opcional
Oscuro con límite y función.
Un modo legible para paneles densos, visualizaciones y momentos de foco. La página sigue clara alrededor.
- Canvas
#151018 - Superficie
#1f1823 - Superficie sutil
#29202e - Superficie elevada
#32273a - Texto principal
#f7f2f9 - Texto secundario
#d3c8d7
Clúster GPU
inferencia-br-01
GPU8 x H100Utilización72%RegiónSão Paulo
Tipografía
Manrope, una sola voz.
Una escala corta organiza marketing, producto y documentación. El interlineado se abre a medida que el texto disminuye.
Nube a escala humana
Display
clamp(36px, 3.4vw, 48px)Claridad para operar lo que importa.
Editorial
clamp(28px, 2.6vw, 36px)Infraestructura lista para crecer
Título 1
28pxRendimiento predecible
Título 2
22pxEntorno de producción
Título 3
18pxUna capa de lectura cómoda para introducciones y explicaciones importantes.
Cuerpo grande
18pxTexto estándar para producto, contenido técnico y documentación.
Cuerpo
16pxMetadatos, apoyo y detalles de interfaz.
Cuerpo pequeño
14pxInfraestructura gestionada
Etiqueta
12pxForma y elevación
Geometría suave, jerarquía clara.
Los radios crecen con el tamaño del contenedor. Las sombras describen superposición sin convertir cada tarjeta en un objeto flotante.
Radios
8 a 24 pxcontrol8pxcard12pxcard-lg16pxpanel24pxpill9999px
Elevación
3 niveles- CardSeparación discreta
--shadow-1 - PopoverContexto superpuesto
--shadow-2 - DialogDecisión en primer plano
--shadow-3
Controles en contexto
Objetivos grandes, foco visible y acciones con pesos distintos.
Ritmo y movimiento
Espacio para respirar. Tiempo para entender.
El ritmo usa múltiplos de cuatro. Las transiciones son cortas, estables y respetan la preferencia de movimiento reducido.
Espaciado
4 a 96 px14px28px312px416px524px632px748px864px996px10128px
Movimiento
Pasa el cursor o usa TabEasing estándar: cubic-bezier(0.2, 0.8, 0.2, 1)
Componentes
Primitivas con contratos completos.
Semántica, jerarquía y estados ya forman parte del componente. La composición solo elige el rol correcto para cada contexto.
Button
3 variantes, 3 tamañosEditorialStatement
jerarquía por colorUna afirmación define el foco. Una expresión conduce.
La explicación mantiene la misma escala y reduce el contraste para completar el razonamiento sin crear otra voz.
Tráfico procesado8,4 millones
EstablePico18,2 mil rpmLatencia21 msErrores0,02%
Sistema de íconos
Una familia, dos superficies.
Los 49 SpotIcons comparten la misma geometría, trazo de 1,5 y caja óptica de 46 unidades. Usa la versión clara sobre fondos oscuros y la versión violeta sobre fondos claros.
Biblioteca oficial
49 siluetas normalizadas
Fondo oscuro Fondo claro
- Cómputo
computeOscuroClaro - Almacenamiento
storageOscuroClaro - GPU
gpuOscuroClaro - Inferencia
inferenceOscuroClaro - Nube privada
private-cloudOscuroClaro - Autoservicio
self-serveOscuroClaro - Precio
priceOscuroClaro - Velocidad
speedOscuroClaro - Soporte
supportOscuroClaro - Seguridad
securityOscuroClaro - Regiones
regionsOscuroClaro - SLA
slaOscuroClaro - Cuenta
accountOscuroClaro - Configurar
configureOscuroClaro - Desplegar
deployOscuroClaro - Espacio de trabajo
workspaceOscuroClaro - Almacenamiento de objetos
object-storageOscuroClaro - Backup
backupOscuroClaro - Snapshots
snapshotsOscuroClaro - VPC
vpcOscuroClaro - Balanceador de carga
load-balancerOscuroClaro - IP
ipOscuroClaro - Grupos de seguridad
security-groupsOscuroClaro - DNS
dnsOscuroClaro - Kubernetes
kubernetesOscuroClaro - Base de datos
databaseOscuroClaro - Bare metal
bare-metalOscuroClaro - Stack propio
owned-stackOscuroClaro - Sin lock-in
no-lock-inOscuroClaro - Migración
migrationOscuroClaro - Protección DDoS
anti-ddosOscuroClaro - WAF
wafOscuroClaro - Prueba de intrusión
pentestOscuroClaro - Escaneo de vulnerabilidades
vulnerability-scanOscuroClaro - SOC
socOscuroClaro - Zero Trust
zero-trustOscuroClaro - ISO 27001
iso-27001OscuroClaro - ERP
erpOscuroClaro - Ancho de banda
bandwidthOscuroClaro - Vista de consola
console-viewOscuroClaro - Escala
scaleOscuroClaro - Clave de acceso
access-keyOscuroClaro - Restauración
restoreOscuroClaro - Failover
failoverOscuroClaro - Programación
scheduleOscuroClaro - Artículo
articleOscuroClaro - Video
videoOscuroClaro - MIG
migOscuroClaro - Acceso root
root-accessOscuroClaro
Marca y archivos
Aplica la marca sin improvisar.
Escala proporcionalmente, conserva un área libre equivalente a un círculo del símbolo y nunca agregues contorno, brillo o degradado al logo.
Nombre público: Optidata Design System. La palabra Optidata mantiene siempre la misma grafía.
Descargar guía para máquinas
Logo blancoPara fondos oscurosDescargar SVG
Logo negroPara fondos clarosDescargar SVG- Logo a colorSímbolo violeta con wordmark oscuroDescargar SVG
SímboloUsa currentColor en espacios compactosDescargar SVG
Actualización del clúster
En cursogpu-inferencia-br-01
- Redirigir tráficoConcluido a las 02:08
- Aplicar actualizaciónConcluido a las 02:19
- Validar integridadConcluido a las 02:31
- Retomar capacidadEstimación de 6 minutos