Lumina

Pattern · Lumina

Glass Header

Header sticky com backdrop-blur e fundo semi-translúcido. A assinatura visual do Lumina no topo de qualquer produto da nimbuslab.

Preview

produtodesign system

Receita

Quatro elementos: sticky, backdrop-blur-md, bg/80, border sutil. Nada mais.

TSX
CSS

Tokens

  • Altura: h-12 (compacto) ou h-14 (com mood toggle).
  • Background: bg-background/[0.78] via .lumina-glass.
  • Blur: backdrop-blur-md (14 px) + saturate(140%) pra cor não chapar.
  • Border: border-b border-border/60, sutil, quase invisível.
  • Sticky: sticky top-0 z-50.

Quando NÃO usar

  • Em conteúdo de leitura longa (artigo, doc densa). Atrapalha foco.
  • Em mobile com teclado aberto. Vira espaço perdido.
  • Em modais ou sheets. Glass dentro de glass cancela.