Orali Design System

Propósito

Superficie con borde y radio para contenido relacionado.

Cuatro tonos, tres radios, cinco paddings y sombra opcional.

Con as="a" funciona como link completo.

El componente real, en vivo.

La prop tone cambia el fondo.

tone="default".

La prop radius es md (8 px), lg o xl.

radius="md".

La prop padding.

padding="none".

Props shadow y borderless.

Por defecto.

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	1px
	#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
	8px	Botones de compra y UI, stepper, inputs, cards de producto
	#ffffff	Cards, modales, header
	#f5f5f5	Secciones alternadas, hover neutro
	#e4e4e4	Skeletons, divisores gruesos
	#ffc7ca
	#fff1f2
	0px 1px 2px 0px rgba(0, 0, 0, 0.05)	Cards de contenido en reposo
	12px	Modales, bloques de checkout
	16px	Cards de contenido
	16px
	20px
	24px
	150ms
	cubic-bezier(0.4, 0, 0.2, 1)
	32px