Brand & Visual System

The system, documented.

Everything that defines the look, tone and behavior of the site — palette, typography, spacing, anchor components and motion. When in doubt, this is the source of truth.

Version · v2026.01Released · Jan 2026Status · ● Living documentImplementation · styles.css

Palette — core tokens.

// 01 — COLORS

Dark canvas with a single living color. The lime #c5fc4d is surgical — pills, active dots, italics, LATEST tags. Pure white #ffffff is forbidden — always #e8e8e3.

// surfaces

// text

// borders

// accents

// usage ratio · 70 / 20 / 10

70% bg + neutrals
20% text
10% lime
Surfaces & neutralsPrimary textLime (surgical accent)

Typography — Geist.

// 02 — TYPE
Aa Bb Cc 0123
Engineering interfaces
FamilyGeistUseDisplay, body, navigationWeights loaded300, 400, 500, 600, 700Recommended500 for headings · 400 for bodyTracking-0.04em headings · -0.01em body
Aa Bb Cc 0123
// guilherme.json
FamilyGeist MonoUseEyebrows, labels, chips, tags, hashes, clockWeights loaded400, 500, 600Recommended400 always · 500 for rare emphasisCarries~30% of the technical identity

// scale

Hero headlinedisplay · w500
Engineering millions.
96px · clamp(48–132)
line: 0.95
track: -0.04em
Section titledisplay · w500
A craftsman, not a code monkey.
64px · clamp(36–80)
line: 1.0
track: -0.04em
Subsectiondisplay · w500
Things I've shipped.
40px
line: 1.05
track: -0.03em
Tagline / leadsans · w400
Senior full-stack engineer obsessed with the millimeter craft of interfaces.
24px
line: 1.4
track: -0.01em
Body largesans · w400
I believe great software is invisible — until you compare it with the alternatives. The interfaces I build aim for that: fast, deliberate, accessible.
18px
line: 1.6
color: text-dim
Bodysans · w400
A simple but effective tool to help Music Directors lead their bands and coordinate songs in real time.
15px
line: 1.5
color: text-dim
Eyebrowmono · w400
— Career, as a changelog
12px
line: 1.5
track: 0.02em
Caps / labelsmono · w400
// 03 — EXPERIENCE
10px
letter-spacing: 0.1em
uppercase

Spacing — 8pt grid.

// 03 — SCALE
--s-1
4px
--s-2
8px
--s-3
12px
--s-4
16px
--s-5
24px
--s-6
32px
--s-7
48px
--s-8
64px
--s-9
96px
--s-10
128px
--s-11
192px

// border radius

4pxsmall tags
16pxcards & panels
999pxpills & dots

Components — anchors.

// 04 — UI

Buttons

primary · secondary
See selected workLet's talk
Available — Q1'26

Chips, Tags & Pills

mono · 11–12px
React 19TypeScriptTailwindNext.jsPrismaStripev8.0.0v8.0.0

Stat

data display
1M+
users reached across products in production worldwide.
22%
average performance gains delivered through targeted refactors.

Changelog · Diff lines

anchor component
+Shipped customer platform features end-to-end
+Built and maintained the internal back-office app on Nuxt + Node
★Cross-squad collaboration: customer platform (8 ppl) + back-office (3 ppl)
+ green · added / shipped+ lime · highlight ship★ violet · leadership

Status indicator

live · pulsing
Available
Limited
Booked

Motion — intentional, never decorative.

// 05 — MOTION

Default easing

Out-quart-ish. Soft on entry, decisive on exit. Use it almost everywhere.

cubic-bezier(0.16, 1, 0.3, 1)

Reveal on scroll

IntersectionObserver triggers fade + translateY 30px → 0.

0.7s · ease-out · stagger 100ms

Headline word reveal

Each word with overflow:hidden, inner translateY 110% → 0. Incremental 100ms delay.

1.1s · word-by-word cascade

Stat counter

Counts from 0 to the real value with cubic-out easing.

1.6s · trigger on intersect 0.4

Status pulse

Box-shadow 0 → 8px → 0, transparent. Infinite loop.

2s · ease-in-out · infinite

Magnetic buttons

Translation proportional to cursor distance. 18% horizontal, 25% vertical.

transform: translate(x*0.18, y*0.25)

Custom cursor

Rigid dot (direct mousemove), ring with 0.18 lerp — natural lag. Mix-blend-difference.

lerp 0.18 · ring 32→56px on hover

Grid background

Full-viewport canvas. Dots grow and glow within a 220px radius of the cursor.

requestAnimationFrame · 56px cell

Timeline progress

Lime bar fills as you scroll through the releases section.

scroll-linked · CSS var --scroll-progress

Voice — direct, never arrogant.

// 06 — COPY
+ DO
  • Show before you tell. "35M+ users", "27K+ active customers" — not "passionate".
  • Short imperatives in CTAs. "See selected work" · "Let's talk" · "Schedule a call".
  • Code-comment section markers. // 03 — EXPERIENCE
  • Descriptive eyebrows. "Career, as a changelog" · "The engineer".
  • Italics for emphasis. On key words, always lime.
— DON'T
  • "I'm passionate about clean code" — empty buzzword.
  • "Innovative solutions for digital transformation" — buzzword soup.
  • Emojis in headlines or formal sections. Fine in meta microcopy.
  • Stock photos of "developer typing" — placeholders just to fill emptiness.
  • "Welcome to my portfolio" — don't ask permission to exist.

Don'ts — hard rules.

// 07 — RULES
✗Never pure white #ffffff. Always use --text (#e8e8e3) — pure white feels clinical in a dark theme.
✗Lime never as a section background. Only in pills, dots, italics, and ONE primary button per viewport.
✗Headings never weight 700. Always 500. Heavier weights kill the elegance.
✗No Inter, no Roboto, no system-ui. Geist is the identity — substituting it strips the personality.
✗No psychedelic gradients in section backgrounds. Gradients only on project cards, two colors max.
✗No heavy drop-shadows. Hierarchy comes from borders and subtle bg elevation, not blur.
✗No text-align: center on long paragraphs. Reserve it for mega CTAs (8.0+ rem).
✗Container never above 1280px. Density beats sprawl.
✗No emojis in hero, headlines or CTAs. Fine in meta microcopy in moderation.