The wall calendar redesign also brought a new logo: a small calendar page with a marker X across it. When the lime palette returned, the calendar mark stayed for a few hours, and the first question on seeing the app was simple: why is there an X in the top left?
It is a good question. An X in a corner means “close” to almost everyone. Inside the app the X is our “done” mark, but a logo is read before anyone has learned the app’s vocabulary.
The original mark
PaceStreak’s mark was a lime lightning bolt, and it is back everywhere: the app’s sidebar, the website header and footer, the favicons, the install icons and the images drawn for social cards.
It is one path:
<path d="M39 5 8 39h19L25 59 56 25H37L39 5Z" />
Six points. On the product’s dark ground it is drawn on its own in lime. As a favicon it is knocked out of a lime tile rather than drawn on top of one, because a layered or stroked mark turns to mush at 16 pixels while a silhouette survives.
Why the calendar mark lost
The calendar page had four separate parts: a page, a header strip, two binding rings and the X. At the size of a browser tab those parts merge into a grey smudge with a coloured stripe. It also said the same thing as the week board sitting right beside it, so it added nothing.
The bolt says something the rest of the interface does not: pace, energy, momentum. And it is the mark people who have seen PaceStreak before already know.
One source of truth
The social images are drawn by a Python script, so it now draws the bolt from the same six points as the SVG. If the mark ever changes again, it changes in the SVG and in that one list of coordinates, and nowhere else.
AlzyWelzy
Building PaceStreak. GitHub
Related
DesignDrawing a marker X in two strokes of SVG
The signature interaction of the redesign is a hand-drawn X that draws itself when you tick a day. It's two SVG paths, one CSS keyframe and a pathLength trick, with no JavaScript animation at all.
2 min
DesignThree moments to ask for an install, and only three
PaceStreak held back the browser's install prompt and then hardly ever offered its own. Now it asks on the first visit, on a later day and after the first session, once each, and Settings still works any time.
2 min
DesignKeyboard first, and thumb first
A command palette, G-then-a-letter shortcuts, swipe and long-press on habits, pull to refresh, and why each one is a shortcut on top of a button rather than the only way in.
2 min