Inversion by background
On surfaces whose background we control, the mark renders in ink on light and in light on dark. Form and proportion never change.
Where it never inverts
Browser tabs, home screens and app stores use the ink version only. The background there belongs to the user; inverting would let the mark disappear on some of them.
Applications
Where the mark actually appears. The form must hold on light and dark backgrounds alike.
favicon.ico · icon.svgLight tab
Dark tab
Light desktop
Dark desktop
apple-touch-icon.png · manifestLight wallpaper
Dark wallpaper
Construction
Constructed on a 64 grid. The two stroke axes and their weights define the form.
Red dashed lines are the axes; dots are the end points.
| Item | Value |
|---|---|
| Grid | 64 × 64 |
| Corner radius | 14 (21.9%) |
| Left stroke | (35,15) → (16,49) · w4 |
| Right stroke | (26.68,23.74) → (48,49) · w11.5 |
| Weight ratio | 1 : 2.88 |
The right stroke begins inside the left one. Its squared end tucks under the thin stroke, leaving no visible joint.
Clear space
Maintain clear space of at least the corner radius (x = 21.9% of the mark width) on all sides. No element may enter this area.
The dashed box is the minimum.
| Use | Size |
|---|---|
| Favicon | 16 · 32 · 48 |
| App icon (iOS) | 180 |
| PWA | 192 · 512 |
| Minimum | 16 (never below) |
Color
Greyscale only. The green belongs to the Toilet Log app and is never used for the brand mark.
#14181F · rgb(20,24,31)#FFFFFF · rgb(255,255,255)#E8EDF2 · rgb(232,237,242)Prohibited
Downloads
SVG stays sharp at any size. Use it for print and large displays.
