Geometry and elevation
Square by default, radius as an allowlist, and elevation by navy shadow.
This section still reads in Spanish — the English body is on its way. The demos speak for themselves.
Las cuatro formas del sistema
La forma es semántica, no decorativa. Acción es cuadrada. Estado es pill. Presencia es círculo. Con tres formas distintas, un botón nunca se confunde con un badge ni con un avatar — sin depender del color.
Cuadrado por defecto: el radio es una lista blanca
No hay radio por defecto que ajustar: los tokens de superficie y control valen 0. Curvar algo nuevo exige agregarlo a esta lista, y la lista tiene dos entradas por diseño.
La claridad del botón al pasar el mouse no viene de la forma ni del movimiento: viene de la sombra que enfoca por detrás, definida en 09 · Movimiento.
- Pills y chips de estadorounded-full · 999px
- Presencia: agente, avatares, puntoscírculo · 50%
- Todo lo demás0 — botones incluidos
La entrada es una línea, no una caja
Escribir sucede sobre una sola línea bajo el texto — nunca dentro de un rectángulo con borde. Al hover la línea se afirma; al foco se vuelve azul y de 2px. Es toda la señal que una entrada necesita.
La línea usa el token de borde de control, el único borde que existe en el sistema — y ahora mide una dimensión, no cuatro.
Reposo
Buscar lead…
Hover — pásame el mouse
Buscar lead…
Foco
Constructora An
Nada de cajas dentro de cajas
Un componente nunca es un rectángulo con borde que contiene otro rectángulo con borde. Cada nivel de anidamiento con contorno suma ruido y resta pulcritud.
La composición es plana: un campo por color o sombra, y adentro tipografía, filas y controles — sin contornos intermedios. Las líneas de pelo entre filas son tipografía, no cajas, y se quedan.
Así no
Lead calificado
ContactarAsí sí
Lead calificado
ContactarLa elevación es sombra navy, no borde
Dos alturas bastan: elevada para tarjetas y campos de trabajo, flotante para menús, popovers y diálogos. Las sombras llevan el navy de la familia, nunca negro neutro — por eso se sienten naturales sobre el papel frío.
En oscuro la proyección apenas se ve, así que la elevación cambia de motor: el paso de superficie separa, y el token de sombra lleva una luz superior sutil — como si la luz rozara la superficie levantada. Sin bordes ni anillos; el markup no cambia.
Si una superficie necesita borde para distinguirse, le falta contraste de color o le sobra anidamiento. Ni siquiera la entrada lleva caja: escribir sucede sobre una sola línea.
Los valores
- radius-control
- 0
- radius-panel / dialog
- 0
- radius-round
- 999px · pills y presencia
- shadow-elevated
- 0 1 2 / 0 12 32 · navy 5–9%
- shadow-floating
- 0 2 4 / 0 20 48 · navy 7–13%
- Bordes de campo
- ninguno — color o sombra