Design
Gingi
The little ginger guy who signs everything I build.
- Lives in footers, favicons, 404 pages and empty states.
- Blinks every few seconds. Winks when you hover him.
- Drawn on a 68 by 64 grid, with a 3.2 outline everywhere.
- Hair
- Skin
- Line
- Brows
- Tongue
Faces
Eight expressions, each with a job. Only the eyes, mouth and brows change, so he stays recognisable in all of them.
Moves
Hover each one, or tap on a phone. All of it is CSS, and all of it stops for visitors who have reduced motion turned on.
Lockups
“Micky” takes the text colour of wherever it sits. Gingi keeps his own. Paste the SVG inline: as an image, the name loses that colour and the hover stops.
Icons
App icons from 32px up. Below that the full face turns to mush, so a simplified Gingi takes over. He’s the favicon on this site.
Site palette
Warm on purpose. Scarlet is fill, ginger is line and hover. One gold marker shows up exactly once, on the homepage, and nowhere else, so it isn’t shown here either.
- Ground #262220 · --ground The page itself.
- Scarlet #E0392B · --scarlet Fill. Signage bars, the accent button.
- Ginger #DE8A42 · --ginger Line and hover.
- On scarlet #2A0E0A · --on-scarlet Text on scarlet. Never white.
- Heading #F0EBE1 · --heading Titles.
- Body #B8B2A6 · --body Prose.
- Muted #A7A094 · --muted Meta, dates, captions.
- Hairline #4B4741 · --hairline Rules and borders.
Type
- Archivo Structure: signage, labels, titles. 900 for the nameplate and signage only.
- Newsreader Prose, and the footer’s italic line.
- בס״ד Heebo, for the Hebrew at the top of every page.
- Shrikhand, outlined to paths, for Gingi’s “Micky” only.
Every tile on this page downloads its SVG. The source lives in
mickyaflalo-logos/gingi.