The pieces this site is made of.
The mark, colors, type, pixels, components and motion behind this portfolio, with the rules I follow. Every example on this page uses the site’s real CSS.
Clear products, built together.
Clear
One idea per screen. If something needs a manual, the design isn’t done yet.
Together
One pixel means nothing; many pixels make an image. The visual language says the same thing my work does: good products are built by teams.
Honest
Real roles, real numbers, real limits. No superlatives, no “the only designer who…”.
A P with a smile.
A pixel P whose bowl is a smiling face: my initial and the way I like to work, in one shape. It sits on an 8 × 8 grid, so it stays sharp at 16, 32 and 64 px with no half pixels.
The eyes blink every few seconds on the site. It’s the only idle animation the mark has.
- Grid
- 8 × 8 cells, 1 cell = 1/8 of the mark
- Clear space
- 1 cell on every side
- Minimum size
- 16 px (favicon), 24 px in the header
- Tile (favicon only)
- 10 × 10, radius 2 cells
Sizes
Lockup
Mark + name in Inter 650, tracking −2%. The gap is the mark’s width × 0.4. On blue and black the mark is white; on white it turns blue. The tile is only for app icons and the favicon.
Please don’t
Don’t rotate it.
Don’t stretch it.
Don’t blur or soften the pixels.
Don’t use it faded or with low contrast.
One blue, plus white and black.
- hex
- #2b4bff
- token
- --blue
The page. Every screen starts here.
5.9:1 with white (AA)- hex
- #ffffff
- token
- --ink
Text, cards, the mark’s tile.
19.6:1 with black- hex
- #0b0b0f
- token
- --black
Buttons, bands, the contact block.
3.3:1 on blue: large text and UI only- hex
- #9aabff
- token
- --px-alt
Second pixel tone in drawings and dithering.
Decorative only- hex
- #4561ff
- token
- --px-tint
Quiet pixels and hover fills.
Decorative onlyWhite over blue
Secondary text, dividers and borders are white at lower opacity, so they always sit on the same blue.
rgba(255,255,255,.76)rgba(255,255,255,.26)rgba(255,255,255,.55)rgba(43,75,255,.84)Three typefaces, three jobs.
Inter does the talking, Geist Mono labels things, and Geist Pixel is the accent: never for long text. All three are open-source (SIL OFL); Geist Pixel is self-hosted.
Everything is a pixel.
One grid, two tones
Every drawing on the site is made of square cells on a grid: white for solid, light blue for the in-between. Photos and illustrations are turned into pixels with dithering, so they share one look. The hero, the work covers, my portrait, the globe and the spiral are all drawn live on a canvas from the same small engine.
Scenes
- Hero my portrait, a phone, a laptop, a game console and two hands, morphing into each other
- Covers each project drawn in pixels until the real image loads
- Portrait dithered photo; hover shows the real one
- Globe the cities where I’ve met my teams
- Spiral how I work, step by step
- 404 one loose pixel to put back
Icons
Brand marks come from Simple Icons, unchanged; line icons are drawn on the same stroke. Tools appear in their original shapes, in white.
The building blocks.
Pill, 15px Inter 600. Black on blue for the main action, outline for the second. One main action per block.
Skills and tools. Not clickable, so no hover state.
One number and one plain sentence. Only numbers I can stand behind.
Have you led a team?
Yes, twice: at the university’s Distance Education Office and at abstrato.co.
Which languages do you speak?
Portuguese, English and Spanish (basic).
Native details/summary, so it works with a keyboard and without JavaScript.
Fields live on a white card. Label above, 16px text, a visible focus ring.
Small mono text that names a section. Lowercase.
Timeline cards: square tags in Geist Pixel and one highlighted stat.
Movement with a reason.
First visit only. The mark builds from flying pixels, a bar counts to 100%, white blocks cover and clear the screen.
1.7–2.4 sWhite pixel blocks wipe across the screen between pages.
≈ 0.6 sOn work cards, the cursor becomes a pill that fills while you hold.
0.6 sContent rises a little and fades in as it scrolls into view.
0.6 s, ease outHero pixels travel from one drawing to the next.
1.1 s per moveThe mark’s eyes close for a moment.
every 5.2 sEasing: cubic-bezier(.2, 0, .38, .9) for most things, cubic-bezier(.4, .14, .3, 1) for travel. With “reduce motion” turned on, the intro, wipes, morphs and blink are off and the timeline becomes a simple list.
Space and structure.
How it sounds.
Simple, direct and friendly. Honest about who did what.
do“I designed every page of the platform.”
don’t“I single-handedly shipped the whole product.”
do“I prototype in code with AI; engineers review and build it.”
don’t“I ship the front end myself.”
do“People found games faster.”
don’t“We unlocked frictionless discovery synergies.”
doOne idea per sentence.
don’tThree clauses, two dashes and a colon.
Works for everyone.
Body text is white on blue (5.9:1). Black is used for large text and buttons only.
Every link, button, question and timeline stop can be reached with Tab and has a visible focus ring.
Respects “reduce motion”: no intro, no wipes, no morphs, no blink.
Pixel drawings have text alternatives; decorative ones are hidden from screen readers.
Content, questions and links still work. The contact form falls back to email.
Looking for your next product designer?
I’d love to hear what you’re building and how I could help.