SMAmmarProduct Designer
Lab

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

Favicon16px
Header28px
Card48px
Display96px

Variants

Default
Accent
Soft
Outline

Interaction States

Scale

Lift

Syed Mohammad Ammar

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