Espaçamento

A escala tem base de 4 px. Use os apelidos por intenção (gap, pad, stack) sempre que existirem, e a escala numérica quando precisar de um valor específico.

Escala

Amostra	Token↕	Valor (claro)	Valor (escuro)
	--ob-s-1	4px	—
	--ob-s-2	8px	—
	--ob-s-3	12px	—
	--ob-s-4	16px	—
	--ob-s-5	24px	—
	--ob-s-6	32px	—
	--ob-s-7	48px	—
	--ob-s-8	64px	—
	--ob-s-9	96px	—
	--ob-s-10	128px	—

Apelidos por intenção

Amostra	Token↕	Valor (claro)	Valor (escuro)
	--ob-gap-xs	var(--ob-s-1)	—
	--ob-gap-sm	var(--ob-s-2)	—
	--ob-gap-md	var(--ob-s-4)	—
	--ob-gap-lg	var(--ob-s-5)	—
	--ob-pad-card	var(--ob-s-5)	—
	--ob-pad-page	var(--ob-s-6)	—
	--ob-stack-sm	var(--ob-s-3)	—
	--ob-stack-md	var(--ob-s-5)	—

Grade e larguras máximas

Token↕	Valor (claro)	Valor (escuro)
--ob-grid-cols-mobile	4	—
--ob-grid-cols-tablet	8	—
--ob-grid-cols-desktop	12	—
--ob-grid-gutter-mobile	var(--ob-s-4)	—
--ob-grid-gutter-tablet	var(--ob-s-5)	—
--ob-grid-gutter-desktop	var(--ob-s-5)	—
--ob-grid-margin-mobile	var(--ob-s-4)	—
--ob-grid-margin-tablet	var(--ob-s-6)	—
--ob-grid-margin-desktop	var(--ob-s-7)	—
--ob-max-w-sm	640px	—
--ob-max-w-md	768px	—
--ob-max-w-lg	1024px	—
--ob-max-w-xl	1280px	—
--ob-max-w-2xl	1440px	—
--ob-max-w-page	var(--ob-max-w-xl)	—