Forma y espacio

Medidas consistentes hacen que todo se sienta del mismo sistema. Espacio en base 4, radios por tipo de superficie y la sombra como último recurso.

Escala de espacio

Todo espacio sale de esta escala de base 4. Si un valor no está aquí, elige el más cercano.

0
2
4
8
12
16
20
24
32
40
48
64

La barra oscura es el valor real; la clara, el mismo valor ampliado ×4.

UsoValor (px)
Icono ↔ texto6–8
Padding interno de chip8 horizontal
Padding de tarjeta12 interna · 16 organizacional · 24 vista cliente
Separación entre tarjetas16
Separación entre secciones32 interna · 48–64 vista cliente
Padding de página32 escritorio · 16 móvil

Medidas

ElementoMedida (px)Nota
Sidebar240 · 64Abierto · colapsado
Barra superior interna48—
Barra superior vista cliente56—
Botón S / M / L28 / 32 / 48—
Input40—
Chip28—
Badge22—
Fila de paso del Checklist48Alto mínimo
Ítem de nav · subítem32 · 28—
Ancho de contenido1440 · 1040Máximo interno · centrado en vista cliente
Mínimo en vista cliente390Responsive completo hasta este ancho

Radios

radius-xs4Badges de estado
radius-sm6Chips
radius-md8Botones, inputs, ítems de nav
radius-lg12Tarjetas, diálogos, popovers
radius-xl24Encabezado de frente y tarjetas de la vista cliente

En código, la escala se deriva de --radius para que el tema de un cliente pueda escalarla completa. Con el radio base de Konfront (12 px) los valores coinciden con el DS. Ojo con un nombre: el radius-xl del DS (24 px) es rounded-2xl en Tailwind.

theme.css
/* --radius es el radio base del tema. Konfront = 12px */
--radius-xs:  calc(var(--radius) / 3);      /*  4 */
--radius-sm:  calc(var(--radius) / 2);      /*  6 */
--radius-md:  calc(var(--radius) * 2 / 3);  /*  8 */
--radius-lg:  var(--radius);                /* 12 */
--radius-2xl: calc(var(--radius) * 2);      /* 24 = radius-xl del DS */

Elevación

La jerarquía se construye con borde y fondo; la sombra es el último recurso. Borde de 1 px en --border; 2 px solo para el anillo de foco.

--shadow-xsTarjeta en reposo, siempre con borde
--shadow-mdPopovers, menús y sheets
--shadow-lgDiálogos

Movimiento

El movimiento confirma, no decora: se anima lo que cambió de estado. Todo usa la curva --ease-standard y respeta prefers-reduced-motion. Pasa el cursor por cada fila para ver la duración.

  • --motion-fast120msHover
  • --motion-base200msDropdown, popover, tooltip
  • --motion-slow300msSheet, diálogo, recálculo de barras
  • --motion-emphasis1500msDestello de fila cuando un paso se termina solo