Brand Guide · v1
G17 · El Proyecto
Abril 2026
perla

El asistente que hace lo que tiene que hacer
para que vos hagas lo que sabés hacer.

Documento de marca
Identidad cerrada · decisiones tomadas
Dirección: Lime
01 Identidad

El grano
que se vuelve perla.

perla nace de una metáfora física: adentro de una ostra, un grano de arena que irrita se va envolviendo en capas de nácar hasta volverse algo precioso. Lo mismo pasa con tu negocio. Cada interacción, cada turno, cada mensaje — materia prima que el sistema envuelve capa por capa. Lo que queda al final, sos vos.

Adentro de una ostra hay un grano de arena que no debería estar ahí. La ostra no lo expulsa — lo envuelve. Capa por capa, con paciencia, lo transforma en algo precioso.

Un negocio es igual. El desorden no se elimina: se organiza. Los mensajes, los turnos, los clientes que esperan. Esa fricción cotidiana es materia prima.

perla la envuelve. Sin ruido, sin fricción, sin pedirte que aprendas nada nuevo. Capa por capa, mensaje por mensaje, convierte el caos de tu día en algo que simplemente funciona.
Nombre
perla — siempre minúscula
Tagline
Recuperá la calma.
Promesa
El esfuerzo lo hacemos nosotros.
Lo que brilla, sos vos.
Categoría
Asistente de turnos por WhatsApp · multi-tenant · argentina
Tres conceptos
p² Ritmo t³ Tiempo c² Calma
02 Paleta oficial

Tres colores.
Tres significados.

Cada color de la paleta perla tiene un rol semántico. No se eligen por estética — se eligen por lo que comunican. Se usan como acentos, no como fondos.

#2D7A7A
Teal
Primario · Activo · Confirmado
El color de lo que funciona. CTAs, estados confirmados, acciones primarias, el día actual, el turno en curso. Es la firma de perla.
#A88760
Arena
Secundario · Movimiento
El color de lo que está en movimiento. Pendientes, cambios, pagos recibidos, clientes nuevos. Calidez activa, no decorativa.
#5B4B7A
Violeta
Terciario · Atención
El color de lo que requiere atención. Insights, reactivaciones, nuevas clientes, información que vale la pena mirar.
Texto
#1A2A2E
Muted
#5E6E73
Borde
#E4EAEC
Mineral
#FAFAFA
03 Gradient iris

La firma
iridiscente.

El gradient iris es el único asset decorativo de perla. Lo usás para firmar, no para decorar. Cinco stops: warm sandy a la izquierda, olive, teal, indigo, violeta saturado a la derecha. Nunca usar un subset o cambiar el orden.

0%
#D8B889
Warm sandy
25%
#A49A7A
Olive
50%
#4F7C80
Teal oscuro
75%
#4C5A8C
Indigo
100%
#6B4F99
Violeta
Usos permitidos
  • Dot al lado del wordmark "perla"
  • Línea de firma debajo del wordmark XXL
  • Top border de cards importantes (2-3px, opacity .6-.7)
  • Progress rings y widgets decorativos
  • Underline de palabra-acento clave
  • Divisor sutil entre secciones
Usos prohibidos
  • Backgrounds de sección entera
  • Fills de botones o CTAs
  • Textos con background-clip (ilegible)
  • Solo 2-3 stops del gradient (perdés la firma)
  • Invertir el orden o reordenar colores
  • Interpolación simple teal→arena (genera verduzco feo)
Línea de firma
perla
Dot junto a wordmark
perla
Acento de palabra
Cada grano
aporta.
04 Tipografía

Dos familias.
Una editorial.

Un serif para lo que importa, un sans para todo lo demás, un mono para lo técnico. Tres fuentes abiertas, gratuitas, todas en Google Fonts. Ninguna otra familia está permitida.

DM Serif Display
Display · Wordmark · Headlines
Recuperá la calma.
"El esfuerzo lo hacemos nosotros."
Pesos: 400 regular · 400 italic
Escala: clamp(44px, 6vw, 88px) headlines / clamp(28px, 3vw, 48px) sub
Letter-spacing: -0.035em
Line-height: 0.95 - 1.1
DM Sans
Body · UI · Sistema
perla vive adentro del WhatsApp que ya usás. No hay app que instalar, no hay interfaz que aprender. Abrís la conversación y ya está.
Cada turno confirmado es una capa de nácar. La perla no se forma: se deposita, día sobre día.
Paleta aplicada · Sistema semántico
Pesos: 300 (default body) · 400 · 500 · 600
Body: 16-19px · line-height 1.7
Caption: 11px uppercase · letter-spacing 0.22em
Stat values: 28-36px · weight 500
JetBrains Mono
Datos · Timestamps · Labels técnicos
09:00 · MARTÍN SOSA · CORTE + BARBA
#2D7A7A · 0% · warm sandy
Pesos: 400 · 500
Usos: horas, hex, labels técnicos, navigation meta
Size: 10-13px
Letter-spacing: 0.03-0.08em
05 Voces del asistente

Cada negocio
tiene su voz.

perla habla con cuatro tonos distintos. El negocio elige el que calza con su identidad. Nácar es el default recomendado — calza con el 80% de los casos (estética, peluquería, kinesiología, estudios en general). Los otros tres son para contextos específicos.

Nácar
Recomendado
Cálido + eficiente · Voseo argentino natural
Directo sin ser frío Cálido sin ser lento Resuelve en 2 mensajes
"Listo, Martín ✓ Quedaste agendado el jueves 10 a las 15:30 con Giovanna. Te aviso el día anterior. Cualquier cambio, escribime por acá."
Arena
Barrio · Máxima cercanía · Un emoji máximo
Informal pero respetuoso Memoria del cliente Personaliza
"¡Dale Martín! Anotado para el jueves a las 15:30. Te aviso mañana así no se te pasa 👌"
Marfil
Profesional · Sin rodeos · Sin emojis
Claro y conciso Información exacta Mínimos mensajes
"Sesión confirmada: miércoles 12, 17:00 hs. Recibirás un recordatorio 24 horas antes."
Espuma
Energético · Deporte / bienestar · Un emoji por mensaje
Frases cortas Lenguaje activo Comunidad
"Reservado. Functional el martes a las 7:00 con Martina. Llegá 5 min antes. 💪"
06 Motion

Movimiento
con intención.

Solo animamos transform y opacity. Cubic-bezier explícitos, nunca "ease" suelto. Interacciones bajo 300ms, reveals hasta 1500ms para entradas importantes. Siempre respetamos prefers-reduced-motion.

Easings
NombreUsoValor
Out strongReveals, enter/exitcubic-bezier(0.16, 1, 0.3, 1)
Out quartHover, color, microcubic-bezier(0.25, 1, 0.5, 1)
Duraciones
ElementoDuración
Button press feedback120ms
Hover color180ms
Card elevate220ms
Scroll reveal700ms
Hero breath entrance1500ms
Stagger entre items60ms
Stagger chat bubbles140ms
Patterns validados
PatternPropiedadCurvaDónde se usa
Hero breathopacity + blur(24px→0) + scale(1.03→1) + translateY(20px→0)out strong 1500msTagline hero landing
Scroll revealopacity + translateY(20px→0)out strong 700msCards, sections, componentes
Section headlineopacity + translateY(28px→0)out strong 800msTítulos de sección
Card elevatetranslateY(-2px) + box-shadowout quart 220msHover cualquier card
Button pressscale(0.97)out quart 120ms:active de CTAs
Scroll-snap magnetscroll-snap-type: y proximitynativoNavegación entre secciones
Pasá el cursor acá.
hero breath reverse — blur(0)→(14px) + scale(1)→(1.02) + translateY(0)→(8px) + opacity(1)→(0)
07 Componentes UI

Piezas
que encajan.

El sistema de UI de perla está basado en Invisible Clarity v6 — blanco puro con variaciones sutiles de luminosidad, acentos semánticos puntuales, nada de ornamentos. Cada componente tiene su rol y su color.

Pills · acentos semánticos
Confirmado Pendiente Reactivar 8 turnos hoy
Botones · jerarquía
Badges · estados
Confirmada Pendiente
Chat bubbles · WhatsApp
¿Tenés turno el jueves?
Sí. 10:30, 14:30 o 17:00. ¿Cuál te viene?
14:30
Listo ✓ Te mando recordatorio el miércoles.
Stat cards · los 3 accents
Turnos
8
↑ 1 vs ayer
Libres
4
de 12
Insight
3
Requieren acción
Progress ring · gradient iris
6/8
Turnos
Agenda row · patrón Invisible Clarity
09:00
Martín Sosa
Corte + barba
En curso
10:00
Lucas Ferreyra
Corte · José
Confirmada
14:30
Camila Sarmiento
Corte + color
Pendiente
08 Copy library

Las frases
que funcionan.

Copy aprobado y validado en la landing. Se usa tal cual, con tildes correctas y voseo argentino. Estas frases son la marca hablada.

Tagline principal
Recuperá la calma.
El claim central. Tres palabras, voseo, beneficio emocional directo. Va en hero, ads, firma de email, business cards.
Promesa / cierre
El esfuerzo lo hacemos nosotros.
Lo que brilla, sos vos.
Cierre de narrativa. Implica perla como el "laburo invisible" y el usuario como el protagonista del brillo.
Tres conceptos · pills
p² Ritmo
t³ Tiempo
c² Calma
Los tres territorios de valor. Cada uno con su color (teal/arena/violeta). Formato pseudo-científico como firma.
Subtagline · landing
El asistente de turnos
que vive en tu WhatsApp.
Positioning técnico. Aclara categoría (asistente de turnos) y diferencial (WhatsApp como interfaz).
Features — Ritmo
El ritmo de tu día,
ordenado.
agenda, confirma, recuerda. Los cruces no existen, los huecos se llenan solos.
Features — Tiempo
Tu tiempo,
tuyo.
contesta 24 hs. Recuperás 3-4 horas al día. Voseo + beneficio cuantificable.
Features — Calma
La calma es el resultado.
Un lugar desde el que ser tu mejor versión. Avisa sólo cuando hace falta. Sin ruido.
CTA · acción primaria
Probar por WhatsApp →
Verbo en infinitivo + canal específico. Link wa.me. Nunca "Probar gratis" genérico.
Sí · voz y tono
  • Voseo argentino siempre ("pasás", "volvés", "contestás", "entrás")
  • Tildes obligatorias en palabras con tilde (sin excepción)
  • Frases cortas, una idea por frase
  • Verbos activos en segunda persona
  • Contraste clients vs. "nosotros" cuando hace falta ("el esfuerzo lo hacemos nosotros")
  • Italic + color teal para acentos clave ("la calma es el resultado")
No · voz y tono
  • Español neutro ("tu tiempo es tuyo" sin voseo sonaría raro)
  • Motivational fluff ("creemos en tu potencial", "juntos podemos")
  • Buzzwords de SaaS ("revoluciona", "transforma", "optimiza")
  • Frases largas con subordinadas anidadas
  • Contradicciones con la UI ("no hay saludo" si el mockup dice "Buenos días")
  • Repetir la palabra "perla" en cierres cuando el wordmark ya está abajo
09 Imagery

Fotografía
con anchor.

Toda fotografía de modelos se genera con anchor real (reference image). Luz natural, fondo blanco mineral, sombras geométricas de ventana como firma atmosférica. Nunca AI standard face sin referencia.

foto retrato 4:5
Retrato editorial
Modelo en perfil 3/4, mirada diagonal, luz natural de ventana. Sweater crema o slip cream. Sombras de ventana geométricas como anchor atmosférico.
close-up 1:1
Close-up · avatar / testimonial
Face tight crop, mirada cámara, calma contemplativa. Piel real con pores y freckles. Ideal para testimoniales, avatars, pitch deck heroes.
tactile 9:16
Gesture · tactile
Mano cerca de cuello/jaw, ojos semi-cerrados, sweater ribbed. Mood íntimo ritual. Ideal Story 9:16, secciones de "sentir".
video perla · loop
Video · cierre de marca
Video de perla barroca formándose. Autoplay muted loop playsinline. Overlay blanco radial para softness. Usado en hero closer o video cards.
Cámara
85mm · f/2.8
Beauty close-up, comprime rasgos, bokeh editorial sutil
Luz
Soft · 5200K
Ventana natural desde izquierda a 30°, wraparound fill
Film
Kodak Portra 400
Grano visible, warm subtle, skin texture preservada
Fondo
Blanco mineral
Overexposed wall + sombras de ventana diagonal upper-left
Formación · asset narrativo

El arco de la metáfora.

Cuatro estados que cuentan la marca sin palabras. Del grano invisible a la iridiscencia completa — la misma historia que atraviesa el producto. Usar la secuencia entera, no imágenes sueltas.

Perla ghost — estado inicial invisible
01 · ghost
Grano invisible. Estado uno. Casi transparente, promesa apenas.
Perla young — primeras capas
02 · young
Primeras capas depositadas. Tonos arena emergentes. El proceso arrancó.
Perla mid — iridiscencia parcial
03 · mid
Iridiscencia parcial. Los tres tonos empiezan a convivir en una superficie.
Perla mature — iridiscencia completa
04 · mature
Perla madura. Teal, arena y violeta simultáneos según el ángulo. La firma.
Usos sugeridos · social carrusel · secuencia animada en deck · transición entre secciones · loading states tematizados
10 Don't

Lo que no
es perla.

Cada decisión de diseño es un "no" tanto como un "sí". Esto es lo que descartamos para llegar a la identidad actual. Si lo ves, rehacelo.

✕
Cards centradas con box-shadow heavy
Corporate SaaS default. La imagen/sección es full-bleed inmersiva, no card.
✕
Gradient iris con 2-3 stops solamente
Interpolación teal→arena genera verduzco. El gradient necesita los 5 stops.
✕
AI standard faces sin anchor
Sin -r de referencia real, el modelo genera cara stock genérica. Siempre con reference.
✕
Cormorant Garamond como display
Banned globalmente en BAST. Siempre DM Serif Display.
✕
Paleta terracota/crema/dorado
Esa es la paleta Claude, no perla. Nuestra paleta es teal + arena + violeta.
✕
"P" mayúscula o "Perla" con mayúscula
El wordmark siempre es lowercase. "perla" nunca "Perla".
✕
Accent dorado / golden hour
La luz de perla es neutral 5200K. El dorado compite con el arena y degrada el nácar.
✕
Mármol, travertino, materiales fashion-lifestyle
Estética spa genérica. perla tiene su materialidad: nácar, glass, blanco mineral.
✕
Tres wordmarks "perla" en el mismo viewport
Nav + hero + footer = 3 veces. El cover tiene UI embebida que ya es wordmark.
✕
Hero mobile apretado arriba-izquierda
El claim es el hero. Mobile sin foto = claim centrado ocupando todo el viewport.
El esfuerzo lo hacemos nosotros.
Lo que brilla, sos vos.
perla
Brand Guide · v1 · Abril 2026