guisso guisso
Select language
PT EN
Open navigation menu
Home Blog Projects Talks Books Tags
PT

style guide

Every single ready-made block from the neon kit

This page gathers the real components from the blog so reviews, QA, and new layouts stay in sync. Everything here reuses the same dark theme with neon gradients—no external UI libraries needed.

Need a new section or component? Duplicate the matching block from this guide, edit the content, and keep the same design tokens. Whenever you want the old Oferta do Dia font, wrap the text in <span class="display-special primary"> to apply the default gradient.

See components Projects using the kit

colors

Official palette and tokens

Always rely on these tokens. They already have the right contrast for the dark background and follow the same neon gradients.

  • Base background

    --color-bg

    #020204

  • Panel

    --color-panel

    #131318

  • Primary text

    --color-fg

    #F5F5FF

  • Muted text

    --color-muted

    #A8A9BB

  • Neon green

    --color-accent

    #00FF7F

  • Neon purple

    --color-secondary

    #9A1AFF

  • Neon blue

    --color-highlight

    #6E6EFF

gradients

How the glow is applied

These three gradients keep the neon language consistent across backgrounds, text, and borders. Combine them with span.primary to fire the same beam used on the homepage.

  • Glow mesh

    --glow-gradient

    Global background. Blends green, purple, and blue in a radial blur.

  • Primary beam

    span.primary

    Default gradient text for headlines and highlights.

  • Neon shield

    GlowBox::before

    Glowing borders used by structural components.

typography

Type scale

Space Grotesk leads the headings, Inter handles body copy, and Oferta do Dia is reserved for special spans.

Hero / H1

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

H1s and hero titles. Only use gradients when wrapping text in span.primary.

Sections / H2–H3

Space Grotesk SemiBold · 32–40px

Section headings. Keep them in Space Grotesk to preserve rhythm.

Body

Inter Regular · 18px · line-height 1.7

Paragraphs, descriptions, and card notes.

Highlight span

Oferta do Dia + span.primary

Only for short snippets like badges, keywords, or inline CTAs.

Heading 1

Heading 1 · Space Grotesk 64px

Heading 2

Heading 2 · Space Grotesk 40px

Heading 3

Heading 3 · Space Grotesk 28px

Paragraph

This is the base: Inter 18px, line-height 1.7. Use span.primary for Oferta do Dia highlights when you need extra contrast.

micro labels

Approved eyebrows

Lowercase labels with generous tracking keep the neon narrative consistent and precede every heading.

style guide

Hero / Context

Sits above H1 to identify the page or primary section.

components

Inner sections

Splits long blocks and builds rhythm on long pages.

quick insight

Cards and meta

Use in cards, callouts, and post metadata to reinforce the topic.

Always use the .eyebrow class: Inter uppercase, generous tracking, and var(--color-muted). Never swap it for bold text.

components

Buttons and states

GlowButton spans the entire CTA range. Combine variants and sizes to match any context.

Subtle inline link for cards and paragraphs.

Main neon CTA for pages and forms.

Support links that shouldn’t steal focus.

CTA with transparent background on dark areas.

Utility buttons such as filters and anchors.

labels

Rounded chips

The Chip component concentrates all rounded tags used on cards and filters. Ghost is the default variant.

AppSec Home Lab Infra Release

Use <Chip variant="ghost"> on cards (matches the blog) and go with variant="solid" whenever you need extra contrast.

badges

Pills for numbered lists

Utility classes for annotating: base .pill + color.

base A1 T1 C1 G1 P1

Start with .pill and pair with: .pill-orange , .pill-red , .pill-blue , .pill-green , .pill-purple. Example: <span class="pill pill-red">T2</span>.

posts

Inline post meta

Publish date + word count + reading time in a single row above the chips. No borders—just icon and text.

inline meta

Use right before the tags

12 Jan 2025 1,200 words 7 min
AppSec Infra Release

Use .post-meta__text at weight 500 with neon-green icons. Stack the entries on small screens but keep the default gap.

layout

Timeline block

Vertical path with neon spine and dots. Use it for career highlights or milestones.

  1. 2024 — now

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

  2. 2022 — 2024

    Globo · Security practice for large engineering teams

  3. 2017 — 2019

    Communities · Goroa + Dumont Hackerspace

Use <Timeline /> inside GlowBox. The component ships with the neon spine, centered dots, and spacing tuned for the dark theme.

base blocks

GlowBox + Callout

GlowBox organizes panels and clusters. It hosts callouts, lists, and any editorial content while keeping the soft glow.

Relaxed GlowBox

Use padding="relaxed" for secondary heroes or to spotlight dense blocks such as changelogs. The border always uses the default neon gradient.

  • Accent: primary highlight.
  • Secondary: contrast with purple hues.
  • Highlight: mixes blue and purple.

Embedded callouts

Drop Callout inside GlowBox for notes and alerts. The icon prop takes emoji or inline SVG; variant sets the state.

CTA with icon

Use the danger gradient for in-article CTAs (e.g., mini games). Icon is optional.

Default info

Focuses on neon green with maximum contrast.

Success

Confirmations or feature unlocks.

Attention

Soft alerts—never use red.

controls

Utility buttons

The circular GitHub button and the hamburger trigger share the same soft glow and should be reused as-is.

github

48×48px circle with translucent border, subtle mesh background, and white icon. Hover lifts 2px and swaps the border to neon.

hamburger

52px circular button, 1px rgba(255,255,255,0.12) border, and purple/blue radial fill. Lines use a green→blue gradient.

cards

FeaturedProjectCard in action

Neon cards rely on blended background images and uppercase CTAs. Provide title, description, URL, and image—that’s it.

posts

Blog cards

Neon grid for articles: keeps reading meta, tag, and ghost CTA aligned with the rest of the system.

identity

Double avatar (TalkAvatarBadge)

The same badge shown on the header: two stacked photos create a parallax vibe when the cursor gets close.

Hover offsets the secondary avatar and adds a hologram feel. Swap the images through the avatarSrc and photoSrc props.

Ideal for personal CTAs, “about” sections, and talk invitations—keeps the same glow and uses zero external libraries.