Blink
The logo's only animation: nav, launcher, footer, closing call to action.
eyes 2 cells → 1 cell for 120ms · every 4–7s at random · 1 in 4 is a double blinkCut from one cell.
Everything here is built on an 8px module and the mark's own 5×5 grid. Motion moves whole cells, never smooth gradients.
The mark
An identicon that smiles: a mirrored 5×5 grid with half a cell of padding. Black and white only; mint backs it only where it marks the next person to answer.
Construction
6 × 6 units. Eyes two cells tall, a three-cell smile with corners.
Sizes
24px · cell 4px48px · cell 8px72px · cell 12px96px · cell 16px
Only multiples of 6, so every cell lands on whole pixels.
Colourways
White on black, black on white. Mint for the launcher and faces in the product.
Faces
smileflatsleep
Site art around the product. The logo itself always smiles.
Motion
Each animation has one job. All of them stop under reduced motion and show their final state.
Idle blink
What the mark does on its own, wherever it appears.
LiveMark · off under reduced motionWink
The launcher acknowledges a pointer over it.
right eye 1 cell while hovered · no transitionMoods
Faces around the product only: the queue, the FAQ, the continuity strip, the 404.
mouth cells switch one at a time, 70ms apart · flat · smile · sleepDither dissolve
Any change of view inside the product frame, and its first reveal.
8px cells in 4×4 Bayer order · cover 160ms, clear 200ms · 8 stepsCell fill
Every bar on the site: cells switch one by one between the old and the new value.
40 cells · 12ms apart · on or off, never scaled- ACME-1036
- ACME-1039
- ACME-1041
Step selection
The inbox's selected row, moved with j and k.
one highlight · 160ms · steps(2)| Moment | Duration | Timing |
|---|---|---|
| State change | 150ms | steps(2) |
| Arrival on scroll | entry 0–35% | scroll-driven, linear |
| Blink | 120ms | instant on and off |
| Mouth cells | 70ms apart | instant on and off |
| Dither | 160ms + 200ms | 8 steps |
| Cell fill | 12ms apart | instant on and off |
| Panel open | 240ms | steps(4) |
| Row arrival | 320ms | steps(4) wipe |
Tokens
Green-black ground, paper type, one mint accent. Butter and coral only ever describe waiting time.
Ground
--bg · #0b0d0cTray
--s1 · #111413Core
--s2 · #171b19Control
--s3 · #202623Raised control
--s4 · #2a312dPaper
--fg · #eef3f0Body
--fg-2 · #a7b1abLabels
--fg-3 · #8b948fMint: who to look at next
--mint · #9ad9b8Butter: waiting
--wait · #f1d27aCoral: urgent, late
--late · #f0907fDisplay · Doto 900 · capsInside your app
Heading · Doto 800 · capsFour routes, one schema
Body · Rethink Sans 400Conversations live in a helpdesk schema inside the Postgres you already run.
Mono · Martian MonoACME-1042 · waiting 4m
notch 3notch 4notch 5notch 6notch 8
Components
Each in its states: default, hover, focus, pressed, disabled, invalid.