Colores Corporativos
Descripción: Paleta de colores oficial de COOTRAVIR C.T.A. Cada color tiene un propósito específico y transmite valores de confianza, seguridad y profesionalismo. Los colores primarios establecen la identidad visual, mientras que los secundarios complementan y añaden versatilidad.
Filosofía de Colores
Azul COOTRAVIR
El azul es un azul oscuro asociado con la confianza, la seguridad y la estabilidad. Representa la seriedad y profesionalismo de nuestros servicios de seguridad privada.
Gris Claro
En cuanto al gris claro, es un color neutral y versátil que funciona bien como fondo para destacar otros elementos visuales. Además, su tono gris claro transmite una sensación de elegancia y sofisticación.
Los colores secundarios nos ayudarán a complementar los colores primarios y añadir más versatilidad a la paleta de colores.
Azul COOTRAVIR
Color principal de marca
Gris Claro
Color de fondo neutro
Azul Claro
Color de acento
Dorado COOTRAVIR
Color de destacado
Éxito
#22c55e
Advertencia
#eab308
Error
#ef4444
Información
#3b82f6
Casos de Uso Recomendados
Mejores Prácticas
Usar máximo 3 colores principales por diseño
Mantener consistencia en toda la aplicación
Asegurar contraste adecuado para accesibilidad
Reservar dorado para elementos importantes
Tipografía
Descripción: Sistema tipográfico completo con jerarquías de texto, tamaños, pesos y espaciado. Incluye estilos para títulos, párrafos, etiquetas y más. Base fundamental para la comunicación textual efectiva.
.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl
.text-5xl
text-left - Alineación izquierda
Este texto está alineado a la izquierda. Es la alineación más común para párrafos y contenido general, ya que facilita la lectura en idiomas que se leen de izquierda a derecha.
text-center - Alineación centrada
Este texto está centrado. Se usa comúnmente para títulos, citas y elementos que necesitan destacar visualmente.
text-right - Alineación derecha
Este texto está alineado a la derecha. Útil para números, fechas y elementos que requieren alineación específica.
Colores Principales
text-foreground - Texto principal
text-foreground-secondary - Texto secundario
text-foreground-tertiary - Texto terciario
text-foreground-inverse - Texto inverso
Colores de Estado
text-status-success - Éxito
text-status-warning - Advertencia
text-status-error - Error
text-status-info - Información
Artículo de Noticia
Incidente de Seguridad Resuelto
Publicado el 15 de marzo de 2024
El equipo de seguridad de COOTRAVIR resolvió exitosamente un incidente menor en las instalaciones del cliente. La respuesta fue inmediata y eficiente, demostrando la profesionalidad de nuestro personal.
El incidente fue reportado a las autoridades correspondientes y se mantiene un seguimiento continuo.
Reporte de Patrullaje
Plus Jakarta Sans - Fuente Principal
Plus Jakarta Sans es una fuente que tiene un diseño limpio y moderno, ideal para ser legible en cualquier tamaño. Incluye caracteres alternativos con tres conjuntos estilísticos: Lancip, Lurus y Lingkar, agregando diversidad y singularidad a la fuente.
Plus Jakarta Sans (Regular)
Plus Jakarta Sans (Semi Bold)
Plus Jakarta Sans (Extra Bold)
Fira Code - Fuente Monoespaciada
Fuente para código, números y datos técnicos. Todas las letras tienen el mismo ancho para mejor alineación. Ideal para mostrar información técnica, IDs de reportes y datos estructurados.
Casos de Uso Recomendados
Títulos Principales
Usar tamaños grandes para máximo impacto
Subtítulos
Usar tamaños medianos para jerarquía clara
Texto del Cuerpo
Usar tamaño base para lectura cómoda
Datos Técnicos
Usar Fira Code para IDs y códigos
Mejores Prácticas
Mantener consistencia en los tamaños de fuente
Usar jerarquía clara de tamaños
Asegurar contraste adecuado para legibilidad
Usar tamaños grandes para elementos críticos
Usar Fira Code solo para datos técnicos
Componentes Base
Descripción: Botones para acciones del usuario. Incluye variantes de color y tamaño. Perfectos para formularios, navegación y acciones principales.
Botón Primario
Botón Secundario
Botón de Acento
Botón Destructivo
Botón Outline
Botón Ghost
Contenido arriba
Contenido abajo
Formularios y Entradas
Descripción: Componentes para captura de datos del usuario. Incluye inputs, selects, checkboxes, y más. Esenciales para formularios de registro, configuración y reportes.
Visualización de Datos
Descripción: Componentes para mostrar información de manera organizada. Incluye tablas, tarjetas, acordeones y gráficos. Perfectos para reportes de seguridad, listas de personal y estadísticas.
| Nombre | Estado | Acciones | |
|---|---|---|---|
| Juan Pérez | juan@ejemplo.com | Activo | |
| María García | maria@ejemplo.com | Pendiente |
Lista de Usuarios
Tarjeta de Información
Descripción de la tarjeta
Contenido de la tarjeta con información relevante.
Estadísticas
Datos del sistema
Usuarios activos
Acciones
Opciones disponibles
Esta es la información detallada del sistema de seguridad COOTRAVIR. Incluye estadísticas, configuraciones y estado actual de todos los módulos.
Configuración avanzada de parámetros de seguridad, protocolos de acceso y políticas de la organización.
Gráfico de Estadísticas
Datos del último mes
Área para gráfico
Integrar con librería de gráficos
No hay datos disponibles
No se encontraron registros que coincidan con los criterios de búsqueda.
Layout y Contenedores
Descripción: Componentes para estructurar el contenido de la página. Incluye sistemas de grid, contenedores flexibles, modales y drawers. Base fundamental para el diseño responsive y organizado.
Sección de contenido
Contenido de la sección con espaciado adecuado.
Contenido de Tab 1
Este es el contenido de la primera pestaña.
Contenido con scroll
Línea 2
Línea 3
Línea 4
Línea 5
Línea 6
Línea 7
Línea 8
Línea 9
Línea 10
Feedback / Interacción
Descripción: Componentes para comunicar estados y acciones al usuario. Incluye notificaciones, alertas, confirmaciones y efectos de carga. Esenciales para una buena experiencia de usuario.
Contenido con efecto shimmer
Este contenido tiene un efecto de brillo que se mueve.
Usuario / Perfil
Descripción: Componentes relacionados con usuarios y perfiles. Incluye tarjetas de usuario, formularios de login/registro y recuperación de contraseña. Esenciales para la gestión de usuarios y autenticación.
Juan Pérez
Administrador del Sistema
Iniciar Sesión
Accede a tu cuenta de COOTRAVIR