Brand
The building blocks of the Swipeglass identity: our mark, color, and type. Keep it consistent and it stays recognizable.
Logo
The logo is the name typed, and still being typed: "swipeglass" all lowercase in Google Sans Flex 500, with an underscore after it blinking the way a terminal cursor does. There is no drawn symbol and no lettering intervention. The meaning is carried by the punctuation rather than by a letterform.
The typing belongs to the homepage. Everywhere else, including here, the wordmark is simply already there with its cursor blinking. The header is chrome on these pages and typing it out on every visit is a performance nobody asked for twice.
On the homepage it types itself once, then settles. The prompt waits first: an empty cursor, blinking twice, because that is what a terminal looks like before you touch it. Then the letters arrive one at a time, 190ms apart, with the caret riding along behind them. When the last one lands the caret stops and starts blinking again, and the finished word holds there for two seconds before it moves up into the header. The downloadable SVGs type too, which is why there is a still cut of each for print and for the social card.
It stops at the seam. There is a beat after "swipe" and before "glass", the way you would pause before the second word. That is the one thing the animation says which the still wordmark cannot: the name is a compound, and nothing else in the identity mentions it.
190ms a letter is an unhurried human pace, about 316 characters a minute. It first ran at 80ms, which is 750 a minute and faster than anyone types, so it read as a flicker rather than as typing.
The caret walks the font's own advances, never even steps. The letters are different widths, so a caret moving in equal jumps drifts off the text within three characters. Its ten stops are measured out of the same shaping that draws the letters, which is why they are generated rather than typed in by hand.
Nothing moves except opacity, so the wordmark never reflows. Every letter holds its final position from the first frame and only switches on; the box is full width throughout. A mark that changed width while it typed, and again twice a second after, would shove the layout around it.
Every switch is hard, never a fade. A fade reads as a pulse, which is decoration; the hard switch is what a terminal does. The caret also holds solid while the word is typing and only blinks once it stops, because that is what a real cursor does. Anyone whose system asks for reduced motion gets the finished wordmark at once, with the cursor lit and still: a cursor sitting there is the resting state, and an absent one reads as a missing glyph.
The downloadable file and the live header are one object. tools/cursor.py outlines the same woff2 the header sets as live text, at the same weight and the same tracking, and it fails if a page disagrees with the art on either. The animation lives inside the SVG, so the file blinks wherever it is used, including as a plain image.
The canvas always includes the cursor, lit or not. Sizing the box to the visible ink would make the mark change width twice a second, which is the one thing a blinking cursor must never do to the layout around it. A still cut ships for print, for the social card and for anywhere motion is wrong, and it is what the PNG export rasterises.
The icon is a truncation of the wordmark, not a thing invented beside it: the name's first letter and the cursor that follows it, knocked out of a Forest tile. The tile keeps the 21.875% corner every mark this project has had, so the silhouette is continuous even though everything inside it changed.
Tracking is zero and that is deliberate. The old wordmark tracked at −0.028em, a number measured against Inter at 900. It means nothing on this face, and carrying it across would be the exact mistake of quoting a number past the proportion it was measured against.
Three grounds, and no new colour for the third. Forest #3D674C on light and Forest Light #7FB894 on dark, because Forest itself is only 2.89:1 on Soot and cannot be read there. On Forest neither of those works either: Forest on Forest is invisible and Forest Light on Forest is 2.83:1. That cut is cream #EEEAE3 at 5.40:1, which is the knockout the icon already uses on this exact ground and the same paper the homepage is set on, so the third wordmark costs no fourth colour. Nothing is stroked and nothing is rotated.
mark-mono.svg is the one-ink cut, and it is not a reduction of the colour version, it is the drawing: the tile is already the ink and the letters are already the paper. Two values, two regions, no tints, so nothing has to be approximated for print. The letters are a knockout rather than a painted white, so the file works reversed and inherits whatever ink you set.
Give the mark clear space equal to at least a quarter of its width on every side. The wordmark survives small better than anything this identity has carried before, for a dull reason: the underscore is a horizontal bar, so it is the last thing to break.
Color
The palette above is the core one, and it is what this page and /privacy use. The homepage also has a light mode, built on a warm neutral rather than a tint of Void and Mist: a separate set, not the same colours lightened.
Typography
Usage
- Keep the mark on Void or another dark surface.
- Use "Swipeglass" as one word, single capital S.
- Preserve clear space around the mark.
Do
- Recolor the mark.
- Write "SwipeGlass" or "Swipe Glass".
- Stretch, rotate, or add effects to the logo.