Dil
Dil is the heart on this site. The little pixel one in the corner that watches you.
It blinks. It follows your cursor. If you stick around long enough without moving, it falls asleep. Click it seven times and it winks at you.
Dil is Urdu for heart. One syllable. Everyone understands it.
Why a heart?
I chose computer science because everyone told me to. I chose design because something inside me wouldn't shut up about it.
That something was Dil.
I built a startup. It failed. I built another one. The design was beautiful and nobody cared. I learned the hard way that making things pretty isn't the same as making things useful. That art and design look alike but serve different masters.
Dil cracked a few times. It always repaired itself.
Over the years it filled in. With experience, with people, with the slow realization that the best work comes from caring more than you're supposed to.
Now it lives here. Quietly present. Watching, noticing, feeling things out.
What Dil does
Dil has eight expressions. Four it holds. Four it flashes.
It holds:
It flashes:
That's the whole personality. Two pixel eyes and the way it moves. Turns out that's all you need.
I stole the idea from EVA in WALL-E. A smooth shell, two oval eyes, and body language. That was enough to make you feel everything she felt. That's the bar.
The philosophy
I've spent my career designing for people. Understanding what they need. Watching how they move. Trying to make the thing they're using feel like it was made just for them.
Dil is that instinct turned into a character. The part of any designer that cares too much, notices too much, and can't help but try to make things better.
Every designer has a Dil. This one's mine.
The pixel grid
Dil is built from 6×6 pixel blocks on a 14×11 grid. Pure rectangles. That's the whole vocabulary.
The eyes are windows. They are always the color of the page behind Dil. Swapping expressions is just toggling which blocks are visible. Happy is three arched pixels per eye. Surprised is a 3×3 grid. Sleepy is a thin slit.
The body tilts, floats, and hops using GSAP. The motion gives Dil weight and personality. Everything runs at 60fps, everything is SVG, everything ships as code.
The color is charcoal by day and warm light by night. The same charcoal that's been in my logo since the beginning.
Where Dil lives
- This site. Top of every page, reacting to what you do.
- Favicon. The heartbeat loop in your browser tab.
- Stickers. All eight expressions, free to download.
- Talks. Dil sits in the corner of my slides, reacting to the content.
- Community. You'll see Dil at UX Pakistan events.
Dil was designed in a conversation between me and Claude, iterated through too many ugly prototypes, and named in Urdu because some things should be said in your mother tongue.
If you want to use Dil in your own way, a sticker, a reference, a remix, go ahead. Just keep the heart intact.