Geist como sistema operativo de la marca. perla como única excepción serif — el wordmark es la firma. La luz y el nácar entran sólo donde hace sentido: en el símbolo del agente y en los acentos puntuales del estado.
La perla tiene capas finas, refleja la luz que recibe y cambia según el ángulo. Es un material orgánico, cálido, vivo. La interfaz toma de ahí su temperatura — translucidez sutil, calidez tibia, iridiscencia silenciosa.
Capas finas que dejan ver lo que hay detrás, sin esconder. La interfaz tiene profundidad real, no efectos.
La luz viene de algún lado — desde la izquierda, desde arriba, desde dentro del propio elemento. Nunca neutra.
Los tonos pasan suavemente de nácar a lila pálido. Nunca saltan, nunca compiten con la información.
Blanco mineral y grises hacen el trabajo. El cálido (nácar) y el frío (lila) viven solo en el símbolo del agente y en los chips de estado. Si una pantalla tiene más de un acento visible, está mal.
Un solo sans en sus pesos variables para todo el sistema — saludo, datos, labels, body, hora. Geist es la voz. El wordmark "perla" es la firma — y para esa firma usamos Fraunces italic 300, con axis SOFT alto para suavizar la curvatura. Sólo ahí.
Toda medida es múltiplo de 4 u 8. Cinco radios, cuatro sombras cálidas. Cuando algo se siente apretado, subimos un escalón — no comprimimos.
El conic-gradient anterior queda afuera. Estas tres exploran la perla como objeto físico — luz que viene desde adentro, no decoración rotando alrededor. Todas son CSS puro, sin imagen externa.
Tres tipos de luz que el sistema puede usar: vidrio líquido refractivo para cards hero, glow desde adentro para CTAs del agente, y campos de luz fuera de foco para fondos especiales (onboarding, drawer del agente). NO para dashboard operativo.
Card translúcida con backdrop blur fuerte + saturación 180 %. Brillo en diagonal que se mueve lento — la luz pasa por encima del cristal.
Glow exterior con tinte iris que pulsa muy lento. El botón parece tener luz propia, no reflejar luz ambiental. CTAs del agente.
Campos de luz desenfocados como fondo de pantallas especiales: onboarding, splash, drawer del agente. Nunca dashboard diario.
La card de próximo turno, la action bar y los chips de estado usan backdrop-filter con saturación 170–180 %. El fondo de la pantalla provee la variación cromática (mesh sutil con manchas nácar y lila desenfocadas) que el blur necesita para tener sentido.
Las cards mantienen el highlight border interno blanco. Los chips combinan glass + dot semántico. La action bar es pill horizontal con primario tinta + secundarios glass ghost.
Sin esa variación de fondo, el glass se aplana y queda igual que una card flat con sombra suave — sin ganancia visual ni narrativa.
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.
Pill full · Geist 500 · 14 px · padding 12 / 24. Primario en tinta, secundario en transparent con hairline.
El color es semántico. Pendiente vive en nácar — el único cálido del sistema. Cancelado en muted, sin rojo.
Radius xl · padding 24 · shadow card. Para datos con presencia humana.
Sin contención. Hairlines de 1 px. Hora en columna fija. Para información secuencial.
32 px (handle inline) · 48 px (drawer header) · 64 px (handle de pantalla).
Hairline 6 % (entre items) · Hairline 12 % (entre secciones). Sin líneas duras.
Bloques que se repiten en el producto. Cada uno mezcla componentes para resolver una necesidad concreta. Nombrarlos hace que el equipo hable el mismo idioma.
Una acción principal con texto, dos secundarias solo icon.
El border-radius nativo de CSS te da continuidad tangencial (G1) — los lados se tocan en la misma dirección, pero la curvatura salta de 0 a 1/r en un punto. El squircle (G2) te da curvatura continua: la curva empieza con curvatura 0, crece progresivamente, baja de nuevo. Es lo que iOS usa para todo desde 2013. El ojo lo registra como "más Apple", "más orgánico".
El arco entra y sale del corner con un salto brusco de curvatura.
La curva empieza a 68 px del corner y se acomoda gradualmente. Sin saltos de curvatura.
| Elemento | Radius | Continuidad | Por qué |
|---|---|---|---|
| Card hero · próximo turno | 28 px | G2 | Superficie grande, radius grande. El kink se nota. Aplicar smoothing 80%. |
| Modal · drawer del agente | 32-40 px | G2 | Los radios más generosos del sistema. Smoothing 100% para máxima suavidad. |
| Cards de datos secundarias | 12-20 px | G2 | Vale la pena por consistencia. Smoothing 60-70%. |
| Chips de estado | 6 px / full | G1 | Tamaño chico — el ojo no distingue. G1 nativo es suficiente. |
| Pills · buttons | full (9999) | G1 | Círculo completo no tiene corner que suavizar. Border-radius nativo perfecto. |
| Inputs · selects | 12 px | G1 | Tamaño y radius medios. G2 sería overkill por costo de implementación. |
| Orb del agente | 50% (círculo) | G1 | Círculo perfecto. Irrelevante. |
En el código de Tomi y Nahue, G2 se implementa con la lib corner-smoothing (npm). Es la más usada en 2026, abstraída para React, genera el path SVG matemáticamente según radius y smoothing. Costo: ~2 horas de integración inicial, después es un componente reusable.
El patrón: un componente <Squircle radius={28} smoothing={0.6}> que wrappea cualquier card. Para Figma, Nahue usa el slider "Corner smoothing" nativo (60% para cards hero, 80% para modales, 0% para chips).
Cuando corner-shape: squircle esté soportado nativo en CSS (Safari ya lo tiene behind flag, Chrome viene en camino), migramos. Hasta entonces, la lib es el camino.