Geometría y elevación
Cuadrado por defecto, el radio como lista blanca y elevación por sombra navy.
La forma, después del corte del 2026-09-20
De las cuatro reglas anteriores, dos siguen, una se endurece y una se reemplaza. Está dicho abajo regla por regla, con la que retiró marcada.
La escala de radios
- Pastilla · 999px
- botón, buscador, filtro, chip, segmentado
- Chico · 4px
- ⌘K, checkbox, cola de la burbuja
- Chico · 6px
- fila de navegación
- Tarjeta · 16px
- caja con relleno sobre la isla
- Isla · 16px
- el plano de contenido
- Burbuja · 16px
- con la esquina de la cola en 4
El radio deja de ser cero y pasa a ser una lista de tres
Todo lo que se aprieta va en pastilla (999 px): botones, buscador, filtros, chips, segmentado y la barra de selección. Lo chico se queda en 4–6 px: el atajo ⌘K, el checkbox, la fila de navegación. Tarjeta, isla y burbuja de chat van en 16 px, con la cola de la burbuja en 4.
La lista blanca no desaparece, cambia de contenido: sigue habiendo tres entradas y curvar algo nuevo sigue exigiendo agregarlo. Lo que se cae es el «0 por defecto» — con la isla en 16, un botón cuadrado adentro se ve pegado.
↺ Reemplazó a: «Cuadrado por defecto: el radio es una lista blanca»
Una isla por pantalla
La regla viva dice que un componente no es un rectángulo con borde dentro de otro. La propuesta la sube un piso: la pantalla entera tiene una sola isla, y las divisiones internas son columnas separadas por una línea mínima, no paneles.
Nunca islas apiladas, nunca cajas divisorias, nunca contenido cortado por la mitad. Columnas y separaciones sí. Lo que se apoya encima es una caja con relleno y sombra suave, sin hairline — la caja y la línea nunca se usan juntas.
✓ Confirma: «Nada de cajas dentro de cajas»
La caja con relleno reemplaza a la caja con borde
En la propuesta un objeto sobre la isla lleva fondo sutil, una línea de luz arriba al 4 %, una sombra corta y una larga hacia abajo. Sin hairline: el relleno ya lo separa. Poner las dos cosas es exactamente la caja dentro de la caja que la regla viva prohíbe.
La sombra deja de ser navy y pasa a ser negra, pero sólo cae hacia abajo. Una sombra difusa alrededor, sobre un piso casi negro, es una mancha y no altura: el founder la vio en la vuelta 2 y la rechazó.
↺ Reemplazó a: «La elevación es sombra navy, no borde»
Los valores
- radius-pill
- 999px · todo lo que se aprieta
- radius-xs
- 4px · ⌘K, checkbox, cola de burbuja
- radius-nav
- 6px · fila de navegación
- radius-card / island
- 16px
- Margen de isla
- 8px contra el piso
- radius-button
- ámbito landing · globals.css de apps/www
- Sombra de isla
- hairline de luz + caída hacia abajo
- Sombra de caja
- luz arriba 4% + 0 1 2 / 0 12 28
- Hairline
- blanco 4% · negro 4,5% — sólo entre filas
Lo que no cambió
Las cuatro formas del sistema
La forma es semántica, no decorativa. Acción es cuadrada. Estado es pill. Presencia es círculo. El retrato de identidad vuelve al cuadrado por defecto y se reconoce por su imagen, no por una geometría de control.
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: esfera, iniciales, puntoscírculo · 50%
- Retrato de identidadcuadrado · ver 18 Identidad
- Botón de la landing--sds-radius-button · ámbito landing
- 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