Dither Mark
The site logo mark: a dithered A across scale, variants, and interaction states.
The mark starts with my first initial, A. A solid blocky A felt too literal, and the braille cell that often powers pixel marks renders A as a single dot, too sparse to carry a logo on its own.
So the letter is drawn a different way: a 12×12 bitmap shaded with Bayer ordered dithering. Brightness falls from apex to feet, every cell snaps to one of three pixel sizes, and the letterform stays solid at the top while dissolving into texture as it lands.
Because the dither is pure math, the mark can do more than sit still: it shimmers on hover, materialises cell by cell, and de-resolves into dots when it needs to get out of the way.
Scale
Variants
Interaction States
Scale
Lift
Inline
Entrance
Accent
Loading
Navigation Switcher
As a compact sidebar control, hover previews the rail’s next state: the mark de-resolves to dots before a collapse and sharpens to full pixels before an expand.
Collapse Hover
Expand Hover