Estas son las decisiones de marca que sostienen el producto. Paleta restringida, tipografía única, espacio que respira y un símbolo que vive del lado del agente. Cada pieza acá puede explicarse con una sola frase: ¿esto sostiene la calma o agrega ruido?
01 · Paleta
Casi sin color, hasta que aparece.
El sistema vive en blanco trabajado y grises. El color cromático es del agente — aparece en el iris del símbolo, en el chip de estado, en nada más. La regla es: si una pantalla tiene más de un acento visible, está mal.
Tinta#1A2A2ETexto principal · CTA crítico · presencia de marca
Muted#5E6E73Texto secundario · labels · información de contexto
Muted soft#8A9BA0Texto terciario · separadores tipográficos · estado cancelado
Mineral#FAFAFAFondo de la app · respiro · neutralidad operativa
Surface#FFFFFFCards · contenedores · jerarquía sin color
Hairlinergba(26,42,46,.06)Divisores sutiles · borde de cards · estructura sin peso
Iris (del agente)conic-gradient(5 stops)Únicamente en el símbolo del agente. NUNCA fondo, NUNCA card, NUNCA texto.
Confirmado
Estado · confirmado#2D7A7A @ 10%Chip de turno confirmado. Único uso del teal en toda la interfaz.
Pendiente
Estado · pendiente#A88760 @ 12%Chip de turno pendiente. El arena vive sólo acá.
02 · Tipografía
Geist, en todas sus voces.
Un solo sans, cargado en sus pesos variables. La jerarquía se construye con peso, tamaño y tracking — no con familias mezcladas. No hay serif, no hay monoespaciada. Geist hace todo, incluyendo los números.
Perla
Display
Geist 700 · 88/96 px · tracking −0.05em
Para wordmarks y hero
Buenas, Mati.
Heading 1
Geist 500 · 52 px · tracking −0.04em
Para saludo y titulares
Tu día está bajo control.
Heading 2
Geist 500 · 32 px · tracking −0.03em
Para subtitulares y secciones
María Cardozo
Heading 3
Geist 600 · 22 px · tracking −0.02em
Para nombres y datos protagonistas
Sesión de kinesiología · 45 min
Body
Geist 400 · 16 px · line-height 1.5
Para textos descriptivos
Próximo turno
Label
Geist 500 · 12 px · tracking 0.06em uppercase
Para etiquetas y categorías
15:30
Number
Geist 700 tabular-nums · 56 px
Para horas y datos numéricos críticos. Sin mono — el sans heavy aguanta.
03 · Espacio
Escala de ocho. El respiro es regla.
Toda medida es múltiplo de 4 u 8. No hay valores intermedios. El padding lateral del mobile es 24 px, el gap entre cards es 16 px, entre secciones 48 px. Cuando algo se siente apretado, sumamos un escalón — no comprimimos.
space-1Micro · gap interno chip
space-2XS · padding interno pill
space-3SM · gap entre items
space-4MD · gap cards · padding chico
space-5LG · padding lateral mobile
space-6XL · padding card · gap sección
space-72XL · separación bloques
space-83XL · separación grandes
space-94XL · entre módulos
04 · Design tokens
Radius, sombras, opacidades.
El sistema reconoce cinco radios y cuatro niveles de sombra. Las opacidades estructuran lo que está siempre ahí pero no compite con la información. Todo tiñe cálido — nada de gris neutro.
Radios
sm6 px · chips, dots
md12 px · cards de datos
lg20 px · cards intermedias
xl28 px · cards humanas
full9999 · pills, chips
Sombras
xs0 1 2 · presencia mínima
sm0 2 8 · cards default
md0 8 24 · hero cards
lg0 16 48 · modales
Opacidades
100Tinta plena
60Énfasis secundario
40Estado deshabilitado
12Hairline fuerte
06Borde y divisor
05 · Isotipo · tres líneas
Direcciones para el símbolo.
Tres maneras de hacer visible al agente sin romper su naturaleza invisible. No son logos finales — son territorios para discutir y decantar.
Línea A
Orb iris
El símbolo es el agente. Lo único visible del cerebro que vive en la nube. Vive en el dashboard, en el WhatsApp, en cualquier superficie del producto.
perla
Línea B
Palabra con punto
El wordmark cerrado por un punto-orb. La perla literal — un punto bien diseñado. Funciona como puntuación, como firma, como símbolo aislado.
Línea C
Nácar curvo
Una forma orgánica, recordando la concha de donde sale la perla. Más editorial, menos tech. Trabaja mejor sobre papel y en piezas de marca que en UI.
06 · Principios de componentes
El pill es el átomo.
No hay cards para todo. Hay pills, listas planas y cards solo cuando la información requiere riqueza visual. La forma del componente sigue su función — la del agente, la de los datos, la del estado.
Componente
Buttons
Pill full · Geist 500 · 14 px · padding 12 / 24. Primario en tinta, secundario en transparent con hairline. CTA crítico siempre dark.
Componente
Chips de estado
ConfirmadoPendienteCancelado
El color es semántico, nunca decorativo. Diferencia adicional por peso tipográfico, no solo por hue.
Componente
Card humana
Próximo turno
15:30
María Cardozo
Sesión de kinesiología · 45 min
Radius xl · padding 24 · shadow card · borde hairline interno. Para datos con presencia humana.
Componente
Lista plana
16:30
Joaquín MéndezEjercicio guiado · 60 min
17:45
Renata SolísEvaluación inicial · 30 min
Sin contención. Hairlines de 1 px. Hora en columna fija 56–64 px. Para información secuencial.
Hairline 6 % (entre items de lista) · Hairline 12 % (entre secciones). Sin líneas duras.
07 · Agrupaciones
Patrones canónicos del producto.
Estos son los bloques tipo que se repiten en el producto. Cada uno mezcla componentes del sistema para resolver una necesidad concreta. Son nombrables — cuando alguien dice "el saludo con day-meta", todos saben de qué hablamos.
Patrón 01
Saludo + day-meta
Buenas, Mati.
4 sesiones hoy1 confirmada3 por llegar
Patrón 02
Hero próximo + lista después
Próximo turno
15:30
María Cardozo
Sesión de kinesiología · 45 min
Después
16:30
Joaquín MéndezEjercicio guiado · 60 min
17:45
Renata SolísEvaluación inicial · 30 min
18:30
Carla FontanaSesión de kinesiología · 45 min
Patrón 03
Handle del agente
PerlaAtenta a tus mensajes
Patrón 04
Action bar mixto
Una acción principal con texto, dos secundarias solo icon. Igual jerarquía visual, distinta importancia.