Fundamentos
Espaço e forma
Espaçamento
Unidade base de 4px. Todo espaço é múltiplo dela. Na classe do Tailwind, o número é o mesmo: space-4 = p-4 = 16px.
| Token | Valor | Uso | |
|---|---|---|---|
space-1 | 4px | Gap inline mínimo. | |
space-2 | 8px | Gap entre ícone e texto. | |
space-3 | 12px | Padding interno pequeno; padding horizontal do input. | |
space-4 | 16px | Padding padrão de card compacto; gutter mobile. | |
space-5 | 20px | Gap entre campos de formulário; gutter tablet. | |
space-6 | 24px | Padding de card e de seção; gutter desktop. | |
space-8 | 32px | Gap entre seções; padding da área de conteúdo dos portais. | |
space-10 | 40px | Margem de página no mobile. | |
space-12 | 48px | Padding de container. | |
space-16 | 64px | Espaço entre blocos de página. |
Grid e layout
- Desktop (1280px ou mais): container de até 1280px, 12 colunas, gutter de 24px, sidebar fixa de 256px.
- Tablet (768 a 1279px): container fluido, 8 colunas, gutter de 20px, sidebar recolhível.
- Mobile (até 767px): container fluido, 4 colunas, gutter de 16px, navegação inferior.
| Token | Valor | Uso |
|---|---|---|
sidebar-width | 256px | Sidebar fixa dos portais administrativos. |
header-height | 64px | Header do portal do colaborador e do site. |
container-max | 1280px | Largura máxima da área de conteúdo no desktop (12 colunas, gutter 24px). |
content-narrow | 960px | Largura máxima do conteúdo em portais de uma coluna. |
touch-target | 44px | Área mínima de toque no mobile. |
control-sm | 32px | Altura do botão sm. |
control-md | 40px | Altura do botão md e do input. |
control-lg | 48px | Altura do botão lg e altura mínima de linha de tabela. |
Raios
radius-sm4px · Tailwind rounded-smChips e tags pequenas.radius-md8px · Tailwind rounded-lgInputs e botões de todos os tamanhos.radius-lg12px · Tailwind rounded-xlCards, modais e popovers.radius-xl16px · Tailwind rounded-2xlCards de destaque e blocos do site.radius-full9999px · Tailwind rounded-fullBadges de status, avatares, ícone da marca.- 8px (
radius-md) em botões e inputs, de todos os tamanhos. - 12px (
radius-lg) em cards, modais e popovers. - Badges de status e avatares são pílulas (
radius-full).
Elevação
A separação vem principalmente das bordas (border-default). Sombra é discreta.
shadow-smCards e inputs.shadow-mdDropdowns e card clicável em hover.shadow-lgModais e popovers.shadow-xlOverlays e drawers.shadow-smem repouso,shadow-mdem hover e menus,shadow-lgem modais,shadow-xlem drawers.