Shadows & Elevation
Sombras e elevação ajudam a criar profundidade, hierarquia e destaque visual na interface. Esta página reúne as escalas e diretrizes oficiais do sistema.
Não aplique sombras personalizadas. Prefira sempre a escala documentada do sistema.
Boas Práticas
Quando usar
Aplicar sombras seguindo os níveis definidos pelo sistema.
Utilizar sombras para reforçar hierarquia e destaque visual.
Manter consistência entre componentes com o mesmo nível de profundidade.
Aplicar sombras proporcionais ao contexto do componente.
Utilizar sombras para indicar sobreposição, foco ou interação.
Quando não usar
Utilizar sombras fora da escala oficial.
Aplicar sombras sem necessidade ou significado visual.
Misturar diferentes níveis de sombra sem critério.
Utilizar sombras excessivas que prejudiquem legibilidade ou contraste.
Shadows & Elevation
Duas famílias: Shadow / drop shadow (profundidade e elevação, escala 2xs → 2xl) e Focus (anel de foco por estado). A cor base das sombras é preto (#000000) com a opacidade indicada. O anel de foco usa 2px do fundo (--ui-bg) + 4px da cor do estado.
Shadow / drop shadow
| Name | Preview | Valor (box-shadow) | Uso |
|---|---|---|---|
| 2xsshadow-2xs | Separação mínima — divisórias e realces sutis | ||
| xsshadow-xs | Inputs e controles pequenos | ||
| smshadow-sm | Cards normais, inputs com foco | ||
| mdshadow-md | Dropdowns, popovers, tooltips | ||
| lgshadow-lg | Modais, drawers | ||
| xlshadow-xl | Overlays, panels, sidesheets | ||
| 2xlshadow-2xl | Sombra de máxima intensidade |
Focus
| Name | Preview | Valor (box-shadow) | Uso |
|---|---|---|---|
| focus-neutral | Foco padrão em elementos neutros | ||
| focus-primary | Foco em ações primárias | ||
| focus-secondary | Foco em ações de apoio | ||
| focus-info | Foco em contexto informativo | ||
| focus-warning | Foco em estados de atenção | ||
| focus-success | Foco em estados de sucesso | ||
| focus-error | Foco em estados de erro |
Regras de aplicação
Cada nível de sombra segue uma escala padronizada para criar profundidade, reforçar hierarquia e garantir consistência visual entre interfaces e componentes. O foco usa sempre o anel de 2 camadas (gap do fundo + cor do estado), garantindo visibilidade em qualquer superfície.
Utilize os valores de sombra e de foco definidos pelo sistema e evite aplicar efeitos manuais fora da escala oficial.
Exemplos de uso
<!-- Elevação -->
<div class="shadow-sm rounded-lg border p-4">Card normal</div>
<div class="shadow-md rounded-lg border p-4">Dropdown / Popover</div>
<div class="shadow-lg rounded-lg border p-4">Modal / Drawer</div>
<div class="shadow-xl rounded-lg border p-4">Overlay global</div>
<!-- Foco (anel por estado) -->
<button
class="rounded-md px-4 py-2 focus:outline-none"
style="--tw-ring: 0 0 0 2px var(--ui-bg), 0 0 0 4px var(--ui-primary)"
>
Foco primary
</button>