Manual de marca
Guía de uso de la marca HoraClara: logotipo, colores institucionales, tipografía, isotipo y aplicaciones en redes sociales.
Logotipo
El logotipo principal combina el isotipo (dos barras verticales) con la tipografía. Se debe usar siempre con espacio de respeto mínimo equivalente a la altura de una barra.
Versión para encabezado (renderizada en vivo)
Tamaño mínimo: 120 px de ancho en pantalla, 30 mm en impresión.
Espacio de respeto: un margen libre equivalente a la altura de una barra vertical (8 px en el header) alrededor de todo el logotipo.
Logo + Nombre
El lockup combina el isotipo a color con el nombre de la marca. Disponible en PNG para uso externo en sitios web, presentaciones y documentos.
Formato: PNG con transparencia, 430 x 96 px (2x). Para incrustar desde otro sitio, usa la URL directa del archivo.
Isotipo
El isotipo son las dos barras verticales (azul y amarillo) que representan los colores de Colombia. Se usa como favicon, ícono de app y avatar reducido.
Colores
Los colores primarios de HoraClara se definen en OKLCh para consistencia perceptual. En modo oscuro, los valores de luminosidad y croma se ajustan automáticamente.
Azul Primario
#2456d3
oklch(0.50 0.20 264)
Barra izquierda del isotipo, acento institucional
Amarillo Secundario
#ffcf00
oklch(0.87 0.20 94)
Barra derecha del isotipo, acento secundario
Rojo Colombia
#CE1126
oklch(0.50 0.22 25)
Corazón colombiano, alertas, destructivo
Background
#F7F7FA
oklch(0.98 0.005 250)
Fondo principal del sitio
Foreground
#1A1A2E
oklch(0.21 0.03 255)
Texto principal, botones primarios
Muted Foreground
#6B6B80
oklch(0.50 0.02 255)
Texto secundario, descripciones
El corazón colombiano usa proporciones de la bandera: amarillo ocupa el 50% superior, azul el 25% central y rojo el 25% inferior.
Modo oscuro: los colores de marca (primary, secondary, muted) se ajustan automáticamente en luminosidad y croma para mantener contraste WCAG AA sobre fondos oscuros. El rojo (#CE1126) del corazón colombiano permanece igual en ambos modos.
Tipografía
HoraClara usa Inter como fuente principal y Geist Mono para código y datos tabulares.
Sans — Inter
Aa Bb Cc 0123
Variable, pesos 400–700. Subsets: latin. Display: swap.
Mono — Geist Mono
Aa Bb Cc 0123
Fuente monoespaciada para código, tablas y datos numéricos.
Gestión de tiempo inteligente
Control de asistencia automático
Recargos nocturnos y dominicales
HoraClara calcula automáticamente las horas extras, recargos nocturnos, dominicales y festivos según la legislación laboral colombiana vigente.
Texto auxiliar para descripciones, etiquetas y metadatos de interfaz.
const recargo = horasExtra * tarifaNocturna
Aplicaciones en redes sociales
Fotos de perfil y banners optimizados para cada plataforma, en variante oscura y clara.
Foto de perfil — 400 x 400 px
Banners por plataforma
LinkedIn (1584 x 396)
Facebook (820 x 312)
X (Twitter) (1500 x 500)
YouTube (2560 x 1440)
Archivos y descargas
Cada archivo vive en una dirección permanente que puedes enlazar directamente. Los que llevan JPG traen la misma imagen en los dos formatos, porque Facebook y varios gestores de páginas rechazan o ennegrecen las imágenes con transparencia.
| Archivo | Tipo | Tamaño | Dirección |
|---|---|---|---|
| Logotipo a color | Logotipo · logo / lockup | 215 x 48 | /logo-color-light.svg |
| Logotipo a color (PNG) | Logotipo · logo / lockup | 430 x 96 | /logo-color-light.png |
| Logotipo para fondo oscuro | Logotipo · logo / lockup | 215 x 48 | /logo-color-dark.svg |
| Logotipo en negro | Logotipo · logo / lockup | 215 x 48 | /logo-black.svg |
| Logotipo en blanco | Logotipo · logo / lockup | 215 x 48 | /logo-white.svg |
| Símbolo en vector | Símbolo · symbol / icon mark | 32 x 32 | /icon.svg |
| Símbolo cuadrado (1024 px) | Símbolo · symbol / icon mark | 1024 x 1024 | /marca/logo-1024x1024.png |
| Ícono 512 px | Ícono · icon / favicon | 512 x 512 | /marca/icono-512x512.png |
| Ícono 192 px | Ícono · icon / favicon | 192 x 192 | /marca/icono-192x192.png |
| Ícono maskable 512 px | Ícono · icon / favicon | 512 x 512 | /marca/icono-maskable-512x512.png |
| Imagen Open Graph (1200 × 630) | Imagen social · social preview | 1200 x 630 | /marca/og-1200x630.png · JPG |
| Foto de perfil — oscura (1024 px) | Foto de perfil · profile picture | 1024 x 1024 | /social-logos/profile-1024x1024.png · JPG |
| Foto de perfil — clara (1024 px) | Foto de perfil · profile picture | 1024 x 1024 | /social-logos/profile-white-1024x1024.png · JPG |
| Foto de perfil — oscura (400 px) | Foto de perfil · profile picture | 400 x 400 | /social-logos/profile-400x400.png · JPG |
| Portada de Facebook | Portada · cover / banner | 820 x 312 | /social-logos/banner-facebook-820x312.png · JPG |
| Portada de LinkedIn | Portada · cover / banner | 1584 x 396 | /social-logos/banner-linkedin-1584x396.png · JPG |
| Portada de X | Portada · cover / banner | 1500 x 500 | /social-logos/banner-x-1500x500.png · JPG |
| Portada de YouTube | Portada · cover / banner | 2560 x 1440 | /social-logos/banner-youtube-2560x1440.png · JPG |
Ficha de marca
Todo lo que hace falta para citar la marca correctamente, en texto plano. Las mismas direcciones están en /llms.txt y en /manifest.webmanifest.
Nombre: HoraClara (una sola palabra, H y C mayúsculas) Sitio: https://horaclara.com Plataforma: https://app.horaclara.com Categoría: software de control de asistencia, turnos y nómina Logotipo (logo / lockup, a color): https://horaclara.com/logo-color-light.svg Logotipo (logo / lockup, fondo oscuro): https://horaclara.com/logo-color-dark.svg Símbolo (symbol / icon mark): https://horaclara.com/icon.svg Símbolo cuadrado (1024x1024): https://horaclara.com/marca/logo-1024x1024.png Imagen social (og:image, 1200x630): https://horaclara.com/marca/og-1200x630.png Colores institucionales: #2456d3 (azul), #ffcf00 (amarillo), #1A1A2E (tinta) Tipografías: Inter (interfaz), Geist Mono (código y datos) Descripción: HoraClara es el software colombiano con el que las pymes registran la asistencia de su personal, programan turnos y calculan horas extras, recargos y deducciones según la legislación laboral vigente.