From 1e526abe38f988672d675ebb51570c78a6171823 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= Date: Fri, 9 Oct 2026 15:35:04 +0200 Subject: [PATCH] feat: an avatar variant of the app icon for profiles The app icon leaves the symbol at half its height, too small where a profile picture is shown at 20 to 40 pixels. The avatar keeps only the brand's clear space around it. --- DESIGN.md | 2 +- brand/avatar-1024.png | Bin 0 -> 5169 bytes brand/avatar.svg | 4 ++++ 3 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 brand/avatar-1024.png create mode 100644 brand/avatar.svg diff --git a/DESIGN.md b/DESIGN.md index 5b2e681..213e8c5 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -58,7 +58,7 @@ Self-hosted from Google Fonts at build time (Astro's font API, which also genera - **Minimum size:** lockup 16px tall; symbol 12px. Favicons use the pixel cuts (32px: bar 5, foot 3; 16px: bar 3, foot 2, tail 2). - **Color:** `--text` on `--bg`. The lockup is never ochre; the symbol alone may be ochre when it closes something (see below). - **Don't:** stretch, outline, add effects, set the wordmark in a font, or build the mark as a landmark in a scene. -- **Files:** `brand/` holds the lockup and the symbol in `currentColor`, on Bone and on Basalt, and the app icon as SVG and as a 1024px PNG. The site's favicons are in `public/`. +- **Files:** `brand/` holds the lockup and the symbol in `currentColor`, on Bone and on Basalt, the app icon as SVG and as a 1024px PNG, and the avatar the same way: the app icon with only the clear space around the symbol, so it stays above the symbol's minimum size where an avatar is shown at 20–40px (GitHub, npm, social profiles). The site's favicons are in `public/`. ## The ⅃ as a device diff --git a/brand/avatar-1024.png b/brand/avatar-1024.png new file mode 100644 index 0000000000000000000000000000000000000000..0c536e66097b2a6f252435e4f2acbc480adc4901 GIT binary patch literal 5169 zcmeAS@N?(olHy`uVBq!ia0y~yU;#2&7&w@K)Q9>#R~Q(Ce|Wk$hE&{oduL-;a;VJl zkDu+ot4XFAJvK02y5{!!4eR(59+#Pk*>xmsevqWdW!BW%x^!wQ$E}FYR(%DIZ@c-X z?b@{4)1&D9&f{L(((au(YCmh_9v)Y;ynjcfu&iz(14F~#3BEwaRU&8ouL3? zFaj|L5IX=dsuJ8XAU`O8)FUft0104~K{Xbp!~vw91UD&w)FWF+gysg29+-thXm$Xp zr=goj34V~Xu}2Jk4=I5BKtedt+D-Uf+W>MchLXYNCK8ea*h3@)zXK=$K;~lv0$Ap} zUp5oNy7e6yv*u)ZZ9J}hWs1_(C~rv_PN3|D)7$^AdoB0ZuD`=}{-SGEQd^H-&Rl!- zAjl|d4fi$IUe7kq-}CWT_Um=GpR=vl>UZohJHP(^Kfh*w%viz*Od|*Qx;n0A{XNwC z{C@58w?A{Heg5}v)momzU!MHfoxlJ8pYHW)k2iu{W__C>_WIv%uNU7;nwQ+qynyd@ z>GvNegX3G7fOhS^&yah2i|^+1{tQVS+j3_ev;WN){^%&sQ`r54J2Y|2V9yC8hI0cj zm`QOHFpNnm4jMq}2br4`NOY3`gW7QL1Or0@$m1j=KnIX|5)z;SNIeOWJ=n@LP>vdG zZXzN08$iJiieBs`1MY~&ErUHYNOcnlNx}i>{01N1oQiCSV3uj3W3bVw@4 zpFu}#^UtJ*0ZbeW35&P?@7OnGdj9^3s;Vfj`6dj}LJWeRkA6D$Hu|rDM=(gM5kuJO ztADHW@6~>tdfY#4ZGOxK*(@)?l~XoFtz`kFb+eqEF=x|0|E#&k!LUsy;O;+07KRV| zV>W-9zlM?F`gHT6pIu)wy2*)A?E!JG;V4ZhYEGkli2r>@BT z_GH4_j!RRNf;3aNMny9_Ffh#Cop#k~rq8|qA0GSL{arJ~?&p@NZ!fr<5kGCMe|J~? z`?XJtURr_!Q;Z?^oc*64!7sb5#iB(REcL}UOKm;7^V+KdP<$2hPPlaOVWNxIRf(KH zh9w^E?d^W5pg72vU{l_Z>m@nIr=k9I|4#-6prtfT``AlX+$A?|83m9_Q9>A$Wl1g5 zLFNhjFP&-G6U)7d-k8- za@xShzi+;^<+`m_q74iT3F-O&C!hTB{B-=i-wzg-UUxkb=Wi%yUr}Kx*Kf-3q5sjF zKZm#&VorbG(6R3IymQZf*Zls!n$d0Xw+bs!P~;{YmtK%rv`X`BF%!7a|Cfhh2Uk2J z(*vvc+U&Q#lh_+pe>Pvhz@WeY1Q;QL+jqES96%;vlz_C33k(YtK+eGLp~2=R{I13D zPy>SjP{)w>1TdON&3L3nHpu}?nwuPe$}v;C0!S3A&A4S6Kzgu-26mYTlE0Xj^b1NC S+1P`^gu&C*&t;ucLK6Tbs`>r^ literal 0 HcmV?d00001 diff --git a/brand/avatar.svg b/brand/avatar.svg new file mode 100644 index 0000000..6d24342 --- /dev/null +++ b/brand/avatar.svg @@ -0,0 +1,4 @@ + + + +