Espaçamento e raio

Escala de espaçamento

A escala --size-* (Primitive/Size) usa base de 4px. Os valores são rem, então acompanham o tamanho de fonte do navegador.

Token	Valor	Token	Valor
--size-1	4px	--size-4	16px
--size-1half	6px	--size-5	20px
--size-2	8px	--size-6	24px
--size-2half	10px	--size-7	28px
--size-3	12px	--size-8	32px

Exemplo: Espaçamento, Escala

const Escala = () => (
  <ul aria-label="Escala de espaçamento" style={{ ...frame, margin: 0, listStyle: 'none' }}>
    {SIZES.map(([name, px]) => (
      <li key={name} style={{ display: 'grid', gridTemplateColumns: '120px 56px 1fr', alignItems: 'center', gap: 12 }}>
        <code>--size-{name}</code>
        <span>{px}px</span>
        <span
          aria-hidden="true"
          data-size={name}
          style={{ display: 'block', width: `var(--size-${name})`, height: 12, borderRadius: 2, background: 'var(--color-action-primary)' }}
        />
      </li>
    ))}
  </ul>
);

meu-hotsite.css

.faixa {
  padding: var(--size-4) var(--size-6);
  gap: var(--size-2);
}

Os tokens de densidade (--button-gap, --container-gap…) são montados com estes valores.

Raio

--radius-brand (0.5rem na idPlugger UI) é o raio de botões, campos e toast. É parte do contrato da marca: cada marca pode ter o seu (o preset campaign-orange usa 0.25rem).

Exemplo: Espaçamento, Raio

const Raio = () => (
  <div style={frame}>
    <div
      data-radius
      style={{ width: 160, height: 80, border: '2px solid var(--color-action-primary)', borderRadius: 'var(--radius-brand)' }}
    />
    <code>--radius-brand</code>
  </div>
);

minha-marca.css

[data-brand='minha-campanha'] {
  --radius-brand: 0.25rem;
}