A record. The mark was later redrawn to the proportions of the n in “notey”, solid under 220 px and layered above, with the name always first. See the brand book (brand.notey.wiki) and how it was redrawn.
A folder in a folder.
The shape of an n, and a layered folder holding the same layered folder: pages inside pages. Notey is about putting things in order, so the mark is the shape that holds them. It is two layers on two layers wherever it has room, and a folder holding a folder at the smallest sizes. The three-layer version was tried and dropped.
Playground
Change the layers, the curve and the spacing, and see the mark everywhere at once. When something feels right, copy it as SVG.
Files
The finished set, generated from one drawing. The layers now use fixed greys from the Layers palette instead of transparency, and their tips are softly rounded. Everything lives in public/brand/layers and is used across the app, the website and emails.
notey-mark.svgWebsite header, sign-in, light screens
notey-mark-dark.svgApp rail and dark screens
notey-mark-mono.svgMasks, stamps, single-colour print
notey-folder.svg24 px and below
notey-logo.svgWebsite header, legal pages, shared pages
notey-logo-dark.svgDark headers
notey-wordmark.svgWhere the mark is already shown
notey-app-icon.svgInstall prompt, website
notey-icon-180.pngiPhone and iPad home screens
notey-icon-maskable-512.pngAndroid home screens
notey-icon-32.pngBrowser tabs (favicon.ico holds 16, 32, 48)
notey-favicon.svgModern browsers
notey-logo-email.pngThe header of every Notey emailHow it’s used
One mark, two sizes. The grey layers come and go with the room the mark has; the folder in a folder never changes.
| Size | Version | Where |
|---|---|---|
| 32 px and up | Two layers on two | App rail, opening screen, website, sign-in, app icon, emails, next to “notey” |
| 24 px and below | A folder in a folder | Favicon, browser tab, small avatars |
The mark · chosen from the folder exploration and the first mark exploration · built on Definition 0.2