Brand guidelines · 31 October 2026
BrainwriteThe mark, the word, the colour, the type and the icon, and how to use them.
01 · Logo
The cloud with eyes, and the word
The primary logo is the horizontal lockup. Use the stacked version where the space is square or tall, and the mark alone where the name is already said (the app icon, the favicon, an avatar).
02 · Construction
Built from circles
Every curve of the cloud is an arc of one of seven circles, and every inner corner is rounded by a small circle, all of one size. It can be rebuilt exactly in any design tool, and the mascot uses the same outline.
- Seven circles(114, 126) r 60 · (86, 92) r 34 · (142, 84) r 46 · (60, 136) r 35 · (169, 134) r 37 · (92, 160) r 30 · (138, 160) r 30
- Rounded joinsEvery inner corner: a circle of radius 10, touching both puffs (7 joins)
- EyesUpright capsules 24 × 50, centres 54 apart at height 122; always white (or cut out)
- Small cut (24 px and below)Capsules 32 × 56, centres 60 apart
- Proportions181 × 152, about 1.19 : 1
Clear space and minimum size
Sizes, and the small cut
At 24 px and below the mark switches to its small cut: thicker eyes a little further apart, so they still read.
03 · Usage
Backgrounds
Orange on white, paper or dark; white on orange; one colour (ink or white) where colour can't be used, with the eyes cut out. On photographs, the white version on a calm area.
Don't
04 · Colour
Brainwrite orange, ink and paper
Orange carries the mark and the moments that matter; ink carries the words; paper and white give room. Orange is a graphic colour: for orange text on light backgrounds use Orange deep. White on orange reaches only 3 : 1, so keep it to large text, the mark and icons.
The mark, key moments#EC7221 · RGB 236 114 33
Hover, pressed#BD550E · RGB 189 85 14
Orange text on light#A94C0D · RGB 169 76 13
Words, the wordmark#17191C · RGB 23 25 28
Backgrounds#F6F6F3 · RGB 246 246 243
Eyes, surfaces#FFFFFF · RGB 255 255 255
Contrast
| Sample | Foreground on background | Ratio | Use for |
|---|---|---|---|
| Brainwrite | Ink on White | 17.61 : 1 | Any text |
| Brainwrite | Ink on Paper | 16.27 : 1 | Any text |
| Brainwrite | Orange deep on White | 5.64 : 1 | Any text |
| Brainwrite | Ink on Orange | 5.87 : 1 | Any text |
| Brainwrite | Orange on Ink | 5.87 : 1 | Any text |
| Brainwrite | White on Orange | 3.00 : 1 | Large text, the mark, icons |
| Brainwrite | Orange on White | 3.00 : 1 | Large text, the mark, icons |
05 · Typography
Lexend for the brand, Inter for reading
The wordmark is Lexend Medium (500) at normal spacing: open, wide letters with a calm, intelligent feel. Headings use Lexend; running text and the interface use Inter.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
LightRegularMediumSemibold
06 · App icon
White cloud on Brainwrite orange
The tile carries a soft light from above; the cloud is flat, lifted by a faint shadow, about 62% of the tile wide. The same artwork serves macOS, iOS, Android and the web.
| Platform | Artwork | Sizes |
|---|---|---|
| macOS | Tile 824 in a 1024 canvas, with its shadow | 16 to 1024 (.icns) |
| iOS | 1024 square, no corners (the system rounds it) | 1024 |
| Android | Adaptive: cloud foreground in the 66 dp safe zone, orange background, white monochrome layer | 108 dp (432 px) |
| Play Store | The Android artwork, square | 512 |
| Web | favicon.svg and favicon.ico (the tile, small cut), Apple touch icon, PWA icons | 16 · 32 · 48 · 180 · 192 · 512 |
07 · Mascot
The mark, at rest
The cloud is also Brainwrite's mascot. At rest, facing you, it is the logo. The moving mascot, which looks round and shows what it is doing, is still being finished, so it isn't shown here.
Voice
Clear and unhurried. It says what it is doing and what it needs, without exclamation marks.
Plain words, precise numbers, no jargon. It knows the work and shows it.
Friendly, never cute. The cloud brings the warmth; the words stay grown-up.
08 · Files
Artwork
The mark and the app icon, made from the same construction as this page. Lockups with the word as outlines are not in the kit yet: set the word in Lexend Medium beside the mark, as on this page.
