# Personal identity — the mark this site is built on

> Case study: designing my own mark — construction, scalability, the colour and type system, and how it holds from a favicon to a full lockup.

Source: https://ricardoportfolio.xyz/work/identity
Language: en

---

Ricardo Costa
Personal identity · Case study
2026
Personal identity
# The logo is basically a stylised version of me.
The logo is a stylised version of me — the glasses, moustache, creative side, technical side and the purple I naturally use all the time.
Read the story
![The Ricardo Costa lockup](https://ricardoportfolio.xyz/ricardo%20logo.svg)
01 — The Brief
## A personal mark built from the things that actually make me, me.
The hair reflects the creative side of who I am and the kind of work I’ve always been drawn to — illustration, animation, branding, visual design and just making things with personality. I didn’t want the logo to feel too corporate or generic, because that wouldn’t really feel like me.
“Creative, visual, technical, a little playful.”
Learn more
01 / STAND OUT
I wanted it to feel like me.
The glasses are there because I actually wear them. They also gave me a natural way to represent the two sides of how I work: one visual and creative, the other more technical.
02 / DUAL ROLE
One eye for design. One eye for how it works.
One side is about how something looks, feels and communicates. The other is about how it works. That is why one lens carries the technical symbol — a nod to UI/UX, front-end development, React and building real digital products.
02 — Construction
## Simple enough to work everywhere.
System Specs
PRIMARY LOCKUP
![The primary lockup](https://ricardoportfolio.xyz/ricardo%20logo.svg)
STANDALONE ICON
![The standalone icon](https://ricardoportfolio.xyz/ricardo-costa-icon.svg)
LUMINOUS WORDMARK
![The wordmark](https://ricardoportfolio.xyz/ricardo-wordmark.svg)
03 — Scalability
## Recognisable whether it is tiny, full-size or reversed.
ICON SCALE PERFORMANCE
Pass
128px
64px
32px
Avatar Mode
HIGH-CONTRAST REVERSED
Dark mode
![The lockup reversed on black](https://ricardoportfolio.xyz/ricardo-logo-light.svg)
On dark backgrounds the mark flips to warm paper with the violet lens kept as the accent.
04 — Brand Spec Sheet
## Colour palette
Ink Purple
#2E0D5A — Frames & Wordmark
Electric Violet
#9F66FF — Atomic lens highlight
Paper
#F2F0EB — Portfolio canvas
Ink
#0D0D0C — Default dark / deep tone
THE PRIMARY DISPLAY ACCENT
Instrument Serif Italic
Purple is there for a very simple reason: it’s my favourite colour. I’ve always naturally gravitated towards it, so when I was creating something that was supposed to represent me, using purple just made sense.
STRUCTURE & SYSTEM BODY
Geist Variable
The technical symbol represents the part of my work that goes beyond visuals — UI/UX, front-end development, React and building actual digital products instead of stopping at the design stage.
05 — Brand Application
## An identity built for the work I actually do.
DEVELOPER PORTFOLIO HEADER (2026)
ricardocosta.dev
Lab
Log
Github
06 — Reflection
## One eye for how it looks. One eye for how it works.
Overall, the mark is just a compact version of how I work: visual, technical, a little playful, and interested in both the design and the thing behind it.
Explore the playground