La pantalla Home del repo está mockupeada acá tal como está hoy en producción mock (con los 5 fonts, paleta forest/sage/slate y el patrón mask-fade del hero). Al lado, la misma pantalla aplicando los tokens del manual v3 — Geist + Fraunces italic para el nombre, paleta tinta + nácar + lila, squircle G2, liquid glass real y orb del agente como handle.
src/styles.css: Instrument Sans + IBM Plex + DM Serif Display + Instrument Serif + Geist Mono. Paleta forest #1B2D3B + sage #4472C4 + slate. Estados con semáforo emerald/amber/rose.
Martes 12 de mayo
5 turnos hoy, 2 pendientes
15:00
en 12 minutos
Solo barba. Diseño cuadrado bajo.
Agustín Romero
Corte clásico · con Laura
María Cardozo
Tratamiento capilar · con Marcos
Slots libres
Martes 12 mayo
5 turnos hoy, 2 pendientes
15:00
EN 12 MINUTOS
Solo barba. Diseño cuadrado bajo.
Agustín Romero
Corte clásico · con Laura
María Cardozo
Tratamiento capilar · con Marcos
Slots libres
El repo ya tiene una arquitectura de tokens robusta — no es código sin sistema. Lo que cambia es el contenido de esos tokens: hex de paleta, familias tipográficas, escalas de radio. La capa semántica (`brand-primary`, `brand-text-strong`, `brand-glass-bg`) se preserva.
| Elemento | Hoy en el repo | Con manual v3 |
|---|---|---|
| Saludo · nombre | DM Serif Display todo el header, italic en el nombre. Mezcla serif + italic en mismo tipo. | Geist 500 en el saludo. Fraunces italic 400 SOLO en el nombre. Cambio de familia marca la diferencia. |
| Primario | #1B2D3B forest oscuro + acento #4472C4 sage azul corporativo. |
#1A2A2E tinta. Sin acento azul. El color cromático vive solo en el orb del agente. |
| Hora hero | Instrument Serif italic 40px. Colon en azul sage como acento. | Geist 700 tabular-nums 44px. Sin mono. El sans heavy aguanta el dato sin necesitar serif. |
| Hora lista | Geist Mono 13px en azul sage. Estilo terminal. | Geist 600 tabular-nums en tinta. Mismo tipo que body, distinto peso. |
| Chip estado | Semáforo: emerald confirmed, amber pending, rose noshow, neutral cancelled. Background con alpha 7%. | Pendiente en nácar #FFE8E4 (cálido sin gritar). Confirmado en teal soft (única instancia teal). Sin rojo, sin verde semáforo. |
| Hero card | Border-radius 18px (G1 circular). Glass blanco 40% opacity + border azulado 22%. Blur 12px. Mask-fade hacia la lista. | Card blanca sólida con G2 smoothing 80%, radius 28px. Shadow cálida sutil + highlight border interno blanco. Sin glass. |
| Lista de turnos | Sin card contenedor. Items pegados con border-bottom azul sage 14%. Pending con border amber sutil. | Segunda card blanca G2 con shadow más suave que la hero — jerarquía por sombra y tamaño, no por material. Items con hairline tinta 5% entre sí. |
| Slot pill | Pill blanco 72% + border slate 12%. Dot de color por staff (azul/violeta/verde). Texto en azul sage. | Pill liquid glass 55% + saturate 160%. Dot tinta uniforme 40% opacity. Texto tinta. Sin código de color por staff (vive en avatar). |
| Avatar staff | Círculo color sólido por staff: #2563EB owner, #7C3AED assistant, #059669 team. |
Círculo gradient tinta uniforme. La diferenciación de staff vive en el texto, no en color. Less is more. |
| Fondo de pantalla | Surface plano #F6F8FA warm-50. |
Mineral #FAFAFA + radial gradients sutiles nácar (top-left) y lila (bottom-right) que dan vida al glass. |
| Orb del agente | No existe. El agente se accede desde otra ruta (drawer no implementado en Home). | Orb iridiscente 52px floating bottom-right + label "ATENTA". Es el handle al drawer del agente. Pulse 5s. |
El repo ya tiene la arquitectura para soportar el cambio sin reescribir componentes. La migración es de tokens, no de código:
src/styles.css: cambiar valores de --color-forest-900, --color-sage-500, etc. a los del manual. Los nombres semánticos (--brand-primary, --brand-text-strong) se preservan.@fontsource-variable/instrument-sans e ibm-plex-sans; sumar @fontsource-variable/geist y @fontsource-variable/fraunces.--font-sans a Geist en lugar de Instrument Sans. --font-family-serif-editorial a Fraunces en lugar de Instrument Serif.<Squircle radius={28} smoothing={0.8}> en src/components/ui/squircle.tsx usando lib corner-smoothing. Wrappear el hero card del Home.<Orb /> en src/components/ui/orb.tsx. Insertar en el layout del route.tsx de /app para que viva floating en todas las pantallas.--color-emerald-* y --color-amber-* a las versiones nácar/teal-soft del manual. --color-rose-* queda para cancelled crítico (todavía abierto si lo eliminamos).Esto NO es un refactor — son ediciones quirúrgicas a 3-4 archivos. Estimación: 1 día Nahue + ½ día review Tomi. PR pequeño, scope claro.