Forma y elevación
Un lenguaje geométrico tenso: radios de 4 a 14 px que se agotan ahí, hairlines de 1 px y una sola regla para la profundidad. La silueta del sistema es el rectángulo apretado con esquina de 6 o 10 px.
Radios
Controles a 6 px, contenedores a 10 px y la píldora solo para badges y puntos de estado, donde la forma misma dice «esto es una etiqueta». Los dos de densidad viven fuera de la escala: dentro de data-density="cozy" suben a 8 y 14 px.
--radius-sm4 pxCódigo en línea y chips mínimos--radius-md5 pxHijos del acordeón de navegación--radius-lg6 pxCampos de formulario--radius-xl8 pxFilas de navegación y alertas--radius-2xl10 pxTarjetas--radius-3xl14 pxEl tope de la escala--field-radius6 px · 8 px en cómodaControles; sube en cómoda--card-radius10 px · 14 px en cómodaContenedores; sube en cómodapíldoracompletoBadges y puntos de estadoCambiar los radios
La Regla del Radio Apretado
Nada por encima de 14 px, y los valores se cambian en los tokens --radius-*, nunca componente a componente. Retunear el token tensa toda la app de una vez; un rounded-[20px] suelto la rompe por un sitio.
El paquete de tokens declara la escala con @theme inline: Tailwind escribe el valor dentro de cada utilidad al compilar, y los componentes del kit traen la suya ya compilada dentro de su shadow DOM. Por eso redefinir --radius-xl o --radius-2xl solo mueve tus pantallas. Lo que el kit lee en vivo son los tres de abajo: los radios de controles y contenedores, y --radius, que es rounded-lg. Cámbialos en :root y, si usas la densidad cómoda, también en su bloque.
/* Después del import de tokens.css */
:root {
--radius: 0.3125rem; /* 6 → 5 px: rounded-lg */
--field-radius: 0.3125rem; /* 6 → 5 px: controles */
--card-radius: 0.5rem; /* 10 → 8 px: contenedores */
}
[data-density="cozy"] {
--field-radius: 0.375rem; /* 8 → 6 px */
--card-radius: 0.75rem; /* 14 → 12 px */
}Bordes
Siempre hairlines de 1 px en border-border. La única excepción son los campos de formulario, con 2 px: su borde no separa superficies, define la zona de escritura y tiene que ganarle al blanco sobre blanco. En tablas y timelines densos, border-grid-line, un paso más marcado, porque ahí la vista sigue la línea a lo largo de decenas de celdas.
Elevación
La Regla del O Uno o el Otro
Ninguna superficie lleva sombra y borde a la vez. Si algo necesita ambos para verse, el problema es de contraste de fondo, no de definición.
Plana o elevada
La primera es plana: borde y ninguna sombra, como la inmensa mayoría de las superficies (default, simple, kpi). La segunda es variant="elevated": sombra --elev-card y ningún borde. La sombra se gasta en lo que de verdad flota.
87 %
Marta Ocampo
Vocabulario de sombra
Las sombras no son negras: van tintadas al hue de marca (H278) a opacidades muy bajas, y cada token tiene su versión oscura. En oscuro la sombra apenas lee, así que la definición la dan el light-catch y un drop más marcado. Cambia el tema para compararlas.
shadow-sm--elev-smApoyo mínimo de un control rellenoshadow-md--elev-mdDropdowns y popoversshadow-lg--elev-lgCapas flotantes grandesshadow-card--elev-cardLa tarjeta elevada: la sombra con firmashadow-card-hover--elev-card-hoverHover de una tarjeta interactivashadow-modal--elev-modalEl modal, y solo el modalshadow-cyan-md--shadow-cyan-mdGlow de marca: énfasis reservado, no elevaciónEl light-catch
La firma del sistema: un hairline interior en el borde superior de los contenedores. En claro es cian al 5 %; en oscuro, blanco al 6–8 %. Solo se percibe de cerca y hace que la tarjeta se lea como un objeto con canto, no como un rectángulo pintado. Aquí está aumentado al 60 % para que se vea dónde vive.
La Regla del Light-Catch
El filo cian superior pertenece a los contenedores —tarjeta, modal, popover—. Nunca a la barra lateral, a una cabecera ni a un botón. Extenderlo es convertir una firma en un patrón.