ITpS

Estilos

Efeitos

Sombras e blur. Designer agrupa como Effect Styles. Sombras tintadas com azul institucional (não cinza neutro) — respiram a marca.

Sistema de elevação

Hierarquia por contexto de uso, não por tamanho abstrato. Cada nível usa 2 layers de sombra — uma sharp próxima e uma soft distante. Cor sempre secondary/opacity/950-10% (#14508F1A).

Camada 1

Sharp close shadow — define a borda imediata, dá presença.

Camada 2

Soft distant shadow — espalha luz, sugere altura física.

Cor

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

Sombras (Box-shadow)

3 níveis. Sample real à esquerda, valores estruturados à direita.

Box-shadow/Medium (on screen — e.g.: cards)

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

Effect 1: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 1px Radius: 2px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: 0px Show Shadow Behind Node: False

Effect 2: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 4px Radius: 6px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: -1px Show Shadow Behind Node: False
Tailwind: · CSS var:

Box-shadow/Large (over screen — e.g.: overlays)

Dropdown menu, popover, tooltip, mega menu.

Effect 1: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 4px Radius: 6px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: -4px Show Shadow Behind Node: False

Effect 2: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 10px Radius: 15px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: -3px Show Shadow Behind Node: False
Tailwind: · CSS var:

Box-shadow/Extra Large (full screen — e.g.: pop-up)

Modal, dialog, sheet drawer fullscreen.

Effect 1: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 8px Radius: 10px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: -6px Show Shadow Behind Node: False

Effect 2: DROP_SHADOW

Visible: True Offset X: 0px Offset Y: 20px Radius: 25px Color: 1. Color/secondary/opacity/950-10% #14508F (10%) Blend Mode: NORMAL Spread: -5px Show Shadow Behind Node: False
Tailwind: · CSS var:

Como usar

Card (Vue/React/Astro) 
<div class="rounded-2xl
  bg-background p-6
  shadow-card">
  Conteúdo
</div>
Dropdown overlay 
<div class="rounded-xl
  bg-background
  shadow-overlay
  ring-1 ring-border-border">
  Menu items
</div>
Modal pop-up 
<dialog class="rounded-3xl
  bg-background p-8
  shadow-popup">
  Diálogo crítico
</dialog>

Backdrop blur

Designer declarou só 1 nível (4px). Glassmorphism sutil para headers/navbars sticky sobre conteúdo.

Blur/Small (4px)

Backdrop blur sutil. Glassmorphism leve em headers/navbars sticky.

Effect 1: BACKGROUND_BLUR

Visible: True Radius: 4px
Tailwind: · Nativo: · CSS var:

Notas

palette

Sombras tintadas, não cinza

Designer usa secondary-overlay-950-10 (azul @ 10%) em todas as sombras. Sombra cinza tradicional faz layout parecer genérico — azul tintado reforça marca em camadas profundas.

info

Tokens disponíveis

  • Para sombra sutil, use ring-1 + border.
  • Blur disponível em 1 tamanho (backdrop-blur-small).
Copiado