Cómo se ve, cómo habla y cómo se usa Trevol.
trevol.si
Para producto, diseño, marketing, ventas y aliados.
Este manual va de lo que es Trevol a cómo se usa: de dónde viene y cómo habla; su logotipo, su color y su letra; y cómo se ve en el producto, en los documentos y en las redes.
Cuatro hojas iguales, giradas 90° entre sí, suman una vuelta completa: por eso el trébol se ve igual después de un cuarto de vuelta. Ese giro es la única animación de la marca y solo existe en movimiento. En este manual, como en cualquier pieza, el trébol va siempre en su posición.
Lo indispensable para hacer una pieza hoy. Cada línea lleva al capítulo con la regla completa y al archivo que se usa.
| Desde 120 px de ancho, o 30 mm a una tinta | Logotipo horizontal. En cuatricromía y en sello de caucho, desde 40 mm |
|---|---|
| Menos de 120 px de ancho o de 30 mm | Isotipo o ícono de app, no la palabra |
| Trébol desde 48 px de alto | Isotipo maestro |
| Trébol de 16 a 47 px de alto | Isotipo micro |
Área de protección: media altura x por cada lado. Sobre fondos oscuros, la versión negativa. Regla completa en el capítulo 3.
| Logo, ícono y bloques de marca | Verde Trevol #179B08 |
|---|---|
| Botones y acción | Verde acción #118305, texto Blanco |
| Selección, titulares y fondos oscuros | Selva #07550C |
| Botón y realces sobre oscuro | Chispa #65E468, solo sobre Selva, Grafito o Noche |
| Texto | Grafito #24272B; secundario en Pizarra |
| Fondos | Blanco y Niebla #F4F5F8 |
| Enlaces y foco | Azul Enlace #056DB5 |
Nada de pasteles ni fondos crema. El Verde Trevol nunca es texto y Chispa nunca va sobre claro. Regla completa en el capítulo 5.
| Titulares de marca | Figtree 700 y 800 |
|---|---|
| Todo el texto y el producto | Inter 400 a 700 |
| Importes en columna | Inter con cifras tabulares, a la derecha |
Mayúscula inicial, alineación a la izquierda, nunca MAYÚSCULAS SOSTENIDAS. Regla completa en el capítulo 6.
Ejemplos en el capítulo 2.
Regla completa en el capítulo 7.
La lista completa de archivos: capítulo 9.
Capítulo 1
Trevol empezó en una hoja cuadriculada: el nombre en letras gruesas, una o convertida en trébol y una flecha con la palabra «Revolu…». La marca conserva ese espíritu y lo vuelve un sistema.
Es una exploración, no un diseño final, y hay que leerlo con criterio de diseñador. Las ideas que se repiten en la hoja mandan: la T mayúscula con cola aparece en todas las pruebas y el trébol ocupa la o cuatro veces. Cada número de la foto señala una idea y dice dónde quedó en la marca.
«colors: green»Un verde vivo de marca, el Verde Trevol #179B08, con un verde de acción, el Selva de lo seleccionado y Chispa, que solo brilla sobre oscuro.
Letras gruesas, esquinas redondeadas y la T con colaAsta de 28 u y terminales de radio 10 u con curvatura continua. La T conserva su cola, que termina bajo su propio brazo.
«Icon.»: un trébol en un círculo y una flecha hasta la oLa o del logotipo es un trébol de cuatro hojas. El ícono de app es ese trébol, sin aros; el círculo vive solo en el sello.
«Revolu…»El giro de 15° de cada hoja y el cuarto de vuelta, la única animación del símbolo.
«esquinas redondeadas, por Apple» y «minúsculas, amable»Esquinas continuas como las del ícono de Apple, y minúsculas, salvo la T.
Las pruebas caligráficasEl trébol vive en la o. Nunca como tilde, punto ni emoji.
Los monogramas «T», «Tr» y «y+T»Se exploraron y se descartaron: la firma es la palabra completa.
La hoja cuadriculadaLa cuadrícula del contador: un recurso gráfico para portadas y datos destacados.
La l, la más alta de la palabral de 150 u, por encima de la T de 140 u, como la barra más alta de un gráfico.
El logo es el boceto dibujado con geometría: rectas, arcos y esquinas de curvatura continua sobre una retícula. Nada se escribió con una fuente.
Trevol es trébol con una letra cambiada: la b pasa a ser v, la v de revolución. Al perder la tilde, la palabra se vuelve aguda, como control o girasol. Hasta el acento dio la vuelta.
tre-VOLaguda, como control
Cuatro hojas dispuestas cada 90° suman una vuelta completa, como los ciclos de la contabilidad: el comprobante del día, el cierre del mes, el año gravable y la exógena. Trevol acompaña la vuelta completa y la hace sin vueltas.
La actitud es una revolución tranquila: cambiar a fondo cómo se lleva un negocio sin complicarle la vida a quien lo lleva. Por eso la palabra revolución casi nunca se escribe. Se demuestra con el giro, con la velocidad y con cero vueltas.
La suerte se la dejamos al trébol. Las cuentas, cuadradas.
El trébol inspira el símbolo; la confianza se gana con claridad, velocidad y control.
La dirección de Trevol es trevol.si, y su terminación se lee de dos maneras. La primera es «sí»: la respuesta corta a la pregunta de todos los días, ¿cuadra? La segunda es «superinteligencia»: la razón por la que el fundador eligió el dominio.
Trevol es la nueva forma fácil e inteligente de llevar la contabilidad y facturar. Como la revolución, la inteligencia no se anuncia: se demuestra en lo fácil. En la cuenta que ya viene sugerida, en la retención que ya está calculada y en el aviso que llega antes del vencimiento. Las decisiones siguen en manos de quien lleva las cuentas.
El dominio es una dirección, no parte del logo: nunca entra al dibujo del logotipo, del ícono ni del favicon. Cómo se escribe y se dice está en el capítulo 2.
trevol.si
Así sí
Así no
Cada frase tiene un nivel y un lugar. Ninguna se escribe dentro del logo. «Todo cuadra.» es la firma; las demás son texto de campaña.
«Todo cuadra.» sigue siendo la firma. Con trevol.si aparece un recurso nuevo: una pregunta que el dominio responde con su «sí». Son recursos de campaña: no reemplazan la firma ni cambian la imagen para compartir.
Todo cuadra.
Cierra piezas y momentos reales del producto. Cuadrar es balancear las cuentas y, en Colombia, también ponerse de acuerdo. En el producto aparece solo cuando es verdad.
Claro para decidir. Ágil para trabajar.
Nombra lo que gana el dueño de la pyme y lo que gana el contador, sin nombrarlos. Va bajo la firma o en subtítulos.
Contabilidad sin vueltas.
En Colombia, hacer vueltas es hacer trámites. Une la revolución, que es una vuelta, con la promesa de no dar ninguna.
Trevol, con v de revolución.
Explica el nombre y enseña a escribirlo. Para locución, presentaciones y ventas. En voz alta la v se nombra uve: «con uve de revolución».
¿Contabilidad sin vueltas? trevol.si
La campaña vuelta pregunta; el dominio contesta «sí». Para campaña y redes, donde la dirección se ve escrita, junto a una demostración del producto. Se dice «tre-VOL punto sí», sin saltarse el «punto».
¿Todo cuadra? trevol.si
La firma vuelta pregunta, contestada por el dominio. Solo en campaña, donde la firma ya se conoce: la firma institucional sigue siendo la afirmación, «Todo cuadra.». En piezas de solo audio cierra con la fórmula de dictado: «¿Todo cuadra? Trevol punto sí. Trevol, con uve de revolución, punto sí.»
Dos públicos, una herramienta. El dueño de la pyme necesita claridad y confianza; el contador digita cientos de comprobantes con el teclado y necesita velocidad.
La declaración no nombra competidores. Las comparaciones solo se usan en público si se demuestran con tareas medidas.
Para los dueños de pymes colombianas y sus contadores, Trevol es el software contable y administrativo en la nube con el que todo cuadra: claro para que el dueño decida y ágil para que el contador trabaje, en la misma herramienta y con la DIAN adentro.
Trevol y un descriptor, con un solo verde de marca, sin submarcas de color y con una sola dirección: trevol.si, y app.trevol.si para la plataforma.
Capítulo 2
Trevol habla como el colega contador que además es rápido con el teclado: preciso, tranquilo y cálido. Lo que dice corresponde siempre al estado real de las cuentas.
Si Trevol fuera una persona, sería la contadora que todo el mundo recomienda: llega con su portátil, digita sin mirar el teclado, explica la retención en dos frases, te avisa antes del vencimiento y nunca te asusta con la DIAN.
Guían cada texto y cada decisión de diseño. El quinto le da sentido a la v de revolución: sin un rasgo inconforme, la revolución queda vacía.
Dice qué pasó, qué significa y qué sigue.
Cifras exactas. Una idea por frase. Estados honestos: «Sincronizado hace 2 min».
Jerga sin definir. Eufemismos como «se presentó un inconveniente». Simplificar hasta esconder información.
Lo demuestra antes de decirlo.
Atajos visibles. Captura repetitiva sin ratón. Verbos de acción: «Contabilizar».
Prometer rapidez sin evidencia. Apresurar decisiones. Cambios silenciosos.
Trata a cada persona como a un colega que respeta.
Tú respetuoso. Frases cortas. Explicar sin hacer sentir mal a nadie.
Diminutivos, «crack», emojis en el producto, «¡Ups!». Infantilizar.
Las cuentas cuadran y se pueden auditar.
Estados precisos. Normas citadas con su número. Anular o reversar en lugar de borrar.
Tono de notaría. MAYÚSCULAS SOSTENIDAS. Alarmismo. Prometer cumplimiento automático.
Cree que la contabilidad puede ser mejor, y la mejora. Con optimismo, nunca con rabia.
Preguntar por qué algo toma cinco pasos. Orgullo por lo colombiano bien hecho.
Atacar competidores por nombre. Arrogancia. «Disruptivo» vacío. Prometer riqueza o buena suerte.
Precisa, tranquila y cálida. La voz no cambia; el tono sí, según el momento. Estas cinco reglas permiten revisar un texto y decir si cumple.
Computador, celular, NIT, factura, comprobante. Nada de jerga en el producto: ni «parce» ni «bacano».
Tú en el producto y en marketing, sin alternar con usted. Nunca vos. Nunca «el usuario»: se le habla a la persona. En soporte y ventas, el trato que use el cliente.
«Emitir factura», «Revisar comprobante». Tres palabras como máximo, salvo convenciones como «Guardar y crear otro».
Primero el resultado. Después, si aporta, una expresión breve de cercanía.
Arriba, la explicación que entiende cualquiera. Debajo, el código, la norma o el detalle técnico.
Más cálido en la bienvenida, más breve en lo repetitivo y más sobrio ante errores, dinero o pérdida de información.
| Momento | Tono | Ejemplo |
|---|---|---|
| Rutina | Preciso y breve | Contabilizado. |
| Error | Sobrio, con la salida y sin culpar | El comprobante no cuadra: los créditos superan a los débitos en $ 150.000. |
| Logro real | Celebración contenida | Octubre 2026 quedó cerrado. Todo cuadra. |
| DIAN y vencimientos | Claro, sin alarma | Según tu NIT, la retención de septiembre se declara hasta el 13 de octubre. Ya está calculada: $ 3.214.000. |
| Ayuda y soporte | Paciente, con el trato del cliente | Te muestro dónde está: Configuración, después Impuestos y ReteICA. |
| Marketing | Cálido, inconforme, con humor suave | Contabilidad sin vueltas. Cien comprobantes, cero clics. |
Cifras ilustrativas.
Lo que dice Trevol en botones, errores, correos y redes. A la izquierda, cómo se escribe; a la derecha, lo que se evita y por qué.
Así sí
¿Eliminar este borrador?
Esta acción no se puede deshacer.
Verbo y objeto, mayúscula inicial y tres palabras como máximo. El atajo se muestra solo si existe, con las teclas del sistema de cada persona. Lo contabilizado no se elimina: se anula o se reversa.
Así no
No dicen qué pasa al presionarlos. «Aceptar» y «Sí» obligan a releer la pregunta; las mayúsculas sostenidas gritan.
Así sí
La DIAN rechazó la factura FE-1028: la fecha de vencimiento es anterior a la de emisión.
Corrige la fecha y vuelve a enviarla.
Código de la DIAN: FAD09e
El comprobante no cuadra: los créditos superan a los débitos en $ 150.000.
Revisar comprobante
Guardado en este equipo. Se sincroniza cuando vuelva la conexión.
ValidadaEnviada a la DIANRechazada
Qué pasó, con el dato concreto, y cómo se arregla. El código va al final. «Validada» es lo que hace la DIAN; «Aceptada» queda para el evento del comprador.
Así no
¡Ups! Algo salió mal.
Error de validación DIAN. Contacte a soporte.
Todo guardado
No dice qué falló ni qué hacer, culpa a la persona y bromea con su plata. «Todo guardado» miente si los cambios solo están en el equipo.
Así sí
Trevol avisos@trevol.si
La retención de septiembre se declara hasta el 13 de octubre
Hola, Andrea:
Según el NIT de Tostadora Monteverde, la retención en la fuente de septiembre se declara hasta el martes 13 de octubre. Ya está calculada: $ 3.214.000.
Revisar declaración
Si ya la presentaste, no tienes que hacer nada.
El asunto dice la fecha; el cuerpo, la cifra y la acción. Sin sustos.
Así no
Notificaciones noreply@
¡URGENTE! Evite sanciones de la DIAN
Estimado usuario:
Le recordamos que tiene obligaciones tributarias pendientes. Ingrese a la plataforma para más información.
Alarma sin datos, trato impersonal, usted en lugar de tú y ninguna acción concreta.
Así sí
Cien comprobantes, cero clics. En Trevol, Ctrl+Enter contabiliza y el siguiente comprobante ya está listo para digitar.
La DIAN, adentro. Factura electrónica, retenciones con su vigencia y exógena en XML, sin salir de Trevol. Empieza en trevol.si.
Llegan los movimientos del banco y Trevol sugiere la cuenta; tú revisas y contabilizas. ¿Todo cuadra? trevol.si
Un beneficio concreto y comprobable por publicación. Humor suave, nunca a costa de la plata de nadie. El dominio va como dirección, dentro de la frase. La inteligencia se demuestra con una ayuda concreta y revisable; no se promete que la contabilidad se lleve sola.
Así no
¡La revolución contable llegó! Gana tiempo y suerte con Trevol.
El mejor software contable del mundo. Olvídate de la DIAN para siempre.
Trevol.si, la superinteligencia que lleva tu contabilidad sola. Ya no tienes que revisar nada.
Revolución como consigna, suerte, superlativos que nadie puede probar, promesas de cumplimiento automático y la «IA» como magia. El dominio, con mayúscula y usado como nombre.
Un glosario cerrado: una palabra por concepto, en todo el producto y en toda la comunicación.
| Usar | Evitar | Nota |
|---|---|---|
| computador, celular | computadora, ordenador, móvil | Uso colombiano |
| pyme, mipyme | PYME, SME | En minúscula |
| contador, revisor fiscal | contable (como sustantivo), CPA | |
| comprobante, contabilizar | asiento, postear, voucher | Glosario del producto |
| anular, reversar | borrar, eliminar | Lo contabilizado no se borra |
| NIT, RUT, DIAN, PUC, CUFE, UVT | CUIT, RFC, RUC | Siglas de Colombia |
| IVA bimestral o cuatrimestral | IVA trimestral | Error típico del software extranjero |
| Listo, Quedó | Okey, Done | |
| plata (solo en marketing), dinero | lana, guita, pasta | Regionalismos de otros países |
Las cifras se escriben como las lee un contador colombiano. COP aparece solo cuando conviven monedas.
Espacio de no separación entre el signo de pesos y la cifra, y antes del signo de porcentaje. Los meses van en minúscula.
El nombre de la marca es Trevol; trevol.si es la dirección donde se encuentra. El dominio no reemplaza al nombre en una frase, y la plataforma vive en app.trevol.si. Se dice «tre-VOL punto sí», siempre con la palabra «punto».
| Dirección | Para qué |
|---|---|
| trevol.si | El sitio público, las piezas y las redes |
| app.trevol.si | La plataforma: app.trevol.si/inicio, /facturas |
| facturas@trevol.si | Envío de facturas electrónicas a nombre del emisor; las respuestas le llegan al emisor |
| avisos@trevol.si | Notificaciones de la cuenta, nunca promociones |
| hola@trevol.si | Contacto público |
| nombre.apellido@trevol.si | Correo de cada persona, sin tildes ni eñes |
| trevol.si/p/7KQ2M4 | Enlace de cobro en línea (ejemplo) |
Así no
Trevol.si TREVOL.SI trevol.sí trebol.si trevol.co trevol.com trevol .si www.trevol.si Trevol Sí
| Dirección | Qué hace | Regla |
|---|---|---|
| https://trevol.si | El sitio público | La dirección canónica, sin www. Es la única que se muestra |
| www.trevol.si | Redirige a https://trevol.si, igual que http:// | Nunca se escribe en una pieza |
| app.trevol.si | La plataforma | Sus páginas privadas no se indexan en los buscadores |
| trevol.si/p/… | Enlaces de cobro | Códigos impredecibles y revocables |
| trevol.si/firma/ | El logotipo de la firma de correo | Ruta fija: una vez publicada, no se mueve |
| trevol.si/bimi/ | El isotipo junto al remitente, en los buzones que muestran logotipos | Se publica cuando el correo ya está autenticado |
| trebol.si y trevol.com.co | Respaldos para quien escribe mal la dirección: redirigen a https://trevol.si | Nunca aparecen en una pieza ni envían correo |
Capítulo 3
La palabra y el símbolo son una sola pieza: la o de Trevol es un trébol de cuatro hojas que gira. Es la firma principal de la marca y se dibujó letra por letra sobre una retícula.
Logotipo horizontal en Verde Trevol sobre Blanco o Niebla. Es la primera opción en cualquier pieza; las demás versiones existen para los casos en que esta no cabe o no contrasta. Desde la versión 2 va en un verde vivo; desde la 2.2, la o es el trébol completo, sin hueco en el centro.
El nombre va también en texto. En las primeras exposiciones a la marca, va escrito cerca del logotipo o del ícono: trevol.si, la razón social o una frase que lo nombre. En la web, el logotipo lleva el texto alternativo «Trevol». Los programas de reconocimiento de texto no leen la o dibujada como trébol: el logotipo solo no basta para dar el nombre.
Archivo: assets/logo/svg/trevol-logo-horizontal.svg
Cada versión tiene un trabajo. Ninguna se recolorea a mano: si el fondo no aparece aquí, se busca el más cercano en «Sobre fondos».
La unidad es u: la centésima parte de la altura x. La retícula es de 10 u y el módulo es el asta, de 28 u; todo lo demás se deriva de él o de la altura x. Los contornos son rectas, arcos y esquinas de curvatura continua, como la del ícono de Apple, sin un solo vértice vivo.
Asta de 28 uEl módulo del dibujo: 0,28 de la altura x, letras gruesas como las del boceto.
Barras de 26 u0,93 del asta. Una barra horizontal se ve más gruesa que una vertical del mismo grosor.
La cola de la TArco exterior de radio 42 e interior de radio 14. Baja y termina bajo el brazo; si subiera, se leería «Urevol».
Terminales de radio 10Un arco central y dos transiciones que empiezan con curvatura cero: la esquina continua, sin saltos.
La eContraforma de 53 × 62 u, barra de 18 u y remate horizontal tangente al fondo de la contraforma.
El vértice de la vRadio de 12 u, brazos de 27 u y diagonales rectas: se lee v, nunca u.
El trébol de la oAlto de 110 u, hojas de lado s = 32,2 u, canales de 7 u. Es el mismo dibujo del isotipo, sin hueco en el centro. Sobrepasa 5 u arriba y abajo porque una forma lobulada se ve más chica que un círculo.
La l150 u: la letra más alta de la palabra.
Media altura x por cada lado, medida desde la caja del logo con sus sobrepasos. En cualquier tamaño se mide fácil: es la mitad del alto de la r.
Dentro de esa zona no entra texto, borde, otro logo ni el corte de la pieza. En la firma vertical se usa la misma medida; en el isotipo, un cuarto de su alto.
Por debajo de su mínimo ninguna pieza se reduce: se cambia por la siguiente. El logotipo va desde 120 px de ancho; por debajo va el isotipo y, con el trébol de menos de 48 px de alto, su dibujo micro. En pantalla, las muestras están a tamaño real si la página se ve al 100 %. En el PDF van en milímetros y se miden impresas al 100 %, sin «ajustar a la página».
| Pieza | Pantalla | Impreso a una tinta | Por qué |
|---|---|---|---|
| Logotipo horizontal | Desde 120 px de ancho | Desde 30 mm | A 120 px, la altura x mide 22,7 px y el canal del trébol, 1,6 px. Por debajo no va la palabra: va el isotipo o el ícono. |
| Firma vertical | Desde 160 px de ancho | Desde 40 mm | Así el isotipo de arriba no baja de 48 px. |
| Isotipo maestro | Trébol desde 48 px de alto | Desde 8 mm | Canal de 3,1 px a 48 px. |
| Isotipo micro | De 16 a 47 px | De 4 a menos de 8 mm | Canales más abiertos y giro de 14,04°, la pendiente de píxel más cercana a 15°. |
| Sello | Desde 80 px | Desde 15 mm | Por debajo, el trébol calado se cierra. |
| Ícono de app | Desde 24 px de lado | — | A 16 px el trébol queda en 9,2 px y deja de leerse: ahí va el favicon con placa. |
| Pieza | A una tinta | Cuatricromía | Sello de caucho | Bordado |
|---|---|---|---|---|
| Logotipo horizontal | Desde 30 mm | Desde 40 mm | Desde 40 mm | Desde 90 mm |
| Firma vertical | Desde 40 mm | Desde 40 mm | Desde 40 mm | Desde 90 mm |
| Isotipo maestro | Desde 8 mm | Desde 10 mm | Desde 12 mm | Desde 20 mm |
| Isotipo micro | De 4 a menos de 8 mm | No: va a una tinta | De 6 a menos de 12 mm | De 14 a menos de 20 mm |
| Sello | Desde 15 mm | Desde 15 mm | No: va el isotipo | No |
El logotipo y la firma se miden por su ancho; el isotipo, por el alto del trébol; el sello, por su diámetro. Impresos a una tinta, en tinta directa o en negro, estos mínimos dejan el canal del trébol entre 0,36 y 0,54 mm. En cuatricromía y en sello de caucho, el logotipo va desde 40 mm; en cuatricromía, el isotipo va desde 10 mm, y por debajo el verde va a una tinta. En sello de caucho, el isotipo va desde 12 mm, y desde 6 mm con el dibujo micro. En bordado, el isotipo va desde 14 mm y la palabra desde 90 mm. Son medidas del dibujo y no cambian con el encargo. La prueba del impresor aprueba la reproducción de cada tiraje: los canales del trébol deben quedar abiertos y limpios.
Positivo sobre Blanco y Niebla; negativo, todo en Blanco, sobre los verdes y los oscuros; Grafito a una tinta sobre claros. Sobre una foto, el logo va en una placa de color de marca, nunca suelto.
Los logotipos están exentos del contraste mínimo de texto (WCAG 1.4.3). Aun así, el par más bajo, el positivo sobre Niebla, da 3,36:1: más que los 3:1 de un objeto gráfico. El verde vivo contrasta menos con el blanco que un verde oscuro; por eso el Verde Trevol dibuja el logo y nunca escribe texto.
El logo se usa tal como está en los archivos. Estos son los errores más comunes; todos están dibujados con el logo real para que se reconozcan a tiempo.
Capítulo 4
El isotipo es la o del logotipo: el mismo trébol. Vive donde el espacio es cuadrado o muy pequeño: el ícono de la app, la pestaña del navegador, el avatar de las redes.
El dibujo se elige por el alto visible del trébol, no por el tamaño del lienzo. Desde 48 px va el maestro; de 16 a 47 px va el micro, con canales más abiertos para que las hojas no se peguen. Ninguno lleva un hueco en el centro, y la o de la palabra tampoco: un ojo se lee como un remache o como el centro de una flor.
Maestro a la izquierda del corte, micro a la derecha. Alto en px, a tamaño real; en el PDF, a 96 px por pulgada.
Protección del isotipo: un cuarto de su alto por cada lado. El isotipo solo no se usa en los primeros contactos con la marca: ahí va el logotipo, para que se lea «control contable» antes que «suerte».
Cada hoja es un corazón geométrico: un cuadrado de lado s girado 45°, con una punta en el centro del trébol, y dos semicírculos de diámetro s sobre sus lados exteriores. Desde la punta, la hoja alcanza φ · s en la dirección de cada lóbulo: la proporción áurea sale sola de la construcción.
Las cuatro hojas van en las diagonales. Cada una gira 15° sobre su punta y se aleja del centro: los canales quedan paralelos y desplazados, como un molinete. Sin canales, el trébol se leería como una flor de ocho pétalos.
Lienzo de 1024 px, trébol Blanco sobre Verde Trevol y círculo envolvente del 60 % del lado: un ícono que se ve vivo entre los demás. Lo que lo hace de Trevol es la silueta: cuatro hojas-corazón con sus canales, sin contenedor. Sin aros, brillos ni sombras.
El trébol mide 0,5766 del lado del ícono: a 83 px queda en 47,9 px y va el micro; desde 84 px llega a 48 px y va el maestro. El ícono tiene su propio mínimo, 24 px de lado: ahí el trébol mide 13,8 px. Los 16 px del micro son el mínimo del isotipo suelto. La pieza con esquinas no va al catálogo de íconos y la de sangre no va a una presentación.
Entre íconos de todos los colores, también verdes, Trevol se reconoce por la silueta del trébol blanco sobre el verde vivo. En la apariencia oscura, el fondo pasa a Selva y el trébol a Chispa.
El nombre acompaña al ícono: en la tienda de aplicaciones, bajo el ícono de la pantalla de inicio y en los primeros contactos, «Trevol» va escrito junto a él.
La pestaña lleva el favicon y el título; la barra, app.trevol.si. El favicon SVG es el trébol micro en Verde acción en el tema claro, porque contrasta más con las pestañas grises inactivas, y en Chispa en el oscuro. Para los navegadores que piden ICO o PNG, el trébol Blanco va sobre una placa Verde Trevol que funciona en los dos temas. El de 16 px está dibujado a mano, píxel por píxel.
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/site.webmanifest">
<meta property="og:image" content="https://trevol.si/og-image-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Trevol · La forma fácil e inteligente de llevar la contabilidad y facturar">
<meta name="description" content="Factura electrónica, retenciones, exógena y bancos en el mismo lugar, con la DIAN adentro.">"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
{ "src": "icon-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
{ "src": "icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Los de propósito any llevan las esquinas continuas: los usa el escritorio, que no recorta. Los de propósito maskable van a sangre y el sistema les aplica su máscara. No se declara "any maskable": una pieza a sangre se ve cuadrada donde no hay máscara.
El ícono es una pieza cerrada: no lleva área de protección, pero tampoco admite agregados.
Capítulo 5
Verdes vivos sobre blanco y grises fríos. Un verde de marca para el logotipo, un verde de acción para lo que se hace clic, Selva para lo seleccionado y Chispa, que solo brilla sobre oscuro. Nada de pasteles.
Siete colores núcleo: cuatro verdes y tres neutros. Los valores de pantalla son sRGB. Los de impresión salen de una prueba en pantalla con perfiles ICC y están en la ficha para el impresor; cada tiraje se aprueba con la prueba de color firmada del impresor. Cada HEX se copia con un clic. Chispa se muestra dentro de un marco Selva porque nunca va sobre claro.
Dibuja la marca: nunca es texto ni botón.
Logotipo, ícono de app, placa del favicon (ICO y PNG), ilustración y bloques grandes de marca. Encima, solo el logotipo y titulares Blanco de 24 px o más.
Para piezas de marca, tinta directa: el CMYK de proceso apaga el verde.
Lo que se hace clic; como texto, solo sobre Blanco.
Botón principal con texto Blanco, indicador de selección y serie única de los gráficos. Como texto: titulares y «trevol.si».
Selección y marca oscura; no es el fondo del producto.
Lo seleccionado, los titulares verdes y las superficies oscuras de marca, con texto Blanco o Chispa encima.
Solo sobre oscuro: Selva, Grafito o Noche.
Botón principal sobre superficies oscuras, con texto Grafito, también en una barra oscura dentro de una pantalla clara; «trevol.si» sobre Selva, glifos de módulo e ícono oscuro. Como máximo el 10 % de una pieza.
Solo sobre Selva o fondos oscuros. Impresa, solo en tinta directa, calada en el fondo.
Todo el texto y las cifras.
Texto principal, cifras e importes; logotipo a una tinta. Un gris frío, casi neutro.
El texto impreso va en K 100, en una sola plancha; el CMYK de cuatro tintas es solo para áreas.
El fondo claro de la marca, en lugar del crema.
Página, barra lateral, buscador y fila alterna: un gris frío, sin crema.
Solo como panel o fondo de una pieza: el papel de la marca es blanco.
La superficie de trabajo y el papel de la marca.
Tablas, formularios, facturas y documentos; letras y trébol sobre los verdes.
Sin tinta sobre papel blanco; sobre soporte oscuro, tinta blanca opaca.
Dieciséis colores con nombre y sus pasos funcionales. Los verdes comparten un mismo matiz, entre 142° y 144° OKLCH: el del verde puro de una pantalla, sin amarillo ni azul. Los neutros son grises fríos, casi sin color; ninguno es crema, beige ni hueso. Las señales son del producto y Noche es el modo oscuro: grises levemente azulados, nada verdoso.
Los pasos de hover, presionado y más contraste son funcionales: los usan los componentes a través de los tokens, no se eligen para una pieza. El resaltado de búsqueda es un amarillo vivo con Grafito encima, solo dentro del producto.
El verde que se ve en el logo no es el mismo que se hace clic. El Verde Trevol dibuja la marca; el Verde acción, un punto más oscuro, es un verde vivo que admite texto blanco con margen: 4,92:1. Los enlaces son azules, para que el verde quede para la acción.
El botón principal toma el color de su superficie inmediata, no el del tema de la pantalla: Verde acción con texto Blanco sobre Blanco o Niebla; Chispa con texto Grafito sobre Grafito o Noche, también en una barra oscura dentro de una pantalla clara, como la de la factura.
Los componentes no eligen el color: lo toman del token --color-accion, que ya cambia con el tema.
| Superficie | Botón principal | Enlaces | Anillo de foco | Por qué |
|---|---|---|---|---|
| Producto y piezas clarasBlanco o Niebla | Emitir facturaTexto 4,92:1 | Ver comprobante | Azul Enlace, con 2 px de separación Blanco | El Verde acción da 4,92:1 sobre Blanco. El azul y el verde nunca se tocan: el anillo va separado del botón. |
| Superficies oscurasNoche o Grafito, también una barra oscura en una pantalla clara | Emitir facturaTexto 9,18:1 | Ver comprobante | Azul Enlace claro | Con texto blanco, el hover y el presionado del Verde acción no llegan a 3:1 de silueta sobre un menú oscuro. Chispa da 9,28:1. |
| Superficies de marcaVerde Trevol y Selva | Empezar ahoraTexto 9,08:1 | Conocer los planes | Blanco | Sobre Verde Trevol, el botón es Blanco con texto Selva; su silueta da 3,67:1. Sobre Selva también sirve Chispa con texto Grafito. El texto pequeño y los enlaces van sobre Selva, nunca sobre Verde Trevol. |
El hover del Verde acción, #117208, es también el color del texto de éxito («Validada por la DIAN»). El presionado, #0E6506, es el botón del tema con más contraste. Son pasos funcionales, no colores de marca para piezas.
Un verde vivo, saturado y con energía: el del trébol, el del crecimiento y el de la Colombia verde. Se reconoce de lejos en una pantalla llena de íconos y no se confunde con los colores de otros programas contables del país.
También vuelve al estudio de paleta del fundador, que recomendaba un verde de 100° a 125° de matiz HSL: el Verde Trevol está en 114° y Selva en 124°.
Guía de reparto: qué color manda en cada tipo de pieza y en qué orden entran los demás. No es una medida de superficie: medidas píxel a píxel, las piezas de este manual llevan más fondo y menos color que las barras, porque el texto y los filetes son trazos finos. En las pantallas de la plataforma, Blanco y Niebla ocupan entre el 88 y el 93 %, y el verde, menos del 2 %. Una pieza tiene un solo color dominante y el verde siempre está, aunque sea solo en el logo. Como máximo tres colores de marca por pieza además de los neutros; Chispa no pasa del 10 %.
Blanco y Niebla 82 % Grafito y Pizarra 10 % Verde acción 5 % Selva 2 % Estados 1 %
Blanco 85 % Grafito y Pizarra 10 % Verde Trevol 5 %: logotipo, sello y filetes
Blanco y Niebla 60 % Verde Trevol 25 % Grafito 10 % Selva 5 %
Verde Trevol y Selva 65 % Blanco 25 % Grafito 5 % Chispa, sobre Selva, 5 %
Las proporciones no se aplican al logo, al ícono, al favicon ni a las reproducciones a una tinta, que tienen sus propias reglas. Prueba rápida: con la pieza desenfocada, el orden de las manchas debe ser el de la barra.
Contraste WCAG 2.x calculado sobre los HEX de la paleta. El texto necesita 4,5:1 (AA); las cifras, los importes y el texto principal del producto, 7:1 (AAA). Los bordes, los íconos, los anillos de foco y los titulares de 24 px o más, 3:1. La síntesis de color verificó 469 pares de uso en los cuatro temas, sin fallas.
4,92:1, AA; AAA en texto grandeBlanco sobre Verde acciónBotón principal
4,92:1, AA; AAA en texto grandeVerde acción sobre Blanco«trevol.si» y titulares verdes
9,08:1, AAASelva sobre BlancoTitulares verdes
9,08:1, AAABlanco sobre SelvaTexto y logotipo sobre marca
3,67:1, AA grandeBlanco sobre Verde TrevolSolo titulares de 24 px o más
5,55:1, AA; AAA en texto grandeChispa sobre Selva«trevol.si» y realces sobre oscuro
9,18:1, AAAGrafito sobre ChispaBotón sobre superficies oscuras
15,00:1, AAAGrafito sobre BlancoTexto principal y cifras
13,76:1, AAAGrafito sobre NieblaTexto sobre la página y el cromo
6,43:1, AA; AAA en texto grandePizarra sobre BlancoTexto secundario
5,44:1, AA; AAA en texto grandeAzul Enlace sobre BlancoEnlaces
8,45:1, AAAAjí sobre BlancoErrores e importes negativos
El verde de marca dibuja y no escribe; Chispa solo brilla sobre oscuro. Y hay reglas que no dependen del contraste.
No: 1,63:1Chispa sobre BlancoChispa nunca va sobre claro
No: 1,63:1Blanco sobre ChispaNi lleva texto blanco
No: 3,67:1Verde Trevol sobre BlancoEl verde de marca no es texto
No: 2,24:1Chispa sobre Verde TrevolNi texto ni foco sobre el verde
No: 4,14:1Verde acción sobre BrumaEl verde no es texto sobre gris
No: 2,48:1Verde Trevol sobre SelvaVerde sobre verde oscuro
No: 1,67:1Azul Enlace sobre SelvaAzul sobre verde oscuro
No: 1,07:1Ají sobre SelvaRojo sobre verde oscuro
Un ícono de silueta distinta y el texto en el color del estado, directamente sobre la superficie, sin pastilla de color. El verde lleno es acción; el verde con ícono y texto es estado. Lo que todavía espera, como una factura enviada a la DIAN, va en neutro.
Claro
Validada por la DIANVence en 3 díasVencida, 4 días de moraCambio normativoEnviada a la DIAN
Oscuro
Validada por la DIANVence en 3 díasVencida, 4 días de moraCambio normativoEnviada a la DIAN
| Estado | Claro | Sobre Blanco | Oscuro | Sobre noche-900 |
|---|---|---|---|---|
| Éxito | #117208 | 6,11:1 | #65E468 | 10,78:1 |
| Aviso | #AB4F01 | 5,45:1 | #FE8612 | 7,24:1 |
| Error | #9F010D | 8,45:1 | #FE6258 | 5,96:1 |
| Información | #056DB5 | 5,44:1 | #4DABFD | 7,18:1 |
| Neutro | #5A5F67 | 6,43:1 | #B3B8BF | 8,83:1 |
Sin fondo propio, cada estado pasa 4,5:1 sobre cualquier fila, también la alterna con el cursor encima. Los importes negativos van en Ají con signo menos o entre paréntesis: 8,45:1 sobre Blanco y 7,22:1 en el peor caso. Las retenciones y los descuentos de una factura no son negativos: van en Grafito, con «−».
Cuatricromía por perfil ICC (FOGRA39 para papel estucado y FOGRA52 para papel bond) y la tinta directa PANTONE de cada color, con su distancia al color de pantalla entre paréntesis: por debajo de 2 casi no se nota; por encima de 5 se ve a simple vista. Tolerancia: 2,5 en tinta directa, contra la guía PANTONE, y 3,5 en cuatricromía, contra el color previsto de la ficha para el impresor.
Una tinta sobre papel nunca es idéntica a un color de pantalla: por eso cada valor de impresión lleva su distancia al color de pantalla, medida en ΔE00.
| Color | Tinta directa sobre estucado (ΔE00) | Cuatricromía sobre estucado, FOGRA39 (ΔE00) | Sobre papel bond |
|---|---|---|---|
| Verde Trevol | PANTONE 2424 C (ΔE00 1,6) | C 75 M 0 Y 100 K 6 (ΔE00 4,4) | Offset: PANTONE 2424 U (ΔE00 5,1) o negro; nunca en cuatricromía. Prensa digital: cuatricromía solo con una muestra aprobada del mismo equipo y papel; sin ella, negro |
| Verde acción | No lleva: va el Verde Trevol | C 75 M 5 Y 100 K 23 (ΔE00 5,0) | No se imprime |
| Selva | PANTONE 2427 C (ΔE00 3,8) | C 79 M 12 Y 100 K 58 (ΔE00 5,4) | No se imprime |
| Chispa | PANTONE 7487 C (ΔE00 4,1), calada en un fondo oscuro | No se imprime: va Blanco | No se imprime |
| Grafito | PANTONE 426 C (ΔE00 0,6), solo en áreas | Texto: K 100. Áreas: C 77 M 65 Y 56 K 70 (ΔE00 3,1) | Negro 100 % |
| Niebla | No lleva | C 5 M 3 Y 2 K 0 (ΔE00 3,3) | No se imprime: es el papel |
El Verde Trevol es PANTONE 2424 C: queda a ΔE00 1,6 del color de pantalla y es la tinta de las piezas de marca, sobre papel estucado. En cuatricromía queda a 4,4, fuera de la gama del proceso: se acepta en piezas que ya son de cuatricromía y en prensa digital. Sobre papel bond, en offset, va la tinta directa PANTONE 2424 U (5,1) o el logotipo en negro; nunca la cuatricromía, que lo deja a 11,1. En prensa digital sobre bond, la cuatricromía solo va con una muestra aprobada del mismo equipo y papel; sin ella, la pieza va en negro. Selva y Chispa no se imprimen sobre bond, y la Chispa solo va en tinta directa 7487 C, calada en un fondo oscuro. El texto en Grafito va en negro puro (K 100). El papel de la marca es blanco, nunca crema ni ahuesado. Los artes finales y la ficha para el impresor están en Descargas. Este manual, impreso o en PDF, no sirve como prueba de color: la prueba la entrega el impresor y Trevol la firma.
La fuente de verdad es un JSON de tokens; el CSS se genera desde él. Los componentes usan solo los nombres semánticos, que cambian con el tema claro, oscuro y de más contraste. Los 51 nombres semánticos de la versión 1.1 se conservan; cambió lo que hay detrás.
.boton-principal {
background: var(--color-accion); /* #118305 en claro; Chispa en oscuro */
color: var(--color-texto-sobre-accion); /* #FFFFFF; Grafito en oscuro */
}
.boton-principal:hover { background: var(--color-accion-hover); }
.enlace { color: var(--color-enlace); text-decoration: underline; } /* Azul Enlace */
/* Primitivos con nombre de marca: no cambian con el tema */
--trevol-marca --trevol-verde --trevol-selva --trevol-chispa
--trevol-blanco --trevol-niebla --trevol-grafito --trevol-azulOjo con un nombre: --trevol-verde es el Verde acción, #118305; el verde del logotipo es --trevol-marca. Archivos: trevol-colores.json, trevol-colores.css y paleta.svg.
Capítulo 6
Dos familias de licencia abierta. Figtree, de curvas amables, para los titulares: acompaña al logotipo sin imitarlo. Inter para todo lo demás, porque alinea las cifras y, con sus rasgos completos, distingue el cero de la O en un NIT o un CUFE.
Ninguna de las dos escribe el logotipo: el logotipo es un dibujo. Están en Google Fonts y tienen la licencia SIL Open Font License 1.1, que permite usarlas en la web, en el producto y en los PDF. Este manual y su PDF las usan autohospedadas, con todos sus rasgos.
Titulares de marca: web, campañas, presentaciones y portadas. En la plataforma, el saludo y los títulos de página, de documento y de sección, en 700.
AÁBCDEÉFGHIÍJKLMNÑOÓPQRSTUÚÜVWXYZ
aábcdeéfghiíjklmnñoópqrstuúüvwxyz
0123456789 ¿? ¡! $ % « » ° —
Todo el texto: producto, web, documentos, factura y estados financieros. Cifras tabulares y caracteres que no se confunden en un NIT o un CUFE.
AÁBCDEÉFGHIÍJKLMNÑOÓPQRSTUÚÜVWXYZ
aábcdeéfghiíjklmnñoópqrstuúüvwxyz
0123456789 ¿? ¡! $ % « » ° —
Claro para decidir. Ágil para trabajar.
Trevol es el software contable y administrativo en la nube con el que todo cuadra: claro para que el dueño de la pyme decida y ágil para que el contador trabaje, en la misma herramienta y con la DIAN adentro.
Los estilos de marca para la web, las campañas y las presentaciones, a su tamaño de escritorio. En pantallas pequeñas los titulares bajan de forma continua hasta su valor móvil.
Todo cuadra.
Contabilidad sin vueltas.
La DIAN, adentro
Retenciones con su vigencia y UVT
Exógena validada y cuadrada
Claro para decidir. Ágil para trabajar.
Según tu NIT, la retención de septiembre se declara hasta el 13 de octubre. Ya está calculada: $ 3.214.000.
Un precio en pesos, con IVA incluido y sin letra pequeña.
Nuevo en Trevol Exógena
Cifras ilustrativas. Fuente: estudio de paleta del fundador, 9 de octubre de 2026.
Emitir factura Guardar borrador
$ 3.214.000
Base de 16 px. Entre 360 y 1280 px de ancho de pantalla los tamaños crecen de forma continua del valor móvil al de escritorio, y en escritorio el interlineado cae en la rejilla de 4 px.
| Estilo | Escritorio | Móvil | Interlineado |
|---|---|---|---|
| Display | 64 | 40 | 1,1875 |
| Titular 1 | 48 | 32 | 1,1667 |
| Titular 2 | 32 | 26 | 1,25 |
| Titular 3 | 24 | 22 | 1,3333 |
| Titular 4 | 20 | 20 | 1,4 |
| Entradilla | 20 | 18 | 1,6 |
| Texto | 16 | 16 | 1,5 |
| Cifra destacada | 40 | 32 | 1,2 |
| Rol | Familia | px |
|---|---|---|
| Saludo | Figtree 700 | 34/42 |
| Título de página | Figtree 700 | 30/38 |
| Título de documento | Figtree 700 | 22/28 |
| Sección | Figtree 700 | 20/26 |
| Cifra de tarjeta | Inter 600 | 28/34 |
| Texto, celdas, campos y botones | Inter 400 a 600 | 15/20 |
| Encabezado de columna y ayuda | Inter 600 y 400 | 14/18 |
| Barra lateral y datos secundarios | Inter 500 y 400 | 14/18 |
Base de 15 px, generosa: no es una interfaz densa. Nada por debajo de 14 px, salvo los atajos de teclado y las insignias, ni por debajo del peso 400. Sin ajuste manual del espaciado entre letras: el eje de tamaño óptico de Inter lo ajusta.
| Estilo | Familia | pt |
|---|---|---|
| Título | Figtree 700 | 18/22 |
| Subtítulo | Figtree 700 | 12/16 |
| Texto | Inter 400 | 9,5/13,5 |
| Tabla de ítems | Inter 400 | 8,5/11 |
| Total a pagar | Inter 700 | 14/18 |
| Texto legal | Inter 400 | 7/9 |
Carta, con márgenes de 15 mm y 18 mm arriba.
Todo importe en columna usa cifras tabulares (font-variant-numeric: tabular-nums) y va alineado a la derecha. Dentro de un párrafo, las cifras son las normales.
Los códigos (NIT, CUFE, cuentas del PUC, consecutivos) llevan además el cero con barra y la I y la l inconfundibles. Esos rasgos solo vienen en los archivos completos del repositorio de Google Fonts, autohospedados; el enlace de la API los quita. El cero con barra nunca va en importes: en una columna de pesos se lee como un código.
$ 1.111.111,11
$ 9.999.999,99
$ 4.170.350,00
−$ 150.000,00
$ 1.111.111,11
$ 9.999.999,99
$ 4.170.350,00
−$ 150.000,00
NIT 900.123.456-8
CUFE 3f0a1l9I0O
Cuenta 110505
NIT 900.123.456-8
CUFE 3f0a1l9I0O
Cuenta 110505
Negativos con el signo menos tipográfico (−) o entre paréntesis, según la preferencia contable, además del color. Nunca solo el color.
Para la web, las piezas y los prototipos basta el enlace de Google Fonts. El producto, la factura y los PDF autohospedan los archivos completos del repositorio, con su OFL.txt.
Prohibidas como fuentes de diseño: SF Pro, Segoe UI, Avenir, Helvetica, Arial y cualquier otra fuente propietaria. Tampoco system-ui, que muestra SF Pro en Mac y Segoe UI en Windows.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@700;800&family=Inter:ital,opsz,wght@0,14..32,400..700;1,14..32,400..700&display=swap" rel="stylesheet">Capítulo 7
Pocas piezas, todas hechas con el trébol y con la hoja cuadriculada del contador. Acompañan al logo y a los datos; ninguna compite con ellos.
Tréboles completos en una retícula de 1,8 veces su diámetro, con las filas alternas desplazadas. Siempre tono sobre tono, con un contraste máximo de 1,25:1: sobre Verde Trevol (1,16:1), sobre Selva (1,19:1) y Bruma sobre Niebla (1,09:1). Un verde con opacidad no sirve de trama: sobre claro se vuelve menta.
Va en portadas, redes, empaques, papelería, el inicio de sesión y la bienvenida. Nunca en pantallas de trabajo ni detrás de texto de menos de 24 px en pantalla o de 18 pt impreso, medido en el tamaño en que se ve la pieza, no en el lienzo de exportación.
Teselas para repetir en mosaico: sobre Verde Trevol, sobre Selva y sobre Niebla.
La vuelta completa del año gravable.
Contabilidad sin vueltas.
trevol.si
Todo cuadra.
La hoja cuadriculada del boceto: celdas de 16 px o 5 mm, línea de 1 px en Bruma sobre Blanco (1,19:1). El dato importante se alinea a un cruce.
Para fondos de datos destacados, ilustraciones y portadas. Nunca dentro de las tablas del producto.
Retención de septiembre
$ 3.214.000
Calculada
Un contenedor con tres esquinas de radio R y una de R/8, como la punta de una hoja. La punta mira al centro de la composición, al título o al logotipo. Va una por composición; en este manual la llevan la tesela de cada apertura, con la punta hacia el título, la lámina del logotipo principal y la comparación del boceto con el logo.
R = 1/6 del lado menor; la punta, R/8 y nunca menos de 2 px. Cuatro esquinas hoja de color sólido en 2 × 2 se leen como el logo de Windows: no.
Octubre 2026 quedó cerrado.
Todo cuadra.
La única animación del símbolo: el trébol gira 90° en 600 ms, con aceleración suave, una sola vez y al terminar con éxito, nunca mientras algo carga. Ocurre en dos lugares: en la barra de estado, al confirmar una sincronización, y en la pantalla de cierre de período, que es un momento de marca y no un ícono. En reposo, el isotipo va siempre en su posición: el giro solo existe como animación.
Demostración: el trébol gira solo cuando la sincronización termina.
Cada uno de estos se probó y se descartó: cambia lo que el trébol significa.
Texto pequeño sobre la trama: se ensucia y no se lee.
Retícula de 24 px, trazo de 2 px, extremos y uniones redondeados y sin rellenos: la especificación de Lucide (licencia ISC, con partes de Feather bajo licencia MIT). Los íconos propios de la contabilidad colombiana se dibujan con la misma regla. A 16 y 20 px, trazo de 1,5 px ajustado a mano.
El trébol no es un ícono de interfaz: no significa a la vez guardar, éxito, ayuda y favorito. Aparece solo como favicon, ícono de app, en el botón «Pregúntale a Trevol», donde nombra al asistente, en la confirmación de una sincronización y en el momento de marca del cierre de período.
Juego base: lucide.dev, licencia ISC, con partes de Feather bajo licencia MIT; los dos avisos van en la página de licencias de terceros del producto.
Estados: una silueta distinta cada uno
Nunca el logo de la DIAN, el escudo de Colombia, emojis en el producto ni dos colores en un ícono.
«Esquinas redondeadas, por Apple» se traduce en una regla: el radio crece con el tamaño, cerca de una quinta parte del alto en los controles. Redondeado, no inflado. Las tablas conservan su estructura recta.
Explicar antes que adornar. Planas y geométricas, hechas con las piezas del trébol: círculos, cuadrados girados 45°, semicírculos y la hoja, nunca suelta. Sin degradados, sombras ni 3D.
Escenas reales de pymes: la tienda de barrio, la panadería, el taller, la ferretería, el consultorio, la oficina contable. Como máximo cuatro colores de marca más Grafito por ilustración, sin rellenos pálidos. La diversidad se mide en el conjunto de piezas, no en cada imagen.
Cada escena usa como máximo cuatro colores de marca, más Grafito en los contornos y un tono de piel. Los seis tonos de piel están en trevol-colores.json (color.ilustracion) y nunca se muestran sueltos: solo dentro de una figura. Las tres escenas son de la misma familia: contorno de 2 px, esquinas redondeadas y piezas del trébol. Chispa no va en ilustraciones sobre claro.
Colombia cotidiana y competente: dueños de pyme y contadores reales en su lugar de trabajo, de todas las regiones, edades y orígenes. Momentos de trabajo de verdad, con la mirada en la tarea más que en la cámara.
Luz natural de 5000 a 5500 K y color natural, sin filtros verdes. La marca entra con una placa y con la esquina hoja, nunca tiñendo la foto. Las pantallas muestran el producto real, con datos colombianos verosímiles y autorizados.
Encargo de la sesión. Tres escenas, cada una con plano general, plano medio y detalle de manos con el producto: una pyme en operación, una contadora en su escritorio y una persona usando Trevol en el celular o en el portátil. En horizontal y en vertical, con aire para la placa del logo y la esquina hoja. Cada persona firma su autorización de uso de imagen y las fotos se guardan con sus créditos en assets/fotografia/. Mientras no exista la sesión, las piezas van con el motivo, la ilustración o pantallas del producto.
Foto: la dueña de la panadería revisa en el celular la factura que acaba de emitir, con la luz de la mañana que entra por la vitrina.
Así sí
Así no
Capítulo 8
La marca en el trabajo de todos los días: la plataforma en app.trevol.si, el sitio trevol.si, el teclado, la factura electrónica, la papelería, el correo y las redes. En cada pieza manda el contenido; la marca lo firma.
Por dentro, Trevol es claro y espacioso: una barra lateral angosta de íconos con etiqueta, una superficie blanca de esquinas redondeadas, el buscador grande arriba, las píldoras de los módulos, tarjetas «de un vistazo», tablas de facturas con su estado y un formulario de factura con su barra inferior. La letra es generosa: Inter de 15 px y nada por debajo de 14 px, salvo los atajos de teclado. Manda el neutro y el verde orienta.
Maquetas ilustrativas de una sola historia: Tostadora Monteverde S.A.S., el sábado 10 de octubre de 2026 a las 9:42 a. m. Las cifras cuadran entre pantallas y los NIT tienen un dígito de verificación válido; las tarifas, las retenciones y la resolución son de ejemplo. Las tres pantallas usan los tokens de trevol-colores.css.
trevol.si es la puerta de entrada y se parece al producto que vende: Blanco y Niebla, el logotipo arriba, un titular grande en Figtree 800 y la plataforma real en pantalla, no una ilustración. El titular es la frase del fundador: la forma fácil e inteligente de llevar la contabilidad y facturar. Debajo, la banda Verde Trevol con el Campo y «Todo cuadra.», bloques con recortes de la plataforma y el pie en Selva, con trevol.si en Chispa.
Maqueta ilustrativa de la página de inicio, a 1440 × 900 px en el escritorio y a 390 × 844 px en el teléfono, donde el logotipo va en su mínimo, 120 px. Los recortes salen de las pantallas de app.trevol.si. Todos los datos son de ejemplo, también la razón social, el NIT y la ciudad del pie: antes de publicar se reemplazan por los datos legales de la empresa.
El contador digita cientos de comprobantes al mes. La pantalla de captura habla el idioma de la plataforma: letra de 15 px, campos de 42 px, la banda Niebla de la tabla y la barra inferior oscura. El foco siempre se ve, el atajo está escrito junto a la acción y, al contabilizar, el siguiente comprobante ya está abierto con el cursor en su primer campo.
Prototipo ilustrativo a tamaño real: 880 × 470 px. Foco de 2 px en Azul Enlace, separado 2 px con Blanco del campo. En la barra oscura, el botón va en Chispa con texto Grafito, como en la factura.
Comprobante de egresoCE-0412
BorradorOctubre 2026 · período abierto| Cuenta | Descripción | Débito | Crédito |
|---|---|---|---|
| 220505 Proveedores nacionales | Café verde excelso, 2 sacos | 3.200.000,00 | — |
| 112005 Bancolombia *4021 | Transferencia | — | 3.200.000,00 |
| Cuenta del PUC | — | — |
Comprobante de egresoCE-0413
BorradorOctubre 2026 · período abiertoContabilizado. CE-0412 quedó en el libro por $ 3.200.000.Ver comprobante
| Cuenta | Descripción | Débito | Crédito |
|---|---|---|---|
| Cuenta del PUC | — | — | |
| Cuenta del PUC | — | — |
La representación gráfica es un documento de trabajo: Blanco, Grafito y un toque de Verde Trevol en el logotipo, el filete y el sello. El número va en Selva. Inter en 9,5 pt para el texto y 8,5 pt en la tabla de ítems, con cifras tabulares. Al pie, trevol.si, aparte de los datos del emisor, del CUFE y del QR.
Muestra ilustrativa · Sin validez fiscal
Trevol S.A.S.
NIT 900.123.456-8, responsable de IVA
Bogotá D. C., Colombia
facturas@trevol.si
Factura electrónica de venta
FE-1024
Adquirente
Tostadora Monteverde S.A.S.
NIT 901.384.552-1
Dirección
Bogotá D. C., Colombia
contabilidad@tostadoramonteverde.co
Medio de pago
Transferencia
Orden de compra OC-0388
| Descripción | Cant. | Valor unitario | IVA | Total |
|---|---|---|---|---|
| Suscripción Trevol Contabilidad, plan Pyme, octubre 2026 | 1 | 289.000,00 | 19 % | 289.000,00 |
| Usuarios adicionales, octubre 2026 | 2 | 49.000,00 | 19 % | 98.000,00 |
| Trevol Exógena, año gravable 2026 | 1 | 450.000,00 | 19 % | 450.000,00 |
90 × 50 mm con esquinas de 3 mm, en papel blanco estucado mate: en papel sin estucar el verde vivo se apaga. El frente va sin fondo impreso, con los datos y trevol.si en negro. El reverso, en Verde Trevol liso a sangre, con la firma calada en el blanco del papel. Sobre el verde no va texto pequeño, por eso la dirección va en el frente.
Laura Gómez Ríos
Directora de producto
laura.gomez@trevol.si
+57 300 123 4567
trevol.si
Todo cuadra.
Muestra con datos de ejemplo. El arte final está en assets/impresion/: trevol-tarjeta-tinta-directa.pdf y trevol-tarjeta-cmyk.pdf, con los datos de cada persona entre corchetes.
Texto en vivo, que se puede copiar y que el cliente de correo muestra con su propia fuente. Solo el logotipo va como imagen, en PNG de 320 px de ancho mostrado a 160 px, con 16 px libres arriba y abajo. Debajo, el teléfono, el correo @trevol.si y trevol.si en Verde acción. Sin frases motivacionales, bandas promocionales ni íconos de redes de colores.
Plantilla editable: trevol-firma-de-correo.html.
DeLaura Gómez Ríos, laura.gomez@trevol.si
Paracontabilidad@tostadoramonteverde.co
AsuntoFactura FE-1024 validada
Hola, Andrea:
La DIAN validó la factura FE-1024 de octubre. Te la adjunto en PDF y en XML. El total es de $ 996.030 y vence el 8 de noviembre.
Quedo atenta.
Laura Gómez Ríos
Directora de producto
+57 300 123 4567laura.gomez@trevol.sitrevol.si
Una idea por publicación, en Figtree a buen tamaño y sobre los fondos de marca. El avatar es el trébol micro en Blanco sobre Verde Trevol: las redes lo muestran en círculo y casi siempre a 32 o 48 px. trevol.si va en el campo del sitio web y, en las piezas, como dirección: en Verde acción sobre Blanco o en Chispa sobre Selva, nunca sobre el Verde Trevol.
trevolBogotá, Colombia
Contabilidad sin vueltas.
trevol Llegan los movimientos del banco y Trevol sugiere la cuenta; tú revisas y contabilizas. ¿Todo cuadra? trevol.si
trevolBogotá, Colombia
Cien comprobantes, cero clics.
trevol En Trevol, Ctrl+Enter contabiliza y el siguiente comprobante ya está listo para digitar.
Vista previa de un enlace compartido, con og-image-1200x630.png: el logotipo negativo de 640 px y «Todo cuadra.» en Figtree 800 a 96 px sobre Verde Trevol liso, y al pie una franja Selva con trevol.si en Chispa. Todo va centrado porque cada red recorta los bordes a su manera. En una vista previa de 300 px, como la de WhatsApp, el logotipo queda en 160 px, por encima de su mínimo de 120 px; la firma, en 24 px, y el dominio, en 16 px.
Carta, con márgenes de 15 mm y 18 mm arriba. Logotipo arriba a la izquierda, título en Figtree 700 a 18 pt, texto en Inter a 9,5 pt y trevol.si en el pie. El sello circular firma el documento junto a la persona responsable; nunca reemplaza al logotipo.
Trevol S.A.S.
NIT 900.123.456-8
Bogotá D. C., Colombia
Bogotá D. C., 10 de octubre de 2026
Trevol S.A.S., NIT 900.123.456-8, hace constar que Tostadora Monteverde S.A.S., NIT 901.384.552-1, está a paz y salvo por concepto de su suscripción a Trevol Contabilidad hasta el 30 de septiembre de 2026.
Se expide a solicitud del interesado.
Andrés Quintero Mejía
Director financiero
Capítulo 9
Todos los archivos de la marca, con su uso. Los SVG son la fuente; los PNG salen de ellos. Si una pieza no está aquí, no es un archivo de uso.
La versión en PDF es para imprimir y compartir; esta página es la de referencia. Los dos son documentos de consulta: no sirven como prueba de color ni como arte final. Los artes finales de imprenta, las hojas de prueba de color y la ficha para el impresor están en assets/impresion/.
En la web y en el producto, siempre el SVG. En documentos y presentaciones, el PNG de 1024 px.
Colores, tipografías y el motivo Campo, listos para usar.
Tokens de color en cuatro temas y el favicon. El código del manifiesto web está en el capítulo 4.
La ficha va con cada pedido. Los artes ya vienen en tinta directa o en cuatricromía: no se reconvierte el color.
102 entradas, en la carpeta assets/ del proyecto y en los recursos y las fuentes de este manual. Todos son archivos de uso.
assets/logo/svg. Vectores con geometría propia: sin fuentes, máscaras ni degradados. Son la fuente de todo lo demás. El lienzo es el del viewBox; en los logotipos va en u.
| Archivo | Qué es | Cuándo se usa | Lienzo | Peso |
|---|---|---|---|---|
| trevol-logo-horizontal.svg | Logotipo principal en Verde Trevol | Firma principal desde 120 px (30 mm a una tinta), sobre Blanco, Niebla o fondos claros neutros. | 528,9 × 155 u | 3,3 KB |
| trevol-logo-horizontal-negativo.svg | Negativo: letras y trébol en Blanco | Sobre Verde Trevol, Verde acción, Selva, Noche, negro o fotos oscuras con placa. | 528,9 × 155 u | 3,4 KB |
| trevol-logo-horizontal-grafito.svg | Una tinta de marca, Grafito | Documentos y piezas a una tinta sobre Blanco o Niebla. Nuevo en la versión 2. | 528,9 × 155 u | 3,3 KB |
| trevol-logo-horizontal-negro.svg | Una tinta, negro | Reproducción técnica: impresión en blanco y negro, prensa y sellos de caucho. | 528,9 × 155 u | 3,4 KB |
| trevol-logo-horizontal-blanco.svg | Una tinta, blanco | Alias del negativo para producción a una tinta: bordado, vinilo o serigrafía sobre fondos oscuros. Mismo dibujo y color. | 528,9 × 155 u | 3,3 KB |
| trevol-logo-vertical.svg | Firma vertical | Formatos verticales y cuadrados, desde 160 px de ancho. | 528,9 × 375 u | 4,1 KB |
| trevol-logo-vertical-negativo.svg | Firma vertical, negativo | Formatos verticales y cuadrados sobre fondos oscuros. | 528,9 × 375 u | 4,2 KB |
| trevol-isotipo.svg | Isotipo maestro, Verde Trevol | El trébol solo, desde 48 px de alto. | 100 × 100 | 0,9 KB |
| trevol-isotipo-mono.svg | Isotipo maestro, una tinta | Negro, para reproducir a una tinta. No se recolorea a mano. | 100 × 100 | 0,9 KB |
| trevol-isotipo-negativo.svg | Isotipo maestro, Blanco | El trébol sobre Verde Trevol, Verde acción, Selva y fondos oscuros. | 100 × 100 | 0,9 KB |
| trevol-isotipo-micro.svg | Isotipo micro | Tréboles de 16 a 47 px de alto. | 16 × 16 | 0,8 KB |
| trevol-isotipo-micro-negativo.svg | Isotipo micro, Blanco | El micro sobre fondos oscuros conocidos. | 16 × 16 | 0,8 KB |
| favicon.svg | Favicon vectorial | Verde acción en el tema claro y Chispa en el oscuro. Para navegadores con favicon SVG. | 16 × 16 | 0,7 KB |
| favicon-placa.svg | Favicon con placa | Placa Verde Trevol con el trébol micro en Blanco. Origen del ICO y de los PNG. | 16 × 16 | 1,3 KB |
| trevol-app-icon.svg | Ícono de app con esquinas continuas | Web, presentaciones y materiales, donde la plataforma no aplica máscara. | 1024 × 1024 | 1,5 KB |
| trevol-app-icon-pequeno.svg | Ícono de app, dibujo micro | Mosaicos de 24 a 83 px de lado. | 1024 × 1024 | 1,5 KB |
| trevol-app-icon-ios-claro.svg | Ícono a sangre, claro | Catálogo de íconos de iOS y macOS; ícono enmascarable de la app web. | 1024 × 1024 | 1,1 KB |
| trevol-app-icon-ios-oscuro.svg | Ícono a sangre, oscuro | Apariencia oscura de iOS y macOS: Chispa sobre Selva. | 1024 × 1024 | 1,1 KB |
| trevol-app-icon-ios-tintado.svg | Ícono a sangre, tintado | Apariencia tintada de iOS y macOS (el sistema aplica el tinte). | 1024 × 1024 | 1,1 KB |
| trevol-sello.svg | Sello circular | Solo en piezas que ya son círculos: sello de la factura, adhesivos e impresos. Desde 80 px. | 200 × 200 | 1,0 KB |
assets/logo/png. Cada pieza a 512 y 1024 px de ancho, y a su tamaño de uso con su @2x. Los de 512 y 1024 px de las piezas pequeñas (micro, ícono pequeño, favicon) son solo de referencia.
| Pieza | Qué es | Tamaños (px de ancho) |
|---|---|---|
| trevol-logo-horizontal | Logotipo principal en Verde Trevol | |
| trevol-logo-horizontal-negativo | Negativo: letras y trébol en Blanco | |
| trevol-logo-horizontal-grafito | Una tinta de marca, Grafito | |
| trevol-logo-horizontal-negro | Una tinta, negro | |
| trevol-logo-horizontal-blanco | Una tinta, blanco | |
| trevol-logo-vertical | Firma vertical | |
| trevol-logo-vertical-negativo | Firma vertical, negativo | |
| trevol-isotipo | Isotipo maestro, Verde Trevol | |
| trevol-isotipo-mono | Isotipo maestro, una tinta | |
| trevol-isotipo-negativo | Isotipo maestro, Blanco | |
| trevol-isotipo-micro | Isotipo micro | |
| trevol-isotipo-micro-negativo | Isotipo micro, Blanco | |
| favicon | Favicon, mapa de bits de referencia | |
| favicon-placa | Favicon con placa | |
| trevol-app-icon | Ícono de app con esquinas continuas | |
| trevol-app-icon-pequeno | Ícono de app, dibujo micro | |
| trevol-app-icon-ios-claro | Ícono a sangre, claro | |
| trevol-app-icon-ios-oscuro | Ícono a sangre, oscuro | |
| trevol-app-icon-ios-tintado | Ícono a sangre, tintado | |
| trevol-sello | Sello circular |
assets/iconos. Para el sitio, el manifiesto web, las tiendas de apps y los perfiles en redes. El manifiesto y el fragmento del <head> están listos para copiar.
| Archivo | Qué es | Dónde va | Medidas | Peso |
|---|---|---|---|---|
| app-icon-1024.png | Ícono claro a sangre, sin canal alfa | App Store: el sistema aplica la máscara. | 1024 × 1024 px | 13,3 KB |
| apple-touch-icon-180.png | Ícono a sangre de 180 px, sin alfa | Accesos directos de iOS y iPadOS. | 180 × 180 px | 1,9 KB |
| avatar-redes-400.png | Avatar para redes | Perfil en redes: trébol micro en Blanco sobre Verde Trevol, envolvente del 68 %. | 400 × 400 px | 4,5 KB |
| bimi-trevol.svg | Isotipo para BIMI, en SVG Tiny PS | El logo junto al remitente en los correos de @trevol.si: trébol Blanco sobre Verde Trevol, a sangre. Se publica en trevol.si/bimi/ cuando el correo ya está autenticado. | Vector, 400 × 400 | 2,8 KB |
| favicon-16.png | Favicon con placa de 16 px, dibujado a mano | Respaldo en PNG. | 16 × 16 px | 0,2 KB |
| favicon-32.png | Favicon con placa de 32 px | Respaldo en PNG. | 32 × 32 px | 0,6 KB |
| favicon-48.png | Favicon con placa de 48 px | Respaldo en PNG. | 48 × 48 px | 0,9 KB |
| favicon.ico | Favicon con placa: 16, 32 y 48 px | Navegadores que no usan el SVG. | 16, 32 y 48 px | 14,7 KB |
| favicon.svg | Favicon vectorial | Copia de assets/logo/svg/favicon.svg para trevol.si y app.trevol.si. | Vector, 16 × 16 | 0,7 KB |
| head-ejemplo.html | Fragmento del <head> para copiar | Favicon, ícono de iOS, manifiesto, color del tema e imagen para compartir. Con este fragmento, Chrome usa el favicon SVG. | Texto | 2,5 KB |
| icon-192.png | Ícono con esquinas continuas, 192 px | Manifiesto web, propósito any. | 192 × 192 px | 2,8 KB |
| icon-512.png | Ícono con esquinas continuas, 512 px | Manifiesto web, propósito any. | 512 × 512 px | 7,7 KB |
| icon-maskable-192.png | Ícono a sangre, 192 px | Manifiesto web, propósito maskable. | 192 × 192 px | 2,1 KB |
| icon-maskable-512.png | Ícono a sangre, 512 px | Manifiesto web, propósito maskable. También es el ícono de la ficha de Google Play, que lo pide a 512 × 512 px. | 512 × 512 px | 5,7 KB |
| og-image-1200x630.png | Imagen para compartir enlaces | Open Graph y tarjetas de X, LinkedIn y WhatsApp: logotipo negativo y «Todo cuadra.» sobre Verde Trevol liso, con trevol.si en Chispa sobre una franja Selva. | 1200 × 630 px | 24,4 KB |
| site.webmanifest | Manifiesto de la aplicación web | Se enlaza desde el <head>: nombre, colores e íconos any y maskable. Validado en Chrome. | Texto | 0,8 KB |
assets/color y assets/tipografia. Los valores de este manual salen de estos archivos.
| Archivo | Qué es | Para qué | Peso |
|---|---|---|---|
| trevol-colores.json | Tokens de color, fuente de verdad | Formato DTCG 2025.10: primitivos y semánticos en cuatro temas. | 79,7 KB |
| trevol-colores.css | Variables CSS generadas | Primitivos (--trevol-*), semánticos (--color-*) y puente con el producto. | 35,2 KB |
| paleta.svg | Muestrario de la paleta | Referencia visual con HEX, RGB, CMYK y tinta directa. | 283,7 KB |
assets/impresion. Artes finales en tinta directa y en cuatricromía, hojas de prueba de color y fichas para el impresor, el fabricante de sellos y el bordador. Los artes son PDF con sangrado, marcas de corte y texto en trazos; la tarjeta y la hoja membretada traen los datos entre corchetes.
| Archivo | Qué es | Para qué | Peso |
|---|---|---|---|
| trevol-ficha-para-el-impresor.pdf | Ficha para el impresor | Una página con colores, tolerancias, papeles, tamaños mínimos y el espacio para firmar la prueba de color. Va con cada pedido de impresión. | 93,2 KB |
| trevol-tarjeta-tinta-directa.pdf | Tarjeta, arte final en tinta directa | Frente y reverso, 90 × 50 mm: PANTONE 2424 C y negro sobre cartulina estucada mate de 350 g. La versión recomendada. | 1,5 MB |
| trevol-tarjeta-cmyk.pdf | Tarjeta, arte final en cuatricromía | La misma tarjeta para prensa digital o para un pliego que ya va en cuatricromía. | 1,5 MB |
| trevol-tarjeta-guia-de-corte.pdf | Tarjeta, guía de corte | El corte, el sangrado, la zona segura y las esquinas, dibujados. No se imprime. | 249,0 KB |
| trevol-hoja-membretada-tinta-directa.pdf | Hoja membretada, arte final en tinta directa | Carta: PANTONE 2424 U y negro sobre bond blanco de 90 g. La versión recomendada en offset. | 1,7 MB |
| trevol-hoja-membretada-negro.pdf | Hoja membretada, a una tinta | La misma hoja en negro. | 1,7 MB |
| trevol-hoja-membretada-cmyk-prensa-digital.pdf | Hoja membretada, en cuatricromía | Solo para prensa digital, con una muestra aprobada del mismo equipo y papel. | 1,4 MB |
| trevol-hoja-de-prueba-de-color-estucado.pdf | Hoja de prueba de color, estucado | Todas las tintas, los tamaños mínimos con el logotipo a 30 mm, los calados y el espacio para firmar. | 1,9 MB |
| trevol-hoja-de-prueba-de-color-bond.pdf | Hoja de prueba de color, bond | PANTONE 2424 U, negro y los tamaños mínimos sobre papel bond, con el espacio para firmar. | 2,1 MB |
| trevol-sello-de-caucho-isotipo-20mm.svg | Sello de caucho, isotipo de 20 mm | Isotipo maestro a una tinta y a tamaño real. No se reduce por debajo de 12 mm. | 1,8 KB |
| trevol-sello-de-caucho-isotipo-20mm.pdf | Sello de caucho, isotipo de 20 mm, en PDF | El mismo arte para el fabricante que pide PDF. | 1,8 KB |
| trevol-sello-de-caucho-isotipo-20mm-1200ppp.png | Sello de caucho, isotipo de 20 mm, mapa de bits | El mismo arte a 1200 puntos por pulgada, en blanco y negro. | 12,4 KB |
| trevol-sello-de-caucho-isotipo-10mm.svg | Sello de caucho, isotipo de 10 mm | Dibujo micro, con los canales más abiertos, para sellos pequeños. No se reduce por debajo de 6 mm. | 1,7 KB |
| trevol-sello-de-caucho-isotipo-10mm.pdf | Sello de caucho, isotipo de 10 mm, en PDF | El mismo arte para el fabricante que pide PDF. | 1,8 KB |
| trevol-sello-de-caucho-isotipo-10mm-1200ppp.png | Sello de caucho, isotipo de 10 mm, mapa de bits | El mismo arte a 1200 puntos por pulgada, en blanco y negro. | 6,4 KB |
| trevol-guia-de-bordado.pdf | Guía de bordado | Una página con tamaños, pautas de ponchado, hilos candidatos y el espacio para firmar la muestra bordada. | 80,2 KB |
| trevol-bordado-isotipo-25mm.svg | Bordado, isotipo de 25 mm | Arte del dibujo maestro para el ponchado, desde 20 mm de alto. | 1,8 KB |
| trevol-bordado-isotipo-16mm.svg | Bordado, isotipo de 16 mm | Arte del dibujo micro para el ponchado, de 14 a 19 mm de alto. | 1,6 KB |
| valores-finales.json | Valores de impresión de los 14 colores | Cuatricromía, tinta directa, color previsto y distancia al color de pantalla. De aquí salen los artes y la ficha. | 33,4 KB |
manual/recursos. Las teselas y la firma se generan con este manual desde los archivos de la marca; las pantallas de app.trevol.si y el sitio trevol.si salen de recursos/plataforma/final.
| Archivo | Qué es | Para qué | Tipo | Peso |
|---|---|---|---|---|
| trevol-campo-sobre-verde.svg | Tesela del motivo Campo sobre Verde Trevol | Portadas, redes y empaques; se repite en mosaico. Contraste 1,16:1. | Recurso de producción | 2,2 KB |
| trevol-campo-sobre-selva.svg | Tesela del motivo Campo sobre Selva | Cierres y piezas oscuras de marca; se repite en mosaico. Contraste 1,19:1. | Recurso de producción | 2,2 KB |
| trevol-campo-sobre-niebla.svg | Tesela del motivo Campo sobre Niebla | Fondos claros de bienvenida y del inicio de sesión; se repite en mosaico. Contraste 1,09:1. | Recurso de producción | 2,2 KB |
| trevol-firma-de-correo.html | Firma de correo en HTML | Se pega en el cliente de correo; texto en vivo, el logotipo como imagen y trevol.si. El logo se carga de https://trevol.si/firma/: la plantilla se reparte cuando el sitio esté publicado. | Plantilla editable | 1,3 KB |
| inicio@2x.png | Pantalla de la plataforma: app.trevol.si/inicio | Maqueta de 2880 × 1800 px para presentaciones y para el equipo de producto, con datos de ejemplo. | Maqueta ilustrativa | 539,6 KB |
| facturas@2x.png | Pantalla de la plataforma: app.trevol.si/facturas | Maqueta de 2880 × 1800 px para presentaciones y para el equipo de producto, con datos de ejemplo. | Maqueta ilustrativa | 577,4 KB |
| factura@2x.png | Pantalla de la plataforma: app.trevol.si/facturas/nueva | Maqueta de 2880 × 1800 px para presentaciones y para el equipo de producto, con datos de ejemplo. | Maqueta ilustrativa | 626,8 KB |
| inicio-detalle@2x.png | Detalle a tamaño real: app.trevol.si/inicio | Hasta 1048 px de ancho de CSS, a 2x: la letra de la plataforma sin reducir, para presentaciones. | Maqueta ilustrativa | 213,5 KB |
| facturas-detalle@2x.png | Detalle a tamaño real: app.trevol.si/facturas | Hasta 1048 px de ancho de CSS, a 2x: la letra de la plataforma sin reducir, para presentaciones. | Maqueta ilustrativa | 314,8 KB |
| factura-detalle@2x.png | Detalle a tamaño real: app.trevol.si/facturas/nueva | Hasta 1048 px de ancho de CSS, a 2x: la letra de la plataforma sin reducir, para presentaciones. | Maqueta ilustrativa | 215,8 KB |
| sitio@2x.png | Sitio trevol.si en el escritorio | La página de inicio a 2880 × 1800 px, lo que se ve al abrirla. La página entera: sitio-completo.png. | Maqueta ilustrativa | 625,0 KB |
| sitio-completo.png | Sitio trevol.si, la página entera | 1440 px de ancho: portada, banda de marca, tres bloques con el producto, para contadores y pie. | Maqueta ilustrativa | 760,0 KB |
| sitio-movil@2x.png | Sitio trevol.si en el teléfono | 780 × 1688 px, un teléfono de 390 px a 2x, con el logotipo en su mínimo, 120 px. | Maqueta ilustrativa | 148,8 KB |
manual/fuentes. Subconjuntos WOFF2 de los archivos completos de github.com/google/fonts, con todos sus rasgos OpenType. Los genera manual/fuente/fuentes.py.
| Archivo | Qué es | Para qué | Peso |
|---|---|---|---|
| inter.woff2 | Inter, redonda, de 100 a 900 | Todo el texto. Con cero con barra, I con remates y l con cola (zero, ss02). | 132,1 KB |
| inter-italica.woff2 | Inter, itálica, de 100 a 900 | Extranjerismos, títulos de obras y palabras citadas como palabras. | 146,3 KB |
| figtree.woff2 | Figtree, de 300 a 900 | Titulares de marca, en 700 y 800. | 20,8 KB |
| jetbrains-mono.woff2 | JetBrains Mono, de 100 a 800 | Solo código en la documentación para desarrolladores. | 46,9 KB |
| OFL-Inter.txt | Licencia de Inter | SIL Open Font License 1.1: viaja con el archivo. | 4,3 KB |
| OFL-Figtree.txt | Licencia de Figtree | SIL Open Font License 1.1: viaja con el archivo. | 4,3 KB |
| OFL-JetBrainsMono.txt | Licencia de JetBrains Mono | SIL Open Font License 1.1: viaja con el archivo. | 4,3 KB |
| origen.json | Origen de los archivos | Commit de github.com/google/fonts, juego de caracteres y rasgos de cada subconjunto. | 1,8 KB |
| origen.json | Instancias estáticas para el PDF | Once WOFF2 de pesos fijos (Inter, Figtree y JetBrains Mono) que usa solo la impresión, para que el PDF no lleve fuentes Type 3. Las genera fuentes_imprenta.py. | 4,7 KB |
Esta marca nació del boceto y del estudio de color del fundador de Trevol. Esta guía es la versión pública de su manual de marca: lo necesario para usarla bien.
Manual de marca, versión 3.0, 11 de octubre de 2026. Logo: dibujo 1.2 (trébol completo), color 2.0. Sistema de color 2.0.0.
Todo cuadra.
Trevol, manual de marca 3.0
trevol.si
