Pular para o conteúdo
Sinapse Sinapse

Efeitos

Sombras e blur. O Figma agrupa como estilos de efeito; o DS expõe como tokens e utilitários de uso.

Sistema de elevação

Hierarquia por contexto de uso, não por tamanho abstrato. Cada nível usa duas camadas de sombra: uma próxima e nítida, outra distante e suave. Cor sempre secondary/opacity/950-10% (#14508F1A em claro, #1961AC1A em escuro).

Camada 1

Sombra próxima e nítida — define a borda imediata e dá presença.

Camada 2

Sombra distante e suave — espalha luz e sugere altura física.

Cor

Azul tintado #14508F / #1961AC @ 10%. Sombras coloridas reforçam identidade.

Sombras (Box-shadow)

3 níveis. A amostra renderizada fica à esquerda; os valores copiáveis ficam à direita.

Sombra média

Cartão sobre página, tile e item de lista elevado.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 1px Raio: 2px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: 0px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 4px Raio: 6px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: -1px Atrás do elemento: Não
Tailwind: · CSS var:

Sombra grande

Dropdown, popover, tooltip e mega menu.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 4px Raio: 6px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: -4px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 10px Raio: 15px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: -3px Atrás do elemento: Não
Tailwind: · CSS var:

Sombra extra grande

Modal, dialog e drawer em tela cheia.

Camada 1: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 8px Raio: 10px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: -6px Atrás do elemento: Não

Camada 2: sombra projetada

Visível: Sim Deslocamento X: 0px Deslocamento Y: 20px Raio: 25px Cor: secondary/opacity/950-10% #14508F 10% · escuro #1961AC 10% Modo de mescla: NORMAL Espalhamento: -5px Atrás do elemento: Não
Tailwind: · CSS var:

Como usar

Card

<div
  class="
    rounded-2xl
    bg-background
    p-6
    shadow-card
  "
>
  Conteúdo
</div>

Dropdown

<div
  class="
    rounded-xl
    bg-background
    shadow-overlay
    ring-1
    ring-border
  "
>
  Itens do menu
</div>

Modal

<dialog
  class="
    rounded-3xl
    bg-background
    p-8
    shadow-popup
  "
>
  Diálogo crítico
</dialog>

Desfoque de fundo

O Figma declarou 1 nível de 4px. Use para superfícies translúcidas sutis sobre conteúdo.

Blur pequeno (4px)

Desfoque de fundo sutil em cabeçalhos e navbars fixas sobre conteúdo.

Camada 1: desfoque de fundo

Visível: Sim Raio: 4px
Tailwind: · Nativo: · CSS var:
Copiado