Manual de Identidad Visual — v1.0 / Marzo 2026

Manual de
Marca .

Una marca para los que hacen. Sin humo, sin versos. Tecnología con los pies en la tierra y las manos en la masa.

tinnto.co

¿Por qué Tinnto?

El nombre viene de ahí: del tinto. De sentarse a hablar en serio, sin rodeos, con algo real en la mano. Eso es lo que hacemos — productos reales para problemas reales.

"No vendemos el futuro. Construimos el presente que otros prometen."

La metáfora fundacional

Tinnto nace del vino tinto argentino — ese ritual de juntarse, pensar, debatir y crear. No es casual. En un mundo saturado de promesas tecnológicas vacías, elegimos ser la mesa donde las cosas se resuelven de verdad. Cada producto que hacemos es como una buena cosecha: lleva tiempo, atención y criterio.

Nuestra diferencia

No somos una consultora de tecnología más. No vendemos humo ni presentaciones con palabras vacías. Somos una fábrica — hacemos cosas que funcionan. Nuestro foco está en la persona, no en la herramienta. La tecnología es un medio, nunca el protagonista. El protagonista sos vos y tu problema.

Propósito

Resolver problemas reales con productos que la gente entiende, usa y valora. Sin complicar lo simple.

Promesa

Cada cosa que hacemos va a funcionar, va a ser clara, y va a estar pensada para personas reales.

Posición

La fábrica de software que piensa como humano. Donde la tecnología se siente como una extensión natural, no como un obstáculo.

Lo que nos define

Estos valores no son un poster en la pared. Son decisiones que tomamos todos los días, en cada producto, en cada conversación.

Tierra

Los pies en el piso, siempre. No prometemos lo que no podemos hacer. No hablamos de lo que no entendemos. Cada producto nace de un problema real, no de una tendencia.

Verdad

Decimos las cosas como son. Si algo no se puede, lo decimos. Si hay un camino mejor, lo proponemos. Transparencia total, sin filtro corporativo.

Oficio

Sabemos hacer lo que hacemos. No tercerizamos lo esencial. Cada línea de código, cada decisión de diseño, tiene a alguien atrás que sabe por qué está ahí.

Desafío

No aceptamos "así se hace siempre". Cuestionamos el status quo porque creemos que hay una forma mejor. No somos rebeldes sin causa — somos inconformistas con propósito.

Espectro de personalidad

Formal
Casual
Serio
Lúdico
Técnico
Humano
Tradicional
Disruptivo
Reservado
Expresivo

Si Tinnto fuera una persona, sería...

Directo Confiable Inconformista Cálido Artesanal Curioso Honesto Terrenal

Cómo nos presentamos

El tagline reemplaza "AI & Software Factory". Proponemos opciones que reflejan nuestra filosofía sin mencionar tecnología como protagonista.

Fábrica de productos digitales.
Simple, directo. Define lo que hacemos sin adornos. "Fábrica" evoca oficio, producción real, las manos en la masa. "Digital" es el medio, no el protagonista.
A
Hacemos lo que otros prometen.
Confrontativo, desafiante. Posiciona directamente contra el mercado de humo. Tiene actitud Apple — corto, memorable, con un golpe de confianza.
B
Software con tierra.
Poético y argentino. Conecta con la metáfora del vino y la raíz del nombre. Sugiere algo real, orgánico, que creció desde abajo.
C
Productos que se entienden.
Centrado en la experiencia humana. Lo que hacemos tiene que ser claro, usable, real. Sin manual de 200 páginas. Sin curva de aprendizaje absurda.
D
Donde la tecnología se siente humana.
Aspiracional pero terrenal. Pone al humano en el centro sin negar que hacemos tecnología. Es una promesa de experiencia, no de features.
E

Sistema de mensajes

Mensaje primario

Usamos tecnología para resolver problemas reales de personas reales. Sin rodeos, sin verso.

Mensaje secundario

Somos una fábrica de productos digitales con raíces argentinas, visión global y la convicción de que lo simple funciona mejor.

Mensaje de reclutamiento

Si te cansaste de vender humo y querés hacer cosas que importen, acá hay lugar.

Palabras que nos definen vs. palabras que evitamos

Usamos

  • Fábrica, producto, construir, hacer
  • Resolver, entender, simplificar
  • Personas, equipos, gente
  • Real, concreto, tangible
  • Desafiar, cuestionar, proponer

Evitamos

  • Inteligencia artificial, IA, AI, machine learning
  • Disruptivo, ecosistema, sinergia
  • Leveragear, escalar, pivotar
  • Soluciones end-to-end, 360°
  • Revolucionar, transformación digital

Color

Negro profundo y naranja terroso. Como un atardecer sobre tierra seca. El contraste entre lo sólido y lo cálido define todo lo que hacemos visualmente.

Colores primarios

Negro Tinnto
#0A0A0A
Fondos principales, textos
Naranja Tierra
#C4703F
Acentos, CTAs, highlights
Blanco
#FAFAFA
Fondos claros, texto sobre oscuro

Colores secundarios

Negro Suave
#1A1A1A
Cards oscuros, variación de fondo
Gris Oscuro
#2D2D2D
Bordes, separadores, hover states
Gris Medio
#6B6B6B
Texto secundario
Hueso
#F5F0EB
Fondos cálidos, secciones alternas

Espectro naranja

Naranja Oscuro
#A85A2F
Hover, estados activos
Naranja Claro
#D4885A
Ilustraciones, gráficos
Terracota
#B5654A
Variante cálida para combinaciones
Naranja Tenue
#E8C4A8
Fondos sutiles, badges, tags

Proporciones de uso

La paleta se usa con criterio: el negro domina, el blanco respira, y el naranja interrumpe con intención. Nunca más del 15% de naranja en una composición.

55%
25%
10%
10%

Combinaciones de contraste

Aa
Blanco sobre Negro — Ratio: 19.3:1 — WCAG AAA
Aa
Naranja sobre Negro — Ratio: 5.1:1 — WCAG AA
Aa
Negro sobre Blanco — Ratio: 19.3:1 — WCAG AAA
Aa
Blanco sobre Naranja — Ratio: 4.1:1 — WCAG AA (solo texto grande)

Tipo

Tres familias con roles claros. La display manda, la body acompaña, la editorial da carácter. Ninguna grita "tech" — todas dicen "persona".

Display — Títulos y headings
Space Grotesk
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&
font-family: 'Space Grotesk' Weights: 300–700 letter-spacing: -0.03em

Geométrica pero con carácter. Tiene la limpieza de una sans-serif moderna sin caer en lo genérico. Las terminaciones ligeramente curvas le dan humanidad.

Body — Textos y UI
Inter
La tecnología tiene que desaparecer para que las personas puedan hacer lo que importa. No construimos herramientas para impresionar — construimos herramientas para usar.
font-family: 'Inter' Weights: 300–900 line-height: 1.6–1.8
Editorial — Citas y momentos especiales
Space Mono
"Lo simple funciona mejor."
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%& → ≠ ≤ ≥
font-family: 'Space Mono' Weights: 300–700 Uso: citas, código, destacados

Monoespaciada, geométrica, de fábrica. Compañera natural de Space Grotesk — misma familia visual. Cada carácter ocupa el mismo ancho, como una máquina de escribir moderna. Siempre en regular, nunca en itálica. Dice "hacemos cosas con las manos" sin necesitar explicarlo.

Escala tipográfica

H1 — Display

Desafiamos lo establecido

56px / 700 / -0.03em

H2 — Sección

Productos con sentido

40px / 700 / -0.02em

H3 — Subtítulo

La tecnología se siente natural

24px / 600 / -0.01em

Body

Construimos productos que resuelven problemas concretos. Cada decisión de diseño tiene un por qué, cada línea de código tiene un propósito.

16px / 400 / line-height 1.7

Caption / Labels (Mono)

SOBRE NOSOTROS — PRODUCTOS — CONTACTO

12px / 500 / Space Mono / uppercase

El lenguaje visual

Además del logo y la tipografía, Tinnto tiene un set de elementos gráficos que dan ritmo y personalidad a las piezas. Cada uno tiene un significado conectado con nuestra esencia.

La Onda

Curvas suaves que evocan el vino girando en la copa, el fluir de las ideas, lo orgánico. Nada rígido, nada mecánico. Son las líneas que separan secciones, que dan movimiento a los fondos, que recuerdan que detrás de todo hay algo vivo.

Uso: Separadores de sección, fondos decorativos, headers de piezas editoriales, transiciones en video.

Hacemos lo que otros prometen

El Punto

Un punto naranja que cierra las frases con convicción. Representa lo definitivo, lo concreto, la afirmación. No es un punto final — es una declaración. Viene del punto sobre la "o" del logo original, llevado a un plano expresivo.

Uso: Cierre de titulares en piezas gráficas, bullet decorativo en listas, acento visual junto a frases clave. Siempre naranja (#C4703F).

La Línea Tierra

Un trazo horizontal que evoca el horizonte, la base, los pies en la tierra. Es el elemento más sutil y estructural: da orden sin rigidez, separa sin cortar. Es lo que sostiene todo lo demás.

Uso: Subrayados de títulos, separadores mínimos, acento debajo de nombres o cargos. Ancho variable según contexto.

Hernán Patrón Costas

Co-founder

"Lo simple
funciona mejor."

La Mancha de Tinta

Una forma orgánica, como tinta derramada o vino en un mantel. Es lo imperfecto, lo real, lo que deja marca. Refuerza la metáfora fundacional y aporta textura humana a las composiciones.

Uso: Fondo de citas, acompañamiento decorativo en esquinas, overlay sutil en fotografías para momentos editoriales. Siempre en baja opacidad (10-30%).

El Marco Editorial

Dos esquinas abiertas (superior-izquierda e inferior-derecha) que enmarcan sin encerrar. Evoca el encuadre fotográfico, la ventana al mundo real. No es un borde completo — es una sugerencia, una invitación a mirar.

Uso: Enmarcar fotografías, citas destacadas, contenido especial. Ideal para posts de redes sociales y piezas editoriales.

Tecnología con los pies
en la tierra.

Con textura de grano.

Overlay sutil que da calidez

Textura de Grano

Un ruido sutil que se aplica como overlay en fondos. Evoca papel artesanal, lo hecho a mano, lo analógico. Quita la frialdad digital y agrega una capa de humanidad a cualquier superficie.

Uso: Overlay en fondos sólidos (oscuros o claros) con opacidad entre 3% y 8%. Especialmente en heroes, headers y piezas impresas.

Reglas de composición

Menos es más

Nunca usar más de 2 elementos gráficos en una misma pieza. La foto y el texto ya hacen mucho trabajo — los elementos acompañan, no compiten.

El naranja con criterio

Los elementos gráficos siempre van en naranja (#C4703F) o en baja opacidad. Nunca en colores aleatorios. Son la firma visual de la marca.

Espacio para respirar

Los elementos nunca deben sentirse apretados. Necesitan aire alrededor para funcionar. Si no hay espacio, mejor no usarlos.

Lo visual dice todo

La fotografía es el corazón de la comunicación de Tinnto. Nada de bancos de imágenes genéricos. Nada de íconos flat. Fotos reales, de personas reales, haciendo cosas reales.

Sí. Esto es Tinnto.

Fotografía cinematográfica, cálida, centrada en personas reales haciendo cosas reales.

Mesa con vino y notebook

Del tinto al producto. Las mejores ideas nacen en mesas reales.

Reflejo en pantalla

La persona detrás de la pantalla. Siempre.

Conversación real

Conversaciones reales. Mesas con historia.

Whiteboard con wireframes

Las manos antes que las slides.

Pair programming

Detrás de cada línea hay alguien que sabe por qué está ahí.

Persona pensando y escribiendo

Antes de hacer, hay que pensar. Pero pensar con ganas.

Arquitectura brutalista

Construimos cosas que duran. Con la misma solidez que el hormigón.

Equipo caminando

Avanzamos juntos. Sin jerarquías, sin protocolo, con dirección.

Espacio creativo con carácter

Nuestro espacio se parece a nosotros. Cada objeto cuenta algo.

Oficina vivida

Espacios vividos. Plantas, libros, una guitarra. Las personas hacen el lugar.

Reglas de dirección fotográfica

Luz

Natural siempre que se pueda. Ventanales, golden hour, tungsteno cálido. Nunca flash directo ni luz fluorescente.

Color

Desaturado con subtono cálido (naranja, dorado, marrón). Nunca azul frío ni neón. El blanco y negro con alto contraste funciona para momentos editoriales.

Personas

Siempre en acción o pensando. Nunca posando ni mirando a cámara. Gestos naturales, ropa casual, sin dress code corporativo.

Ambiente

Real, vivido, imperfecto. Mesas desordenadas > escritorios vacíos. Objetos personales > espacios asépticos. Un poco de grano le da humanidad.

No. Esto no es Tinnto.

Evitar a toda costa. Son trampas visuales que nos hacen ver como todos los demás.

Cerebro digital
No

Cerebros digitales

La tecnología no es el protagonista. Las personas sí.

Mockups flotantes
No

Mockups flotantes

Dispositivos sin personas son objetos sin sentido.

Stock corporativo
No

Stock corporativo

Sonrisas forzadas, gráficos decorativos. El anti-Tinnto.

Gradientes neón
No

Gradientes neón

Futurismo vacío que no dice nada.

Tech bro posando
No

El "tech bro"

No vendemos personajes. Vendemos lo que hacemos.

Reunión de catálogo
No

Reuniones de catálogo

La perfección es sospechosa. Nadie trabaja así.

Proporciones y formatos

16:9
16:9
Hero, video, headers
1:1
1:1
Redes, avatares, grid
4:5
4:5
Instagram, portraits
9:16
9:16
Stories, Reels, TikTok

Cómo se ve en acción

Ejemplos de cómo se aplica el sistema de marca en distintos puntos de contacto.

Sitio web

tinnto.co
Productos Nosotros Blog Hablemos

Fábrica de productos digitales

Hacemos lo que
otros prometen.

Software con los pies en la tierra. Productos que la gente entiende, usa y valora.

Tarjeta de presentación

Hernán Patrón Costas

Co-founder

hernan@tinnto.co

tinnto.co

Fábrica de productos digitales.

Redes sociales

"Lo simple funciona mejor."

tinnto.co

No vendemos
el futuro.

Construimos el presente que otros prometen.

Tinnto

Fábrica de productos digitales

Cómo se ve en redes

Cada post usa los elementos gráficos de marca: punto naranja, marco editorial, onda, línea tierra, mancha de tinta y textura de grano. Acá van 7 ejemplos listos para adaptar.

tinnto.co

"El 90% de las transformaciones digitales son cambiar de herramienta sin cambiar de cabeza."

Instagram LinkedIn Opinión

Opinión fuerte + cita

Imagen de fondo con overlay, marco editorial en esquinas, cita en Space Mono con punto naranja. La línea tierra separa el label del contenido.

Caption: El problema nunca fue la herramienta. Podés tener la mejor tecnología del mundo, pero si no cambiás cómo pensás el problema, vas a seguir resolviendo lo mismo de otra manera.

Si tu producto necesita un manual de 200 páginas, el problema es el producto.

tinnto.co
Twitter/X Instagram Opinión

Tipográfico puro

Sin imagen, fondo naranja sólido. Solo tipografía grande (Space Grotesk) + línea tierra blanca + URL. Máximo impacto, mínimos elementos.

Caption: Lo simple funciona mejor. Siempre.

Caso real

47 planillas de Excel
para gestionar
la operación.
DESPUÉS
1 app.
6 semanas.
tinnto.co
LinkedIn Producto

Caso real con datos

Fondo negro, números grandes en Space Mono, mancha de tinta como textura de fondo. Datos concretos > adjetivos. La línea tierra cierra abajo.

Caption: Un cliente tenía 47 planillas de Excel, 3 personas dedicadas a mantenerlas, y errores todas las semanas. Ahora tiene una app que hace todo eso sola. Tardamos 6 semanas.

Sin jerarquías.
Sin protocolo.
Con dirección

Fábrica de productos digitales

Instagram 4:5 Cultura

Equipo + onda

Formato 4:5 para Instagram. Onda orgánica en la base, ícono de Tinnto arriba a la derecha, punto naranja cerrando el título. La foto muestra movimiento y energía.

Caption: Avanzamos juntos. La mejor idea gana, no importa de quién venga. Viernes de retro. Sin slides, con vino.

Las manos antes que las slides.

Instagram Behind the scenes

Craft minimal

La foto habla sola. Solo línea tierra + caption sutil + ícono chico. Menos es más. La imagen ocupa el 90% de la atención.

Caption: Pensar con las manos es pensar de verdad. Antes de abrir Figma, abrimos la pizarra.

No vendemos
el futuro

Construimos el presente que otros prometen.

Fábrica de productos digitales

Instagram 4:5 Opinión

Arquitectura + manifiesto

Imagen cinematográfica de brutalismo, marco editorial, punto naranja, línea tierra, label en Space Mono. La imagen transmite solidez, el texto transmite convicción.

Caption: Hay empresas que venden lo que va a pasar. Nosotros preferimos hacer lo que hace falta ahora. Menos roadmaps de 5 años. Más productos que funcionan hoy.

Viernes 23:47. Último push del sprint.

tinnto.co
Instagram Behind the scenes

Código de noche

Imagen atmosférica, overlay mínimo, línea tierra + texto sutil casi invisible. El post más "orgánico" — parece una foto casual, pero los elementos de marca están ahí.

Caption: Hay código que se escribe a las 9am con café. Y hay código que se escribe a las 23:47 con un tinto al lado, porque algo hizo click y no podés parar.

Errores a evitar

Tan importante como saber qué somos es saber qué no somos. Estas son las trampas en las que no queremos caer.

No somos "tech bros"

  • Nada de jerga de Silicon Valley sin sentido
  • No usamos "disruptivo", "ecosistema", "paradigma"
  • No hablamos de "escalar" como si fuera un verbo mágico
  • No fetichizamos la tecnología por la tecnología misma

No somos una consultora genérica

  • No hacemos PPTs bonitos que no llevan a nada
  • No ofrecemos "soluciones integrales 360°"
  • No hablamos de "transformación digital" como palabras vacías
  • No prometemos lo que no podemos hacer

No somos fríos ni robóticos

  • No usamos imágenes de robots, circuitos o cerebros digitales
  • No presentamos la tecnología como algo misterioso o intimidante
  • No escondemos a las personas detrás de la marca
  • No hablamos en tercera persona corporativa

No somos genéricos

  • No usamos fotos de stock de personas apuntando a pantallas
  • No ponemos gradientes neón ni fondos de circuitos
  • No copiamos la estética de otras empresas de tech
  • No usamos templates sin personalizar

Usos incorrectos del logo

Tinnto

Gradientes de colores no corporativos

Tinnto

Contraste insuficiente

Tinnto

Deformar o rotar

Tinnto

Texto con gradiente

Kit de marca

Todos los archivos necesarios para usar la marca correctamente.

Logos

Logo completo

Para headers, documentos, web.

SVG oscuro SVG blanco SVG naranja PNG oscuro PNG blanco

Ícono solo

Para favicons, apps, avatares.

SVG oscuro SVG blanco SVG naranja PNG @2x

Elementos gráficos

Onda, punto, marco, textura.

Onda Onda dark Punto Línea Mancha Marco Grano

CSS Tokens

Variables listas para copiar y pegar.

tinnto-tokens.css

Tipografía

Google Fonts gratuitas.

Space Grotesk Inter Space Mono

Este manual

El archivo que estás viendo ahora.

manual-de-marca-tinnto.html

Prompts para LLMs

Prompts listos para usar con cualquier modelo de lenguaje. El core (00) se pega al inicio de cualquier conversación. Los demás se combinan según la tarea.

00 — Core de Marca

La base. Quién es Tinnto, valores, voz, paleta. Pegalo al inicio de todo.

Abrir prompt

01 — Imágenes

Reglas para generar fotos con Midjourney, DALL-E, Banana, etc.

Abrir prompt

02 — Textos y Copy

Voz, estructura, vocabulario. Emails, bios, propuestas, blogs.

Abrir prompt

03 — Posteos de Redes

Pilares de contenido, tono por canal, formato de entrega.

Abrir prompt

04 — Presentaciones

Estructura de pitch deck y propuestas. Reglas de slides.

Abrir prompt

05 — Sitios Web

Tokens CSS, componentes, layout, nav, hero, performance.

Abrir prompt

Variables CSS

/* Tinnto Brand Tokens */
:root {
  --tinnto-negro: #0A0A0A;
  --tinnto-negro-suave: #1A1A1A;
  --tinnto-gris-oscuro: #2D2D2D;
  --tinnto-gris-medio: #6B6B6B;
  --tinnto-hueso: #F5F0EB;
  --tinnto-blanco: #FAFAFA;
  --tinnto-naranja: #C4703F;
  --tinnto-naranja-claro: #D4885A;
  --tinnto-naranja-oscuro: #A85A2F;
  --tinnto-terracota: #B5654A;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-editorial: 'Space Mono', monospace;
}

"Lo simple funciona mejor."

Tinnto — Fábrica de productos digitales

Manual de Marca v1.0 — Marzo 2026