Design System TOLVI.
Un sistema para que web, app, PDFs y campañas hablen con una sola voz visual. Blanco y negro llevan la pieza; el morado actúa; el verde confirma la conexión.
Versión 0.7 · Octubre 2026 · En construcción
Fuentes Guía de estilos TOLVI® · Handoff · Prototipos Web y App · Íconos Lucide
Siguiente Confirmar colores funcionales, mínimos de logo y uso de ® / ™; despliegue en Elementor.
Color.
Negro y blanco hacen el trabajo. El morado aparece donde hay acción, foco o estado activo; el verde, solo donde hay red, conexión o éxito. Aquí está la paleta completa de la Guía oficial, en sus dos modos.
Modo claro · paleta de la Guía
#673DE6 · --tl-violet#0A9C76 · --tl-mint#EFF1FE · --tl-selago#313131 · --tl-graphiteModo oscuro (clase .tl-dark) · paleta de la Guía
#9160F4 · --tl-violet-dark#0EEAB2 · --tl-mint-dark#FFFFFF · --tl-white#010101 · --tl-blackNeutros de trabajo y estados (derivados)
#F6F6F6 · --tl-paper#E4E4E4 · --tl-line#5C5C5C · --tl-mute#5428CF · --tl-violet-hover#A8A8A8 · --tl-mute-dark#2A2A2A · --tl-line-dark#A67FF7 · --tl-violet-dark-hover#141414 · --tl-tint (oscuro)| Par | Contraste | Uso |
|---|---|---|
| Negro / Blanco | 20.1 : 1 | Texto principal |
| Mine Shaft / Blanco | 13.0 : 1 | Texto secundario fuerte |
| Mute / Blanco | 6.9 : 1 | Texto de apoyo |
| Blanco / Krishna | 6.0 : 1 | Botón primario (AA) |
| Krishna / Selago | 5.5 : 1 | Enlace sobre superficie Selago (AA) |
| Negro / Selago | 18.6 : 1 | Texto sobre Selago |
| Negro / Simple Violet | 6.6 : 1 | Botón primario sobre negro (AA) |
| Medium Spring Green / Negro | 13.3 : 1 | Éxito y red sobre oscuro (AAA) |
| Negro / Dark Mint | 6.0 : 1 | Texto sobre relleno mint (AA) |
| Dark Mint / Blanco | 3.5 : 1 | Solo texto grande (≥24px, o ≥19px en negrita), iconos y trazos. No para texto pequeño. |
Qué significa cada color y por qué se usa
La Guía oficial nombra los colores; el significado sale de la dirección de marca del Handoff (§8.3). Donde el motivo es una propuesta, está marcado.
| Color | Significa | Por qué | Dónde va |
|---|---|---|---|
| Vivid Black / Full White | Claridad y confianza operativa | La marca se apoya en producto real y datos legibles. El contraste máximo deja que la información sea la protagonista y transmite sobriedad de infraestructura. | Texto, fondos y logo. ≈90% de cualquier pieza. |
| Krishna / Simple Violet | Acción, foco, tecnología e inteligencia | Es el único color de acento: guía el ojo a lo que se puede hacer. Distingue a TOLVI de la logística tradicional sin recurrir a estética de IA. | Botón primario, enlace, foco y estado activo. |
| Dark Mint / Medium Spring Green | Red, conexión y éxito | Representa la TOLVI Network: nodos conectados y operación que funciona. Se reserva para ese significado para que no pierda valor. | Indicadores de red, confirmación, trazos e íconos. Texto pequeño no. |
| Selago / Paper | Calma y orden | Superficie suave que separa secciones sin sombras ni bordes pesados. Propuesta de uso. | Fondos alternos y tarjetas en modo claro. |
| Mine Shaft / Mute | Jerarquía secundaria | Baja el peso del texto de apoyo sin perder lectura (contraste ≥ 6.9 : 1). | Descripciones, etiquetas y metadatos. |
| Error | Algo falló y requiere atención | Un estado crítico no puede depender solo del texto. Propuesta [VERIFY]. | Solo validación y alertas, siempre con ícono y mensaje. |
| Aviso | Precaución, sin bloqueo | Distingue lo que se puede continuar de lo que no. Propuesta [VERIFY]. | Solo alertas y avisos de sistema. |
Gama completa
Cada color de la Guía tiene una escala de 10 pasos para superficies, bordes y estados. Los pasos con nombre son los colores oficiales; el resto se deriva por mezcla lineal y no se usa como acento nuevo.
#EFF1FESelago#DED7FC#C9B7FA#AD8CF7#9160F4Simple Violet#7C4EED#673DE6Krishna#5428CF#371A87#1E0F49#E7FDF7#C3FAEC#7AF3D5#0EEAB2Medium Spring Green#0DD09E#0BB78A#0A9C76Dark Mint#087559#064E3C#042C22#F6F6F6#E4E4E4#CFCFCF#A8A8A8#8A8A8A#5C5C5C#454545#313131Mine Shaft#1F1F1F#010101Vivid BlackColores funcionales
Error y aviso necesitan un color propio para no depender solo del texto. Son funcionales, no de marca: solo aparecen en alertas, validación y estados. Propuesta a confirmar en el Manual de Marca.
#C4261C5.8:1 sobre blanco#FF7A6E8.2:1 sobre negro#9A5B005.4:1 sobre blanco#F2B44511.3:1 sobre negroReglas de uso
- Blanco y negro llevan ≈90% de cualquier pieza.
- Violeta: acción, foco y estado activo.
- Mint: significado de red, conexión y éxito (Handoff §82).
- Selago: superficie opcional en modo claro.
- Mint no es segundo acento decorativo ni va en botones principales.
- No usar Dark Mint en texto pequeño sobre blanco.
- No mezclar Selago y Paper en la misma vista.
- Los prototipos de fase 1 siguen en B&W + morado; el mint entra al activar estados de red y éxito.
Aplicación en componentes
La Guía también incluye el logo en verde (modo claro y oscuro); ver Marca. El Handoff v5 listaba #5b35d5 y #42cb89 como tokens iniciales: la Guía manda.
Tipografía.
DM Sans lleva todo el texto: titulares, lectura, etiquetas e índices. Audiowide se usa solo en el acrónimo T·O·L·V·I (letras, palabras y franja continua). No va en títulos, etiquetas, índices ni párrafos.
Una red, no islas.
40→88px · lh 1.04 · ls −4% · 700Más cerca de la demanda.
32→64px · lh 1.08 · ls −3% · 700¿Qué infraestructura puedo conectar?
20→28px · lh 1.25 · ls −1.5% · 700TOLVI conecta inteligencia, inventario, bodegas y entregas.
18→24px · lh 1.5 · 400Inventario, bodegas, pedidos y entregas suelen vivir en sistemas distintos. TOLVI los conecta.
16px · lh 1.5 · 400Datos ilustrativos. Early Access · Producto en evolución.
14px · lh 1.5 · 40001 · Inteligencia
DM Sans 700 · 12px · ls 12% · MAYÚSCULAST·O·L·V·I
Audiowide 400 · solo acrónimo · ls 12% · MAYÚSCULASEspaciado y grilla.
Todo es múltiplo de 8px. Grilla de 12 columnas, contenedor boxed de 1200px. Tres breakpoints: Desktop >1024 · Tablet ≤1024 · Mobile ≤767.
s1 · 8s2 · 16s3 · 24s4 · 32s6 · 48s8 · 64s12 · 96s16 · 128| Token | Desktop | Tablet | Mobile |
|---|---|---|---|
| --tl-section-y | 128 | 96 | 64 |
| --tl-gutter | 48 | 32 | 24 |
| --tl-gap | 24 | 24 | 16 |
| --tl-nav-h | 72 | 72 | 64 |
| Radios | 8 · 16 · 24 · pill (solo botones y estado) | ||
| Touch targets | botón 48 · input 56 · toggle 48 | ||
Componentes base.
Botones y enlaces
Primario = acción principal de la vista (uno por bloque). Sólido = acción de navegación. Ghost = alternativa. Link = continuación.
Formularios
Estado de sistema
Único uso permitido de pill. Máximo dos por página.
Ventana de producto
Estados.
Todo componente interactivo declara seis estados: reposo, hover, foco, activo, deshabilitado y cargando. Los campos suman error, éxito y solo lectura. Las clases .is-hover, .is-focus y .is-active existen solo para documentar; en producción mandan los pseudo-estados.
Botones · sobre claro
Botones · sobre oscuro
Campos
Controles
Reglas de estado
| Estado | Regla |
|---|---|
| Hover | Cambio de relleno o borde en .24s con --tl-ease. Sin escala, sin sombra, sin brillo. |
| Foco | Contorno de 2px en el acento con 4px de separación. Siempre visible con teclado; nunca se elimina. |
| Activo | Un paso más oscuro (claro: Krishna 700 → #4620A8) o más claro sobre negro (#BB9BF9). |
| Deshabilitado | Relleno neutro, texto #767676, sin eventos. Se explica por qué en el texto de ayuda. |
| Cargando | Botón con indicador circular, ancho fijo, sin cambiar la etiqueta. Con movimiento reducido, el indicador no gira. |
| Error | Borde y texto de ayuda en el color funcional de error, con un cuadrado junto al texto: nunca solo color. |
| Éxito | Borde Dark Mint y punto verde junto al texto de ayuda. |
| Objetivo táctil | Mínimo 48px de alto; campos 56px. |
Componentes avanzados.
Piezas para la app y el sitio. Sin sombras, sin gradientes: borde de 1px, espacio y tipografía. Los datos son de muestra.
Selector y controles de formulario
Alertas
Notificación, tooltip y progreso
Navegación: migas, pasos, paginación y menú
Tabla, etiquetas y tarjeta
| Bodega | Ciudad | Estado | Espacio |
|---|---|---|---|
| Bodega Norte | Reynosa | Visible | 120 m² |
| Bodega Frontera | Mission, TX | Borrador | 80 m² |
Datos ilustrativos.
Acordeón y carga
¿Qué es TOLVI?
Una plataforma de logística inteligente para el comercio digital.
¿Qué es Early Access?
Producto con usuarios reales y en evolución.
¿Cómo publico mi bodega?
Regístrate, completa tus datos y publícala en la Red.
Iconografía.
Todos los íconos de interfaz salen de una sola biblioteca: Lucide (licencia ISC, v1.58.0). Trazo de 2px, extremos redondeados, cuadrícula de 24px. Sin rellenos, sin emoji y sin mezclar otras familias.
En uso en el sistema
menuxarrow-rightarrow-leftchevron-rightchevron-downpluscheckinfocircle-checktriangle-alertcircle-xDominio logístico y producto
warehousepackageboxestruckroutemap-pinstorebuilding-2layerschart-columnsearchusermailphonelockeyesettingscalendarclocksenddownloadlog-inTamaños y color
16px24px32px48pxReglas
| Regla | Detalle |
|---|---|
| Familia | Solo Lucide. El logo, la mascota y los pictogramas del acrónimo T·O·L·V·I no son íconos de interfaz y no se mezclan con ellos. |
| Tamaños | 16, 24, 32 y 48px (múltiplos de 8). El ícono acompaña al texto a 1.1–1.25em. |
| Color | Siempre currentColor: hereda el color del texto. Acento solo en acción y estado activo; mint en red y éxito; error y aviso solo en alertas. |
| Accesibilidad | Decorativo con aria-hidden. Si comunica algo, texto visible o aria-label. Objetivo táctil mínimo de 48px. |
| Estado | Una alerta nunca depende solo del color: lleva ícono y título. |
| Uso en HTML | Marcador {{I:nombre}} en el build (inserta el SVG en línea) o copiar el SVG de Iconos/lucide. En CSS, {{IM:nombre}} como máscara. |
| Uso en Elementor | Widget Ícono con el SVG subido desde la carpeta Iconos/lucide, o SVG en línea en un widget HTML. |
Biblioteca completa (2159 íconos) y licencia en 04-Design-System/Iconos. Instalada con lucide-static; actualizar la versión es una decisión de versionado del sistema.
Marca y activos.
Una sola identidad: logo cubo + wordmark. La mascota es un activo secundario y no comparte bloque con otro logo.
Horizontal.
Cubo + wordmark + ®. Es el logo por defecto.
- Úsalo en navegación, pie de página, documentos, firmas y cualquier lugar con ancho de sobra.
- Es el único con ®; en piezas donde el registro ya aparece en otro sitio, usa el wordmark.
- Ancho mínimo 96px en pantalla (25mm en impresión).
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
Wordmark.
TOLVI con el cubo como «O». Sin ®.
- Úsalo como firma de gran formato: portadas, hero, banners y piezas donde el logo es protagonista.
- No lo pongas junto al ícono suelto: el cubo se repetiría.
- Ancho mínimo 72px en pantalla (20mm en impresión).
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
Ícono.
Solo el cubo. Cuadrado redondeado.
- Úsalo donde el espacio es cuadrado o muy reducido: favicon, avatar, ícono de la app y sello.
- Nunca junto al nombre TOLVI en texto o logo: para eso existe el horizontal.
- Tamaño mínimo 24px; en 16px usa los archivos de la carpeta Favicon.
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
Vertical.
Cubo sobre «TOLVI». Para formatos altos o centrados.
- Úsalo en composiciones centradas y verticales: portada de documento, historias, carteles, pantallas de carga y acceso.
- No lo combines con el horizontal en la misma vista.
- Ancho mínimo 48px en pantalla (14mm en impresión).
.svg)
.svg)
.svg)
.svg)
.svg)
.svg)
Reglas para todos los logos.
Sí
- Versión clara (negro, morado, Dark Mint) sobre blanco o Selago; versión oscura (blanco, violeta, Medium Spring Green) sobre negro o grafito.
- Negro o blanco por defecto. Morado para momentos de marca; verde solo como acento puntual, nunca en la navegación.
- Espacio libre alrededor igual a la mitad de la altura del cubo, sin texto ni imágenes dentro.
- Escalar solo de forma proporcional, con los SVG originales.
- Un solo logo por vista, sin repetirlo junto a la mascota.
No
- Recolorear con otros tonos, o usar la versión clara sobre negro y la oscura sobre blanco.
- Estirar, rotar, añadir contorno, sombra o gradiente.
- Ponerlo sobre fotos o fondos con ruido; si no hay opción, usa un recuadro negro o blanco.
- Separar el cubo del texto, recomponer el wordmark o cambiar su tipografía.
- Quitar o mover el ®, o añadir ™ o ® a logos que no lo traen.
Los mínimos y el espacio libre son propuesta de esta fase, a confirmar en el Manual de Marca. El uso de ® y ™ depende del estado del registro [VERIFY].
Acrónimo T·O·L·V·I.
TOLVI también se lee como las cinco palabras de lo que la plataforma ofrece. Cada letra tiene su pictograma de empaque. El orden es siempre T, O, L, V, I.
T · TecnologíaEl software que conecta inventario, bodegas y entregas.
O · OptimizaciónMejores decisiones con la infraestructura que ya existe.
L · LogísticaDel inventario a la entrega, dentro de una sola red.
V · VelocidadDirección de la marca: acercar el inventario a la demanda.
I · InteligenciaDatos que ayudan a decidir qué, cuánto y dónde.
Sí
- Pictograma y palabra juntos, la palabra en Audiowide, mayúsculas y 12% de espaciado.
- Medium Spring Green solo sobre negro; sobre blanco usa negro o Dark Mint en tamaños grandes.
- Altura mínima 24px. En franja continua (marquee) 32px, una por página y con aria-hidden.
- Usa los cinco juntos o uno solo para ilustrar su propia palabra.
No
- Reordenar las letras, o presentar un subconjunto como «el acrónimo».
- Usar los pictogramas como íconos genéricos de interfaz.
- Recolorear fuera de los cuatro colores, estirar o añadir contorno.
- Acompañar «Velocidad» con tiempos o promesas (same-day, 24 h): es dirección, no capacidad (Handoff §3.8).
Los textos de cada palabra son propuesta de copy [VERIFY]. Los SVG originales venían en #00E9AF; aquí se normalizan a los colores de la Guía.
Mascota.
Hoja de ángulos oficial: frente, tres cuartos, perfil y espalda. Aparece como pieza editorial en recuadro de 24px, una vez por vista y lejos del logo. Nunca como fondo decorativo repetido. Para fondos negros existe la versión holograma; para pantallas de acceso, las versiones transparentes de Mascota Tolvi.
Por qué un perrito. En casi cualquier familia del mundo hay un lugar para el perro: es, como se dice, el mejor amigo del hombre. Es leal, recíproco, confiable y juguetón, y ve la vida como un juego. Eso queremos que se sienta al usar TOLVI: amistad, confiabilidad y conectividad. Conectar a quienes tienen espacio con quienes lo necesitan es comercio justo, y el comercio justo apunta a un mundo con menos desigualdades, donde libertad e igualdad se equilibren. Razón de Rodolfo; redacción aprobada por el fundador (16-oct-2026).
Archivo: 04-Design-System/Mascota-Tolvi-Angulos.webp. Favicon: Favicon Tolvi SVG.svg (principal) y Favicon Tolvi WebP.webp (alternativo).
Mapeo a Elementor.
El HTML de los prototipos usa la misma jerarquía que Elementor: Container → Container → Widget. Los tokens :root pasan a Global Variables; cada clase .tl-* pasa a una Class global.
| Sistema | Elementor | Herramienta MCP |
|---|---|---|
| :root --tl-* | Global Variables (color, tamaño, fuente) | elementor-manage-global-variable |
| .tl-section · .tl-boxed | Container full / boxed 1200 | elementor-build-composition |
| .tl-grid · .tl-stack · .tl-row | Container Grid / Flex column / Flex row | elementor-build-composition |
| data-el="heading|text-editor|button|image|form|tabs" | Widget equivalente | elementor-get-widget-schema |
| .tl-btn · .tl-input · .tl-status… | Classes globales | elementor-manage-classes · elementor-reorder-classes |
| Estilos por defecto de widgets | Default Styles | elementor-manage-default-styles |
| Nav · Footer | Site Parts (Header/Footer) | elementor-manage-site-parts |
| Bloques repetibles (fila, ventana) | Components | elementor-manage-component |
Archivos: tolvi-ds.css (tokens y componentes) · design-tokens.json (mapeo completo). Flujo propuesto: tokens → clases → componentes → páginas → QA → publicación.
Reglas.
Sí
- Blanco y negro dominantes; morado solo en acción, foco y estado activo.
- Espaciado y tamaños en múltiplos de 8px, con tokens.
- Titulares grandes, filas con hairlines, espacio negativo.
- Responsive en los tres breakpoints, sin scroll horizontal.
- Datos de muestra siempre etiquetados.
- Una sola mascota por vista, lejos del logo.
No
- Gradientes de fondo, sombras difusas, brillos.
- Etiqueta o píldora encima de cada título de sección.
- Tarjetas idénticas repetidas sin propósito.
- Iconos genéricos o emoji como decoración.
- Verde, dorado u otros acentos en esta fase.
- Posicionamiento absoluto fuera de menús, modales y cierres.