La reunión cerró la imagen: Mia adolescente, Alma y el logo con la X. Este
documento te da los colores, el logo y los personajes listos para que construyas el login y hagas
funcionar la home sin tener que inventar nada de diseño.
decidido en la reunión del 23 jul 2026 · identidad: moisés · para: francisco (login + web)
Tu parte, y para qué es este documento
Tú haces que se entre y que la home funcione. Yo te doy la cara del producto ya montada.
francisco página 2
F · loginEntrar con Google
Proyecto en Google Cloud Console con OAuth, creado con el correo oficial del proyecto.
Supabase Auth para la autenticación (Google + email).
Pedir también permisos de Google Calendar (para apuntar las citas más adelante).
Cuando el usuario entra por primera vez → pasa al post-login (eso lo diseño yo, M1).
F · homeHacer funcionar la home
Ahora es una demo: los botones no hacen nada. Hay que conectarlos.
Cualquier acción («Reservar mesa», «Preparar la llamada»…) lleva al login (sin registro no hay llamada).
El bloque «Así suena una llamada» → convertirlo en un audio real reproducible.
Muchos enlaces que lleven al login; los precios no los tocas (los lleva Sonia).
ℹEste documento no te dice cómo programar — te da la identidad (logo, colores, personajes)
ya decidida para que la home y el login tengan la cara correcta. La home base es la
web «demo» que ya conoces; aquí tienes su marca y sus piezas actualizadas a lo que se votó.
El logo · llama✕ti
Ganó la X en la reunión. Dos versiones: con la carita (cabecera) y solo texto. Se lee «por ti».
identidad página 3
llamatiicono + texto · claro
llamatiicono + texto · oscuro
Marca ≠ dominio (a propósito)En pantalla se ve llama✕ti; el dominio en el navegador es
llamaporti.com. La X se lee «por» → llama por ti.
llamatisolo texto · para cabeceras anchas
solo icono · favicon y app (24–48 px)
cómo se construye la X
La X son dos ondas de llamada cruzadas (dos paréntesis sónicos superpuestos),
en coral, un poco elevadas sobre la línea de base. No es la letra «x» de la tipografía: es un SVG.
Te dejo el trozo listo para pegar en la cabecera.
Siempre en minúsculas, también a principio de frase y en el título de la pestaña.Tipografía Bricolage Grotesque 800, la X en coral #DE5B3F.No usar la letra «x» normal del teclado en lugar del SVG.No estirar, no recolorear el texto, no poner sombras ni mayúsculas.
ℹDos versiones: icono + texto (cabecera de la home, con la carita de la llama de siempre)
y solo texto (donde ya se entiende la marca). El icono solo (cuadrado coral) es el
favicon y el de la app. La web «demo» ya trae la carita y la X, pero pone «llama✕mi»:
cambia mi → ti y listo.
Las dos caras · Alma y Mia
Alma da la confianza; Mia, la cercanía. Van en el hero de la home y donde haga falta calidez.
identidad página 4
Alma
La operadora que da la cara en lo serio. Joven, melena rizada, cálida y tranquila.
Es la que transmite confianza en el login y en las llamadas de gestión.
Mia · la llama adolescente
La compañera con energía. Ni cría ni adulta: flequillo revuelto, una oreja caída,
cascos que le quedan grandes. La cara divertida del producto.
Para el hero de la home usa el dúo (portada de este documento): las dos juntas con sus diademas
coral a juego. Para el login, donde hay menos sitio, va bien Alma sola. Regla de oro: ninguna de
las dos aparece nunca sin su diadema con micro.
archivos que puedes usar ya
Todas en design/img/, en la paleta correcta (coral+eucalipto):
A7-duo-taller-hero.png — el dúo, para el hero de la home
ALMA-coral-icon.png / -hero.png — Alma sola, para el login
A7-mia-taller-icon.png / -hero.png — Mia sola
+ 9 poses de cuerpo entero en la página siguiente (todas en design/img/)
Todas las poses, para recortar
Fondo crema liso a propósito: recórtalas y colócalas donde quieras (hero, login, empty states…).
material página 5
Alma sola — la operadora que da la cara en lo serio
saludando · SET-mia-saludacon el cable · A7-mia-taller-herotomando notas · SET-mia-notas
Las dos juntas — tu equipo
saludando · SET-duo-saludanbrazos cruzados · A7-duo-taller-heroen equipo · SET-duo-trabajando
regla de oro: nunca sin la diadema con micro · fondo crema lisollamaporti · para francisco · 23 jul 2026
Colores, letras y botones
Lo mínimo que necesitas para que la home y el login tengan el aspecto correcto.
identidad página 6
color (tema claro)
fondo#F8F6F5
texto#201C19
botón/CTA#C24630
la X / coral#DE5B3F
eucalipto#12907C
acento suave#FBE7E1
bordes#E8E3E0
fondo oscuro#171310
Botón principal: #C24630 con texto blanco (hover #A0392A).
El coral #DE5B3F es solo para la X y adornos, nunca texto pequeño. Neutros cálidos, sin grises azulados.
tipografía
display · bricolage 800La IA que llama por ti
cuerpo · figtree 400Escribe la llamada que quieres quitarte de encima.
datos · jetbrains mono+34 612 34 56 78 · llamaporti.com
Crear mi primera llamadaG Entrar con GoogleCon focochip eucalipto
Radios: botones 12 px, tarjetas 16 px. CTA de 48 px de alto.
Foco: anillo doble (fondo + coral), nunca el outline azul del navegador — importante en el login. Iconos: Lucide.
sí
Tuteo, frases cortas, signos ¿¡ de apertura
H1 de la home: «La IA que llama por ti»
El botón de Google, blanco con borde (estándar de Google)
no
Navy #0D0F14 ni negro puro
Mayúsculas en la marca; «prompt», «agente», «bot»
La «x» del teclado en vez del SVG de la X
¿dudas de diseño? → moisés (por Telegram). Guía completa: design/mini-guia-francisco.htmlllamaporti · para francisco · 23 jul 2026
