Brand & Design System
Identidad visual
Totesito
Totesito
Guía completa de colores, tipografía y componentes para el diseño de dashboards y plataformas de evaluación de personal.
Paleta de colores
Extraída directamente del logo de Totesito. El naranja es el color de marca principal; el azul aporta estructura y confianza; el ámbar añade calidez y destaca información relevante.
Primarios
✓
Naranja Totesito
#FF6B1A
CTAs · botones primarios · marca
✓
Azul Profundo
#0055B3
Navbar · headers · estructura
✓
Ámbar Solar
#FFB347
Badges · highlights · notificaciones
Secundarios
Naranja Suave
#FF9A5C
Hover · estados activos
Azul Juvenil
#3380D4
Links · elementos secundarios
Melocotón Suave
#FFF3E5
Fondos de tarjeta cálidos
Cielo Pálido
#E8F0FB
Fondos de sección alternativos
Funcionales
Verde Éxito
#1ECC8B
Completado · aprobado · OK
Rojo Alerta
#F0453A
Errores · alertas · eliminar
Gris Neutro
#B4B2A9
Bordes · disabled · metadata
Grafito
#2C2C2A
Texto body · contenido largo
Modo oscuro — fondos
Navy Page
#0D1B2E
Fondo principal oscuro
Navy Surface
#162236
Tarjetas y paneles oscuros
Navy Deep
#050E1A
Navbar y sidebars en oscuro
Navy Border
#1E3A5C
Bordes en modo oscuro
Tipografía
Tres fuentes complementarias: una serif elegante para titulares de impacto, una sans geométrica para toda la interfaz, y una sans neutral y legible para el contenido largo.
Display · Branding
DM Serif Display
Titulares hero, H1 de sección
Aa Bb Cc
Evaluaciones
Regular · Italic
Google Fonts: DM Serif Display
UI · Interface
Plus Jakarta Sans
Botones, labels, KPIs, subtítulos
Aa Bb Cc
87.4%
400 · 500 · 600 · 700
Google Fonts: Plus Jakarta Sans
Body · Lectura
DM Sans
Párrafos, descripciones, metadatos
Aa Bb Cc
El colaborador completó
su evaluación del período.
su evaluación del período.
300 · 400 · 500
Google Fonts: DM Sans
/* Google Fonts — pegar en <head> */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Sans:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
Light & Dark mode
El modo oscuro usa una familia de azules navy profundos como base. El naranja y el ámbar mantienen su identidad; el texto claro y los bordes sutiles dan la legibilidad necesaria.
Modo claro
Rendimiento del equipo
Visualiza los resultados del período de evaluación de cada colaborador.
Completado
En revisión
Modo oscuro
Rendimiento del equipo
Visualiza los resultados del período de evaluación de cada colaborador.
Completado
En revisión
| Variable CSS | Modo claro | Modo oscuro | Uso |
|---|---|---|---|
| --color-bg-page | #F5F8FF | #0D1B2E | Fondo de página |
| --color-bg-surface | #FFFFFF | #162236 | Tarjetas / paneles |
| --color-text-primary | #1A2E4A | #E8F0FB | Texto principal |
| --color-text-body | #3D4A5C | #A8C0DC | Párrafos |
| --color-text-muted | #7A8A9A | #5C7A9E | Metadatos / captions |
| --color-border-default | #D0DCF0 | #1E3A5C | Bordes de tarjeta |
| --color-brand-orange | #FF6B1A — igual en ambos modos | CTA principal | |
/* Activar modo oscuro en CSS */
/* Opción A: automático según sistema */
@media (prefers-color-scheme: dark) {
:root { --color-bg-page: #0D1B2E; /* ... */ }
}
/* Opción B: toggle manual con data-theme */
[data-theme="dark"] {
--color-bg-page: #0D1B2E;
--color-bg-surface: #162236;
--color-text-primary: #E8F0FB;
}
/* Activar en JS: */
document.documentElement.setAttribute('data-theme', 'dark');
Botones
Jerarquía clara: primario en naranja para la acción más importante de cada pantalla, secundario en azul para acciones alternativas, ghost para acciones terciarias.
Variantes de botón
Guardar evaluación
Ver detalle
Cancelar
Eliminar
Tamaño pequeño (acciones en tabla / tarjeta)
Aprobar
Revisar
Ver más
| Variante | Fondo | Texto | Hover | Uso |
|---|---|---|---|---|
| btn-primary | #FF6B1A | #FFFFFF | #FF9A5C | Acción principal de pantalla |
| btn-secondary | Transparente | #0055B3 | bg #0055B3 / text #fff | Acción alternativa |
| btn-ghost | Transparente | #7A8A9A | bg #F5F8FF | Cancelar, cerrar, volver |
| btn-danger | #F0453A | #FFFFFF | opacity .85 | Eliminar, acción destructiva |
Badges & estados
Usados para mostrar el estado de evaluaciones, niveles de rendimiento y categorías. Siempre en tipografía Plus Jakarta Sans 600, UPPERCASE, con letter-spacing amplio.
Todos los badges disponibles
Completado
En revisión
Rechazado
Pendiente
En progreso
Archivado
Dashboard en modo oscuro
Así se ve la paleta y tipografía aplicada en un dashboard real de evaluaciones de personal.
Totesito
Dashboard
Evaluaciones
Equipos
Reportes
Empleados evaluados
142
+12 este mes
Promedio general
87.4%
+3.2% vs anterior
Evaluaciones activas
28
8 por vencer
Últimas evaluaciones
Carlos Mendoza — Ventas
9.2
Completado
Laura Quispe — Operaciones
7.8
Pendiente
Miguel Torres — TI
8.5
Completado
Tokens CSS completos
Copiar el archivo tokens.css al proyecto e importarlo como primer stylesheet. Todas las variables siguen el prefijo --color- y --font-.
| Token | Valor | Uso |
|---|---|---|
| --color-brand-orange | #FF6B1A | CTA, botones primarios, marca |
| --color-brand-orange-soft | #FF9A5C | Hover de botón primario |
| --color-brand-blue | #0055B3 | Navbar, headers, botón secundario |
| --color-brand-blue-mid | #3380D4 | Links, elementos secundarios |
| --color-brand-amber | #FFB347 | Badges, advertencias, highlights |
| --color-bg-page | #F5F8FF | Fondo de página (modo claro) |
| --color-bg-surface | #FFFFFF | Tarjetas y paneles (modo claro) |
| --color-text-primary | #1A2E4A | Texto principal (modo claro) |
| --color-text-body | #3D4A5C | Párrafos (modo claro) |
| --color-text-muted | #7A8A9A | Metadatos, captions |
| --color-border-default | #D0DCF0 | Bordes de tarjeta (modo claro) |
| --color-success | #1ECC8B | Completado, aprobado |
| --color-danger | #F0453A | Error, eliminar, alerta |
| --font-display | 'DM Serif Display', Georgia, serif | |
| --font-ui | 'Plus Jakarta Sans', system-ui, sans-serif | |
| --font-body | 'DM Sans', system-ui, sans-serif | |
| --text-hero | 2.25rem (36px) | Titular hero — DM Serif Display |
| --text-h1 | 1.5rem (24px) | H1 de sección — Jakarta Sans 700 |
| --text-kpi | 1.75rem (28px) | Valor de métrica — Jakarta Sans 700 |
| --radius-lg | 12px | Tarjetas y paneles |
| --radius-pill | 9999px | Badges, chips, tags |
Qué hacer y qué evitar
Usar naranja solo para el CTA principal
Un solo botón naranja por pantalla. Si hay dos acciones, la secundaria va en azul o ghost.
No usar naranja en texto largo
El naranja es solo para botones, badges y acentos. El texto de párrafos siempre en grafito o azul oscuro.
DM Serif Display solo en titulares
Reservar la fuente serif para hero titles y H1 de sección. El resto de la UI usa Jakarta Sans o DM Sans.
No mezclar fondos navy con modo claro
Los fondos #0D1B2E y #162236 son exclusivos del modo oscuro. En modo claro, usar #F5F8FF y #FFFFFF.
Usar tokens CSS siempre
Nunca hardcodear colores en los componentes. Usar siempre
var(--color-brand-orange) para garantizar el modo oscuro.No usar más de 3 colores por pantalla
Naranja + Azul + Neutro. Añadir ámbar solo cuando hay una notificación o badge de advertencia activo.
Entregables para el equipo
| Archivo | Formato | Descripción |
|---|---|---|
| tokens.css | CSS | Todas las variables de color, tipografía y espaciado. Importar primero en el proyecto. |
| brand-guidelines.html | HTML | Este documento. Abrir en cualquier navegador. No requiere instalación. |
Nota para el desarrollador
Importar el archivo tokens.css como primer stylesheet del proyecto. Activar modo oscuro añadiendo
data-theme="dark" al elemento <html> o <body>. Las fuentes de Google se cargan automáticamente si se incluye el link en el <head>.