will bank · Security Software Engineer (AppSec & Sec Eng)
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.
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.
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>.
visual
Evolução do OWASP Top 10
Componente para ilustrar rapidamente mudanças entre edições do Top 10. Útil em introduções e apresentações.
| 2021 | Categoria |
|---|---|
| A01 | Broken Access Control |
| A02 | Cryptographic Failures |
| A03 | Injection |
| A04 | Insecure Design |
| A05 | Security Misconfiguration |
| A06 | Vulnerable and Outdated Components |
| A07 | Identification and Authentication Failures |
| A08 | Software and Data Integrity Failures |
| A09 | Security Logging and Monitoring Failures |
| A10 | Server-Side Request Forgery (SSRF) |
| 2025 | Categoria |
|---|---|
| A01 | Broken Access Control |
| A02 | Security Misconfiguration |
| A03 | Software Supply Chain Failures new |
| A04 | Cryptographic Failures |
| A05 | Injection |
| A06 | Insecure Design |
| A07 | Authentication Failures |
| A08 | Software or Data Integrity Failures |
| A09 | Security Logging & Alerting Failures |
| A10 | Mishandling of Exceptional Conditions new |
post samples
Componentes do post OWASP 2025
Preview do padrão usado no artigo: chips de categoria no título e pills no texto.
A03 Software Supply Chain Failures NEW
A03:2025 Software Supply Chain Failures NEW amplia o antigo modelo de componentes vulneráveis para toda cadeia de software.
A02:2025 Security Misconfiguration subiu para #2 na lista oficial.
posts
Meta inline do artigo
Publicado + contagem de palavras + tempo em linha, acima dos chips. Sem bordas, só ícone e texto.
layout
Bloco de linha do tempo
Trilha vertical com espinha neon e pontos. Use para carreira ou milestones.
-
-
Globo · Prática de segurança para times grandes
-
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.
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.
- 24 jun 2024
Guardrails neon para o pipeline de AppSec
Como integrei scanners, alerts e feature flags em um único fluxo sem travar deploys.
1.1k palavras · 6 min
AppSec ler artigo ↗ - 18 mai 2024
Home lab como staging de autenticação
Orquestração de VMs e tunéis WireGuard para validar fluxos sem depender do ambiente oficial.
980 palavras · 5 min
Home-lab ler artigo ↗ - 09 abr 2024
Design tokens de neon para Figma e código
Documentei como manter as mesmas cores e espaçamentos em todas as superfícies.
760 palavras · 4 min
Design ler artigo ↗
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.
logo
Versões aprovadas
LogoWordmark responde à cor do container. Use o fundo certo para alternar automaticamente entre branco e preto.
Para microsites mantemos variações tipográficas: gwiki (wiki.guisso.dev), gtuner (guisso.dev/gtuner) e o monograma G para ícones compactos.
Arquivos em 900px, fundo transparente, exportados direto do LogoWordmark oficial.
Versão branca (default)
Versão preta
Monograma G
Badge micro para scripts e GTuner.
gwiki wordmark
wiki.guisso.dev
gtuner wordmark
guisso.dev/gtuner
código
DiffBlock + DiffLine
Visualizador de diff anotado para artigos de segurança e análises de código. Cada linha pode ter
uma anotação expansível — clique numa linha com · para revelar a explicação.
Use tagVariant para colorir o badge: danger (vulnerável),
success (corrigido), warning (patch parcial), info (neutro).
exemplo/response.js — commit abc1234 vulnerável
911
res.location = function location(url) { 912
var loc = url; 913 −
return this.set('Location', encodeUrl(loc));
↳ ANTES: sempre encodava tudo sem nenhuma verificação — linha original e vulnerável
913 +
var encoded = encodeUrl(loc);
↳ DEPOIS: guarda o resultado para comparação antes de retornar
914 +
return this.set('Location', encoded); 915
}; clique em uma linha com · para ver a anotação
Props de DiffBlock: filename, tag, tagVariant (danger / success / warning / info).
Props de DiffLine: num, type (add / remove / context / hunk), code, annotation (opcional — ativa o clique).
interativo
RedirectPipelineDemo
Simulador interativo do pipeline CVE-2024-29041. Demonstra como uma URL com barra invertida
bypassa uma allowlist baseada em url.parse() e faz o browser navegar para um host diferente.
Componente auto-contido — sem props, sem dependências externas.
Payloads prontos
componentes
Breakdown
Exibe qualquer string dividida em segmentos coloridos com labels. Funciona para URLs, comandos de terminal, schemas, regex ou qualquer string que precise de anatomia visual.
Props: parts[] — array de { text, label, sub?, color }.
http://
usuario:senha@
google.com
:8080
/caminho
?q=busca
#ancora
git
log
--oneline
origin/main