01
Retro pixel wordmark: primary mark
ui/Logo/LogoRetro
Two color variants. Dark (white & yellow) for dark surfaces. Light (charcoal & yellow) for light surfaces and yellow brand tiles.
The yellow pixels stay on both. Never recolor: pick a variant, don't tint.
The yellow pixels stay on both. Never recolor: pick a variant, don't tint.
Optically pre-centred (2026-07). The wordmark's ink is top-heavy, only the
Flex-centre them as-is. Never add a translateY nudge. Ink height = 6/7 × box height: for 26px ink set
p descender fills the bottom, so all three files carry built-in top padding that puts the optical centre on the geometric centre.Flex-centre them as-is. Never add a translateY nudge. Ink height = 6/7 × box height: for 26px ink set
height: 30.33px. This was a breaking aspect change, retro went 376:96 to 376:112.
logo-retro-dark
on
--app-bg · --bg-secondary
logo-retro-light
on
white / light surfaces
02
Don't
Don't use the dark variant on light. The white pixels disappear.
Don't use the dark variant on yellow. Use the light variant, its charcoal pixels read clearly.
Don't use the light variant on dark. The charcoal pixels disappear; use the dark variant.
03
Kaomoji: brand voice glyphs
mono · text-only · never illustration
The kaomoji catalogue is the brand's voice in empty states, pairing flows, and footer flair. Always rendered in
Pick by context, never freestyle a new one outside this list without a reason. Tone ladder: cheeky → instructive → quiet → error.
var(--font-mono).Pick by context, never freestyle a new one outside this list without a reason. Tone ladder: cheeky → instructive → quiet → error.
ᕦ(ò_óˇ)ᕤ
footer · "we got this"
ヽ(°〇°)ﾉ
empty files · cheeky
( ⌐■_■)
transfers · idle
¯\_(ツ)_/¯
search · no results
__o-o__
RSS · classic
┌( ಠ_ಠ)┘
device pairing · instructive
ᶻ 𝗓 𐰁
notifications · quiet
(x_x)
error · failed