Orali Design System

Propósito

Bloques grises que ocupan el lugar del contenido mientras carga.

Alto y ancho salen de escalas, no de valores sueltos.

Se oculta a lectores de pantalla.

El componente real, en vivo.

Props h y w (escalón) y radius.

h=4, w=3/4.

La prop soft usa un tono más claro, para bloques grandes de fondo.

Por defecto.

Combiná bloques con las mismas medidas del contenido real.

Card

El layout no salta al cargar.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	8px	Botones de compra y UI, stepper, inputs, cards de producto
	#e4e4e4	Skeletons, divisores gruesos
	cubic-bezier(0.4, 0, 0.2, 1)
	4px	Badges, skeletons
	12px	Modales, bloques de checkout
	16px	Cards de contenido
	9999px	CTAs de marketing, filtros, inputs pill, contador
	#f5f5f5	Secciones alternadas, hover neutro
	4px
	12px
	16px
	20px
	24px
	28px
	32px
	40px
	44px
	80px
	96px
	160px
	256px
	64px
	128px
	192px
	224px