Activación 01 / 02
Red Bull
La promo de Red Bull, dentro de la app: se pedía desde el QR y se retiraba sin fila
01/ 09
La lata y el teléfono con la promo
Caso 02 · Marca, producto y web · 2025–26
De la cafetería del campus a la plataforma del colegio
tapin.cl ↗
Resumen
Diseñé la marca de Tap In desde el día uno. Cuando la empresa se reinventó, rehice la marca y programé su web
El encargo
Una marca que sobreviviera al pivote, de la comida a los colegios
El resultado
tapin.cl en producción y una sola marca para todo el ecosistema
01 / 03
2025El origen
Pedir comida sin filas en la universidad, con unos cubiertos que corren
Diseñador fundadorHTML, CSS y JS
El proyecto en el tiempo · 22 mesesPasa el mouse por los hitos
Capítulo 01 · 2025
El origen
Una app para pedir comida sin filas en la universidad
01 / 07Utensilios dentro de las letrasUn pin de ubicación con cubiertosTenedor y cuchillo cruzadosAparecen las patas y un brazoUna cuchara que correLos cubiertos ya correnEl logotipo de Campus
01
02
03
04
05
06
01 / 03Escanea el código QRLas promos de Red Bull, dentro de la appY las de Banco de Chile
Tap InAbrir app.tapin.cl
VideoFotoRetrato
Promos
TodasBebidasBancos
13:05
Activación 02 / 02
Banco de Chile
Un stand con el pendón, tarjetas de Tap In y una ruleta para probar la app ahí mismo
01/ 09
La promotora muestra las tarjetas de Tap In
Capítulo 02 · Feb a abr 2026
El Rebirth
De app de comida a sistema para colegios. Antes de diseñar, un cuestionario a los socios
01 / 04 · Comida sin filas#4A3CAE
CampusConnectHealth+1
01
Empresa
Corporativo y fondos
#2D2560
RGB 45 37 96 AaAAA · 13,6:1
RGB 45 37 96 AaAAA · 13,6:1
02
Campus
Comida sin filas
#4A3CAE
RGB 74 60 174 AaAAA · 8,2:1
RGB 74 60 174 AaAAA · 8,2:1
03Principal
Connect
El sistema del colegio
#6B5CE7
RGB 107 92 231 AaAA · 4,9:1
RGB 107 92 231 AaAA · 4,9:1
04
Health
En camino
#9B8EF0
RGB 155 142 240 AaAAA · 6,8:1
RGB 155 142 240 AaAAA · 6,8:1
Tap In · Gestión escolar×Correo
tapin.cl
9:41
CONNECTahoraCasino · marzoEl pago ya está conciliado
Connect60 px
El manual · Sistema de identidad 2026
Las reglas, escritas
Lo que el manual suma, escrito como código y visto en vivo
01 / 04 · ColorGrises con intención
Hasta los neutros llevan violeta. Ningún acento entra de afuera.
02 / 04 · TipografíaUna familia, tres niveles
Poppins en tres pesos, sin excepciones.
03 / 04 · ADNCinco reglas por símbolo
Por qué funcionan los isotipos, para que el próximo nazca igual.
04 / 04 · InterfazUna variable mueve todo
Cualquier tono del rango funciona; el sistema lo sigue.
{ }marca.cssPDFmanual.pdf
⌘ Stapin › marca › color
/* 01 · Color */
/* "dentro del mismo rango cromático" */
:root {
/* tonos: decisión 03 */
--n-900: #2C2B39;
--n-500: #6B6A7A;
--n-300: #BCBAC5;
--n-50: #F2F1F7;
--acento: #FF7A00;fuera del sistema
}
/* 02 · Tipografía */
/* "a un director, a un operador y a un usuario final" */
:root {
--familia: 'Poppins';
--titulo: 600;
--texto: 400;
--dato: 300;
}
/* 03 · ADN */
test('isotipo de Campus', [
'doble lectura',
'silueta plana',
'movimiento y actitud',
'abstracción media',
'sin ser obvio'
]);
/* 04 · Interfaz */
.producto {
--tono: #4A3CAE; /* campus */
--suave: color-mix(in srgb,
var(--tono) 18%, var(--n-50));
}
Vista previa · Colorescribiendo
n-900
n-900#2C2B39puro #2F2F2F
n-500
n-500#6B6A7Apuro #6E6E6E
n-300
n-300#BCBAC5puro #BEBEBE
n-50
n-50#F2F1F7puro #F3F3F3
acento
NO ENTRA
acento#FF7A00
Muestra · con violetaCírculo · el gris puro
AaPoppins
familiaAa300Aa400Aa600
tituloCasino · marzo
textoEl pago ya está conciliado y el apoderado recibió su aviso
dato$12.400 · actualizado 9:41
16 px
5 / 5
test · isotipo de Campus0 ms
- ✓Doble lectura12 ms
- ✓Silueta plana8 ms
- ✓Movimiento y actitud14 ms
- ✓Abstracción media9 ms
- ✓Sin ser obvio11 ms
reglas0 / 5
Acción
ContinuarVolver→
Control
✓HoySemana
Estado
Nuevo3
Entrada
BuscarVer más →
Capítulo 03 · Abr a sep 2026
La web
Diseñada y programada por mí, para que un director entienda en segundos
06
Qué hace, si funciona en mi colegio, quiénes son y cómo los contacto. "Soluciones" y no "Productos": nadie quiere comprar un catálogo.
En el sitio · La barra de menúEl producto funcionando en el hero y, justo debajo, los colegios que ya lo usan. El director ve a sus pares antes de dudar.
En el sitio · Los colegios, bajo el heroSin números: pestañas para elegir qué resolver primero, porque cada módulo se contrata por separado.
En el sitio · Las pestañas de módulosLas tarjetas de módulosLas dudas del directivo con la respuesta abierta al lado: nada que tenga que adivinar ni desplegar.
En el sitio · Las preguntas, con su respuesta al ladoabajoTodo el sitio empuja a este formulario. Pide solo lo necesario para preparar la demo y, al lado, explica qué pasa después: respuesta en menos de 24 horas, sin compromiso.
En el sitio · El formulario de la demo
Decisión 11
- AntesAcceso denegado
- 01Pago
- 02Validación
- 03Aviso de saldo
tapin.cl en el teléfono
Todo el sitio, también en el teléfono
La misma web, diseñada y programada a la par.
Pasa el cursor por una pantallatapin.cl en el teléfono
Es el sitio. Pruébalo.
No es una captura: es tapin.cl en su versión móvil. Recórrelo, cambia de módulo, abre las preguntas.
o ábrelo en tapin.cl ↗
Resultado
Un director entra a tapin.cl y en una sola pantalla entiende qué hacemos.
Lo que quedó andando
Ver tapin.cl en vivo ↗
- 9páginas en producción, diseñadas y programadas
- +44.000líneas de código propio, sin frameworks
- +27.000estudiantes en los dos campus de la UC donde funciona Campus
- +15.000familias en Connect, en Chile y Perú
- Marca, UX/UI y front end
- Agustín Avendaño
- Producto y deploy
- Equipo de desarrollo de Tap In
- Con
- Los cofundadores de Tap In