Orali Design System

Propósito

Un ícono dentro de un círculo o tile para destacar un beneficio o categoría.

Acompaña a un texto; no es interactivo.

Siete tamaños, nueve tonos y dos formas.

Cada número es una parte del componente real: hacé clic para ver sus propiedades y tokens.

Hacé clic en un número para ver las propiedades y los tokens de esa parte.

El componente real, en vivo.

La prop tone define colores.

tone="default".

La prop size.

size="sm".

La prop shape: círculo o tile redondeado.

Círculo (por defecto).

Los tokens globales que usa el CSS real del componente.

Token	Valor	Uso
	9999px	CTAs de marketing, filtros, inputs pill, contador
	1px
	#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
	#ffffff	Cards, modales, header
	#1a1a1a	Texto principal (17.4:1)
	32px
	40px
	56px
	64px
	80px
	48px
	16px	Cards de contenido
	44px
	#f5f5f5	Secciones alternadas, hover neutro
	#e30613	Contador del carrito, bloques de marca
	#ffffff
	0px 1px 2px 0px rgba(0, 0, 0, 0.05)	Cards de contenido en reposo
	#ffc7ca
	#fff1f2
	#6b6b6b
	8px	Botones de compra y UI, stepper, inputs, cards de producto
	#e4e4e4	Skeletons, divisores gruesos
	#e30613
	rgba(255, 255, 255, 0.3)
	rgba(255, 255, 255, 0.15)
	#ffffff
	12px	Modales, bloques de checkout
	#16a34a	Relleno: barras, íconos sobre fondo. No usar con texto blanco (3.30:1)