Brand book · 01
Logo
The Dwellir shield and wordmark: sizes, clear space, approved grounds, the favicon, and SVG and PNG downloads.
The shield and the wordmark
Two files make the logo. The site header, the footer and the registry's brand item use them. Use these files only.
Wordmark
The shield and the name: the primary logo. 190 × 40 units.
One file serves both themes. On a dark ground the green rim carries the shape; on a light ground the dark fill does. There is no separate inverse logo.
Sizes and the floor
Below its floor a mark loses its detail. Use the shield where the wordmark would fall below 20 px tall.
Wordmark: 20 px tall, 95 px wide
The letters are 0.42 of the logo's height. At 20 px they are 8.4 px tall, the smallest size at which the spaced capitals stay readable at 1× density. At 16 px they are 6.7 px and blur together.
- 64 px
- 48 px
- 40 px
- 34 pxHeader, desktop
- 30 pxHeader, phones
- 24 px
- 20 pxFloor
Shield: 16 px tall
The chain link is 0.40 of the shield's height. It reads as a link from 20 px; at 16 px the shield's outline still holds, as in the favicon. Below 16 px the rim merges with the fill.
- 64 px
- 48 px
- 32 px
- 24 px
- 20 px
- 16 pxFloor
Clear space
Keep x clear on every side, where x is the wordmark's letter height: 0.42 of the logo's height. No text, edge or other mark enters it.
Every lockup on a ground in the downloads carries its clear space as its margin. The transparent files are cut to the mark, so leave the clear space round them.
Approved grounds
The logo sits on the site's own grounds, or on the quiet sky above the aurora. The tiles below are the download files.
On the aurora, place the logo on the dark sky, clear of the bright rays. Never place it on the green, on a mid-tone grey, or on a photo.
Don't
Use the files as they are. Each of these breaks the mark.
- Don't
Stretch or squash it
- Don't
Rotate it
- Don't
Add a shadow or a glow
- Don't
Recolour it
- Don't
Place it on a pattern
- Don't
Place it on the green
Favicon and app icon
The favicon is the shield alone. It fills the square's height on a transparent ground, so the browser's tab colour shows round it.
favicon.ico
Three frames, 48, 32 and 16 px, in public/favicon.ico. Every page links it from its head:
App icon
For home screens, app stores and integrations: the shield at 62.5% of the tile's height, centred on the dark sky, so a round or rounded mask never cuts it.
Downloads
Every lockup as SVG for print and design tools, and as PNG for slides and documents. The transparent PNGs are at 4× (wordmark) and 8× (shield).
| Mark | Ground | SVG | PNG |
|---|---|---|---|
| Wordmark | Transparent | SVG190 × 40 · 7 KB | PNG760 × 160 · 10 KB |
| Wordmark | Light ground | SVG894 × 294 · 7 KB | PNG894 × 294 · 11 KB |
| Wordmark | Alt sheet, light | SVG894 × 294 · 7 KB | PNG894 × 294 · 11 KB |
| Wordmark | Dark ground | SVG894 × 294 · 7 KB | PNG894 × 294 · 11 KB |
| Wordmark | Alt sheet, dark | SVG894 × 294 · 7 KB | PNG894 × 294 · 11 KB |
| Wordmark | On the aurora | SVG894 × 294 · 40 KB | PNG894 × 294 · 248 KB |
| Shield | Transparent | SVG30 × 40 · 4 KB | PNG240 × 320 · 10 KB |
| Shield | Light ground | SVG509 × 589 · 4 KB | PNG509 × 589 · 13 KB |
| Shield | Alt sheet, light | SVG509 × 589 · 4 KB | PNG509 × 589 · 13 KB |
| Shield | Dark ground | SVG509 × 589 · 4 KB | PNG509 × 589 · 12 KB |
| Shield | Alt sheet, dark | SVG509 × 589 · 4 KB | PNG509 × 589 · 12 KB |
| Shield | On the aurora | SVG509 × 589 · 39 KB | PNG509 × 589 · 216 KB |
Start free.1 response = 1 credit.
100,000 responses a day at 20 per second, on 150+ networks. Upgrade when you need more.