guisso guisso
Selecionar idioma
PT EN
Abrir menu de navegação
Home Blog Projetos Talks Livros Tags
EN

style guide

Todos os blocos prontos do kit neon

Esta página concentra os componentes reais do blog para facilitar revisões, QA e criação de novos layouts. Tudo aqui reutiliza o mesmo tema escuro com gradientes neon, sem importar libs externas.

Precisa criar uma nova seção ou componente? Duplique o bloco correspondente daqui, ajuste o conteúdo e mantenha os mesmos tokens. Quando precisar da antiga fonte Oferta do Dia, use <span class="display-special primary"> para aplicar o gradiente padrão.

Ver componentes Projetos que usam o kit

cores

Paleta oficial e tokens

Use sempre os tokens abaixo. Eles já possuem contraste ideal para o fundo escuro e respondem ao mesmo gradiente neon.

  • Fundo base

    --color-bg

    #020204

  • Painel

    --color-panel

    #131318

  • Primário

    --color-fg

    #F5F5FF

  • Texto secundário

    --color-muted

    #A8A9BB

  • Neon verde

    --color-accent

    #00FF7F

  • Neon roxo

    --color-secondary

    #9A1AFF

  • Neon azul

    --color-highlight

    #6E6EFF

gradientes

Como o brilho é aplicado

Os três gradientes principais mantêm o neon consistente em fundos, textos e contornos. Combine-os com span.primary para aplicar o mesmo feixe usado na home.

  • Glow mesh

    --glow-gradient

    Plano de fundo global. Mistura verde, roxo e azul em radial blur.

  • Primary beam

    span.primary

    Texto com gradiente padrão para headlines e destaques.

  • Neon shield

    GlowBox::before

    Borda iluminada dos componentes estruturais.

tipografia

Escala tipográfica

Space Grotesk passou a liderar os títulos, Inter segura os textos e Oferta do Dia fica reservada a spans especiais.

Hero / H1

Space Grotesk Bold · clamp(48px, 6vw, 72px)

H1 e heros. Usa gradientes apenas se aplicar span.primary dentro do texto.

Seções / H2–H3

Space Grotesk SemiBold · 32–40px

Títulos internos e seções. Sempre em Space Grotesk para manter o ritmo.

Body

Inter Regular · 18px · line-height 1.7

Parágrafos, descrições e notas de cards.

Highlight span

Oferta do Dia + span.primary

Apenas para trechos curtos (badges, palavras-chave, CTA dentro do texto).

Heading 1

Heading 1 · Space Grotesk 64px

Heading 2

Heading 2 · Space Grotesk 40px

Heading 3

Heading 3 · Space Grotesk 28px

Paragraph

Esta é a base: Inter 18px, line-height 1.7. Use span.primary para o highlight com Oferta do Dia quando precisar de contraste.

micro labels

Eyebrows oficiais

Labels em caixa baixa com tracking amplo reforçam a narrativa neon e antecedem qualquer heading.

style guide

Hero / Contexto

Acima de H1 para indicar o tipo de página ou seção principal.

componentes

Seções internas

Divide blocos extensos e ajuda a criar ritmo em páginas longas.

insight rápido

Cards e meta

Em cards, callouts e post meta para reforçar o assunto.

Sempre use a classe .eyebrow: fonte Inter uppercase, tracking generoso e cor var(--color-muted). Nunca troque por bold.

componentes

Botões e estados

GlowButton cobre o espectro inteiro de CTAs. Combine variantes e tamanhos para qualquer cenário.

Link discreto dentro de cards e textos.

Principal CTA neon para páginas e formulários.

Links de apoio, sem roubar atenção.

CTA com fundo transparente em áreas escuras.

Botões utilitários, como filtros e anchors.

labels

Chips redondas

Componente Chip concentra tags redondas dos cards de posts e filtros. Variante padrão é ghost.

AppSec Home Lab Infra Release

Use <Chip variant="ghost"> nos cards (matching blog) e variant="solid" para estados que precisam de mais contraste.

badges

Pills para listas numeradas

Classes utilitárias: .pill + cor.

base A1 T1 C1 G1 P1

Use .pill como base e combine com: .pill-orange , .pill-red , .pill-blue , .pill-green e .pill-purple. Exemplo: <span class="pill pill-red">T2</span>.

posts

Meta inline do artigo

Publicado + contagem de palavras + tempo em linha, acima dos chips. Sem bordas, só ícone e texto.

meta inline

Usar antes das tags

12 jan 2025 1.200 palavras 7 min
AppSec Infra Release

As métricas usam .post-meta__text com peso 500 e ícones em verde neon. Empilhe em telas pequenas, mantendo o gap padrão.

layout

Bloco de linha do tempo

Trilha vertical com espinha neon e pontos. Use para carreira ou milestones.

  1. 2024 — agora

    will bank · Security Software Engineer (AppSec & Sec Eng)

  2. 2022 — 2024

    Globo · Prática de segurança para times grandes

  3. 2017 — 2019

    Comunidades · Goroa + Dumont Hackerspace

Use <Timeline /> dentro do GlowBox. O componente já traz espinha neon, pontos centralizados e espaçamento ajustado para o tema escuro.

blocos base

GlowBox + Callout

GlowBox organiza painéis e clusters. Dentro dele cabem callouts, listas e qualquer conteúdo editorial mantendo o glow suave.

GlowBox relaxado

Use padding="relaxed" para hero secundário ou para destacar blocos densos como changelogs. A borda sempre usa o mesmo gradiente neon.

  • Accent: destaque principal.
  • Secondary: contrasta com roxo.
  • Highlight: mistura azul e roxo.

Callout embutido

Callout entra direto no GlowBox para notas e avisos. O prop icon aceita emoji ou SVG inline e variant define o estado.

CTA com ícone

Use o gradiente danger para CTAs de leitura (ex.: mini games). Ícone é opcional.

Info padrão

Mantém o foco no tom verde neon com contraste máximo.

Sucesso

Confirmações ou desbloqueios de features.

Atenção

Alertas suaves, nunca use vermelho.

controles

Botões utilitários

GitHub circular e botão hamburguer seguem o mesmo glow suave e devem ser usados como estão.

github

Círculo 48x48px com borda translúcida, fundo em mesh discreto e ícone branco. Hover eleva 2px e troca a borda para neon.

hamburger

Botão circular 52px, borda 1px rgba(255,255,255,0.12) e radial com roxo/azul. As linhas usam gradiente verde→azul.

cards

FeaturedProjectCard em ação

Os cards neon usam imagem de fundo com blend modes e CTA em caps. Basta fornecer título, descrição, url e imagem.

posts

Cards do blog

Grid neon para artigos: mantém meta de leitura, tag e CTA ghost alinhados ao restante do sistema.

identidade

Avatar duplo (TalkAvatarBadge)

Mesmo badge que aparece no header: duas fotos empilhadas criam um efeito parallax quando o cursor se aproxima.

O hover desloca o avatar secundário e dá sensação de holograma. Troque imagens via props avatarSrc e photoSrc.

Ideal para CTAs pessoais, seções “sobre” e convites para talks — mantém o mesmo glow e não usa libs externas.