Brand mark and lockup

Updated 23 Oct 2026

The product mark is four L-corners and a thin chevron. The lockup is that mark plus the word ZuloOne in Inter Bold. Favicons, launcher icons, and the office ribbon draw the mark. Marketing, Play feature art, and login wordmarks draw the lockup.

Cursor opens a live copy of that file beside the chat; after a live edit, copy it back into the repo and keep the markdown in the same change.

This page is the file map and the traps.

Colours#

Token	Hex	Where
Forest (word `Zulo` on white)	`#16372C`	Lockup on snow; chrome in the office
Mark forest (corners + chevron)	`#1B422B`	The five filled paths
Lime	`#90C24B`	Top-right corner; the word `One` on every ground
Mark mid-green	`#5B944F`	Bottom-right corner only
Snow	`#FFFFFF`	The word `Zulo` on black; page canvas

One is always lime. Zulo is #16372C on white and #FFFFFF on black — never grey, never gleam.

Geometry#

The mark lives in a 100×100 viewBox. Paths:

TL  M0,0 H45 V10 H10 V45 H0 Z          #1B422B
BL  M0,100 H45 V90 H10 V55 H0 Z        #1B422B
TR  M100,0 H55 V10 H90 V45 H100 Z      #90C24B
BR  M100,100 H55 V90 H90 V55 H100 Z    #5B944F
CH  M39,22 L67,50 L39,78 L32,71 L53,50 L32,29 Z   #1B422B

The lockup is viewBox 0 0 520 120: the same paths translated by (10,10), then Inter Bold 700, 72px, tracking −2.2px, at (132, 90).

Files#

Canonical SVG lives in the office repo. Copies in other repos are identical bytes of the mark; do not restyle them there.

Raster favicons, apple-touch, mipmaps and iOS AppIcon are generated from mark.svg. Do not draw them by hand.

node zuloone.mobile/tool/rasterize-brand.mjs

The script expects @resvg/resvg-js (install in a temp folder, then run). It writes .ico / .png into the office, login, control plane, learn, getzulo.com, and mobile trees. After a path or colour change, run it in the same change.

A tenant logoDataUrl still replaces ZuloMark in the office ribbon and login. The favicon stays the product mark.

Trap#

Do not build ZuloOne from the same bars as the corners. The wordmark is Inter Bold, not a stencil.

Do not rasterize logo.svg on a dark OS and ship it as the light lockup. The file contains prefers-color-scheme: dark, which turns Zulo white. rasterize-brand.mjs strips that query before drawing the Play feature graphic. logo-on-dark.svg is the forced-white file.

Do not let the paths sit on the viewBox edge. Chrome’s 16px tab icon and the 28px ribbon SVG clip the bottom stroke. Favicons wrap the 100-space mark in translate(8 8) scale(0.84). The lockup (logo.svg) already insets by 10.

Do not reuse the favicon inset on the phone icon. An 8% pad still puts the L-corners outside a circle (inscribed square is 70.7%). Samsung’s installer and launcher mask the full asset to a circle. A 0.72/18 adaptive foreground fills the 72 dp safe square, and the circle eats the corners. Phone rasters (mipmaps, iOS AppIcon, Play 512) use translate(19 19) scale(0.62) on the canonical paths. The adaptive vector is scale(0.46) / translate(31) on 108 dp so the same geometry sits inside the circle of the 72 dp viewport.

Changing mark.svg without copying it leaves login, the control plane, Learn, and getzulo.com on the old icon. Copy the bytes, then run the rasterizer.

Play Console still needs a manual upload of the 512 icon and the 1024×500 feature graphic.

Where next#

Platform architecture — the product the mark stands on

Was this page helpful?