← Voltar

Liquid Glass — Design System v4

70% dos novos seguidores não engajam
Hero Text

Bodoni Moda 700 / 5rem / line-height: 0.85 / letter-spacing: -3px

Display Italic

Bodoni Moda Italic / 3.5rem / line-height: 0.9 / letter-spacing: -1px

Heading Level One

Bodoni Moda 700 / 2.5rem / line-height: 1.0

Heading Level Two

Bodoni Moda 700 / 2rem / line-height: 1.05

Heading Level Three

Bodoni Moda 400 / 1.5rem / line-height: 1.15

Body text — clean, readable, refined. The body text in Jost 300 flows effortlessly beneath bold Bodoni Moda headlines. Lightweight, open, and deeply legible even on glass panels at low contrast.

Jost 300 / 1.125rem / line-height: 1.7

Caption text for secondary information and metadata

Jost 400 / 0.875rem / color: text-muted

Label Text Uppercase

Jost 600 / 0.75rem / letter-spacing: 3px / uppercase

const glass = { blur: "20px", opacity: 0.05 };

Courier New / 0.875rem / color: gold-light

Background
#070712
Glass Panel
rgba(255,255,255,0.05)
Primary Text
#F0F0FF
Gold Accent
#C9A84C
Gold Light
#E8C46A
Purple Accent
#7C3AED
Muted Text
rgba(240,240,255,0.5)
Glass Border
rgba(255,255,255,0.1)
--space-1: 4px
--space-2: 8px
--space-3: 16px
--space-4: 24px
--space-5: 32px
--space-6: 48px
--space-7: 64px
--space-8: 96px
--space-9: 128px

Tamanhos

Variantes

NOVO
Engajamento
Transforme seguidores passivos em participantes ativos da sua comunidade.
Marketing • 2024
BETA
Automacao
Respostas automaticas que parecem humanas. Escale sem perder autenticidade.
Produto • 2024
URGENTE
Conversao
De seguidor a cliente em 3 passos. Funil otimizado por dados reais.
Growth • 2024
70%
Nao Engajam
3.2x
Mais Conversao
24h
Tempo Medio
98%
Satisfacao
DEFAULT GOLD PURPLE OUTLINE DANGER

Nunca compartilharemos seu email.

Email invalido. Use o formato nome@dominio.com

Gold (1px + glow)


Glass (1px rgba)


Subtle (1px deep)


Gradient (center fade)


Ultra Blur
Máxima opacidade do desfoque — backdrop-filter: blur(40px). Ideal para modais e overlays críticos onde o contexto de fundo precisa desaparecer quase completamente.
blur: 40px • opacity: 0.04
Glow Border
Borda interna com brilho dourado emanando de dentro para fora. Camadas de box-shadow criam profundidade luminosa sem overload visual.
inset glow • outer glow
Gold Shimmer
Gradiente gold em movimento via CSS animation. Reflexo sutil que atravessa o painel de forma contínua — premium sem ser distrator.
css animation • 4s loop