brand
all the marks at every size, on every background. the receipts.
atmospheric / hero variant
raster master with full crt scanlines + heavy depth extrusion + phosphor glow. the cinematic version: for hero surfaces, og cards, social banners. the scaling-friendly vector mark below is for everywhere else.
animated mark
continuous expand-contract loop: 3 → 7 buttons, slow-meditative 4s cycle. each layer staggers in 150ms behind the one in front. pure css, zero js.
primary mark — sizes
from favicon to hero. each baseline-aligned so you can read the silhouette at every scale.
16px24px32px48px64px96px128px192px256px384px512pxhorizontal lockup — sizes
mark + wordmark. heights you'd actually use in a navbar / footer / hero.
24px tall32px tall48px tall64px tall96px tall128px tallfavicon (icon.svg) — actual browser sizes
this is what shows in the browser tab. 16 and 32 are the ones that matter.
16px24px32px48px64px128pxapple-icon — 180×180
ios pinned shortcut + 'add to home screen'. served at /apple-icon.
against different backgrounds
known caveat: the power-glyph black pixels are drawn on top, not real cutouts. they only blend on dark bg. spot the failure mode below.
slate-deep #090a0cslate #111316slate-card #1e2126cream #e6e4dewhite #ffffffgreen #68da7clockup against different backgrounds
same test for the wordmark lockup.
slate-deep #090a0cslate #111316slate-card #1e2126cream #e6e4dewhite #ffffffgreen #68da7c