A depth é cor, não preto.

Toda sombra de identidade combina inset hairline branco + glow roxo translúcido. Isso é o que diferencia visualmente do "drop-shadow preto" genérico de qualquer SaaS.

Escala de sombras

SH · SM

SH · MD

SH · LG

SH · PURPLE

SH · PURPLE-LG

SH · GLOW

SH · CTA

SH · CARD-HOVER

SH · NAV (glass)

Por que cor, não preto

Toda sombra de identidade combina inset hairline branco + glow roxo translúcido. É a marca conversando consigo mesma na profundidade — não uma camada genérica de drop-shadow.

/* Anatomia de uma sombra Entrelaços */
box-shadow:
  /* glow externo (cor da marca) */
  0 8px 32px rgba(116, 39, 212, 0.25),
  /* hairline interno (luz superior) */
  inset 0 1px 0 rgba(255, 255, 255, 0.08);

Snippet · pronto pra colar

CSS · sombras coloridas

/* Anatomia de uma sombra Entrelaços */
.btn-primary {
  box-shadow:
    /* glow externo (cor da marca) */
    0 8px 32px rgba(116, 39, 212, 0.25),
    /* hairline interno (luz superior) */
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Tokens disponíveis */
.shadow-purple    { box-shadow: var(--e-sh-purple); }
.shadow-purple-lg { box-shadow: var(--e-sh-purple-lg); }
.shadow-cta       { box-shadow: var(--e-sh-cta); }
.shadow-card      { box-shadow: var(--e-sh-md); }
.shadow-card-hov  { box-shadow: var(--e-sh-card-hover); }
.shadow-nav       { box-shadow: var(--e-sh-nav); }