Espaçamento

Todos os espaçamentos do sistema são múltiplos de 4px (exceção: 12px). Isso garante consistência visual e alinhamento perfeito em qualquer composição.

tokens/variables.cssAbrir no Figma

Micro espaçamentos

Usados dentro de componentes: padding, gap entre elementos, margens internas.

Token	px	rem	Uso comum
--spacing-1	4px	0.25rem	Gap mínimo, padding ícone
--spacing-2	8px	0.5rem	Gap padrão entre elementos inline
--spacing-3	12px	0.75rem	Padding interno de badges, chips
--spacing-4	16px	1rem	Padding padrão de componentes
--spacing-5	20px	1.25rem	Padding de cards, inputs
--spacing-6	24px	1.5rem	Gap entre grupos de campos

/* Exemplo: card com espaçamento micro */
.card {
  padding: var(--spacing-5);        /* 20px */
  gap: var(--spacing-3);            /* 12px */
}

.card-header {
  margin-bottom: var(--spacing-4);  /* 16px */
}

.badge {
  padding: var(--spacing-1) var(--spacing-2); /* 4px 8px */
}

Macro espaçamentos

Usados no layout: espaçamento entre seções, margens de página, separação de blocos.

Token	px	rem	Uso comum
--spacing-7	32px	2rem	Gap entre cards, seções pequenas
--spacing-8	40px	2.5rem	Margem entre seções
--spacing-9	48px	3rem	Padding de seções
--spacing-10	56px	3.5rem	Separação de blocos
--spacing-11	64px	4rem	Margem de página
--spacing-12	72px	4.5rem	Espaçamento de seções grandes
--spacing-13	80px	5rem	Padding hero/destaque
--spacing-14	88px	5.5rem	Separação de áreas
--spacing-15	96px	6rem	Margem de página grande
--spacing-16	120px	7.5rem	Espaçamento máximo

/* Exemplo: layout de página com espaçamento macro */
.page {
  padding: var(--spacing-9);           /* 48px */
}

.section + .section {
  margin-top: var(--spacing-8);        /* 40px */
}

.page-header {
  margin-bottom: var(--spacing-7);     /* 32px */
}

Escala visual

A escala completa segue uma progressão que equilibra granularidade nos tamanhos menores com saltos maiores nos tamanhos grandes.

4 → 8 → 12 → 16 → 20 → 24 → 32 → 40 → 48 → 56 → 64 → 72 → 80 → 88 → 96 → 120
|    |     |    |    |    |    |    |    |    |    |    |    |    |    |     |
+4   +4   +4   +4   +4   +4   +8   +8   +8   +8   +8   +8   +8   +8   +8   +24

• Dentro de um componente -- use micro (spacing-1 a spacing-6)
• Entre componentes/seções -- use macro (spacing-7 a spacing-16)
• Na dúvida, use --spacing-4 (16px / 1rem) como padrão

Aliases legado

Aliases de compatibilidade com componentes existentes. Mapeiam para os tokens numéricos.

Alias	Token	Valor
--spacing-xs	--spacing-1	4px
--spacing-sm	--spacing-2	8px
--spacing-md	--spacing-4	16px
--spacing-lg	--spacing-5	20px
--spacing-xl	--spacing-6	24px
--spacing-2xl	--spacing-7	32px
--spacing-3xl	--spacing-8	40px
--spacing-4xl	--spacing-9	48px
--spacing-5xl	--spacing-10	56px
--spacing-6xl	--spacing-11	64px
--spacing-7xl	--spacing-12	72px
--spacing-8xl	--spacing-13	80px
--spacing-9xl	--spacing-14	88px
--spacing-10xl	--spacing-15	96px
--spacing-11xl	--spacing-16	120px

Prefira os tokens numéricos (`--spacing-1` a `--spacing-16`) em código novo. Os aliases existem apenas para compatibilidade com componentes legado.

Border radius

Tokens de arredondamento de cantos.

Token	Valor	Uso
--radius-none	0	Sem arredondamento
--radius-sm	2px	Elementos sutis
--radius-md	8px	Componentes padrão (cards, inputs, modais)
--radius-lg	10px	Containers maiores
--radius-full	9999px	Círculos, pills, badges

.card {
  border-radius: var(--radius-md);  /* 8px */
}

.badge {
  border-radius: var(--radius-full); /* pill */
}

Sombras

Tokens de elevação para criar hierarquia visual.

Token	Valor	Uso
--shadow-sm	0 1px 2px 0 rgba(0,0,0,0.05)	Elevação sutil (cards, inputs)
--shadow-md	0 4px 6px -1px rgba(0,0,0,0.1), ...	Elevação média (dropdowns)
--shadow-lg	0 10px 15px -3px rgba(0,0,0,0.1), ...	Elevação alta (modais, popovers)
--shadow-xl	0 20px 25px -5px rgba(0,0,0,0.1), ...	Elevação máxima (tooltips flutuantes)

.card {
  box-shadow: var(--shadow-sm);
}

.modal {
  box-shadow: var(--shadow-lg);
}

Transições

Tokens de duração para animações consistentes.

Token	Valor	Uso
--transition-fast	150ms ease-in-out	Hover, focus, estados rápidos
--transition-base	200ms ease-in-out	Transições padrão
--transition-slow	300ms ease-in-out	Abertura/fechamento de painéis

.button {
  transition: background-color var(--transition-fast);
}

.accordion-content {
  transition: height var(--transition-slow);
}

Z-index

Escala fixa de z-index para evitar conflitos de sobreposição.

Token	Valor	Uso
--z-dropdown	1000	Dropdowns, selects
--z-sticky	1020	Headers fixos, sidebars
--z-fixed	1030	Elementos fixos
--z-modal-backdrop	1040	Overlay de modais
--z-modal	1050	Modais, drawers
--z-popover	1060	Popovers
--z-tooltip	1070	Tooltips

.dropdown-menu {
  z-index: var(--z-dropdown);
}

.modal-overlay {
  z-index: var(--z-modal-backdrop);
}

.modal {
  z-index: var(--z-modal);
}

Versão0.1.0

Última atualização13 mar 2026

Caminhosrc/tokens/variables.css