Behind the scenes
Our new brand: the Mosaic
The product is called joli.studio, and its symbol is a grid of four squares — one of which is an ember. Here is how it is built, and what it is allowed to do.
The original name and logo were placeholders, and we knew it; the symbol, drawn on a gradient square, fell apart at sixteen pixels. So we redid all of it: the name, the symbol, the colors.
A name that fits in a web address
The product is called joli.studio, like its domain. Always lowercase, no space, never translated: inside a sentence it’s plain text — “Open joli.studio”, “Exported by joli.studio on…”. When there’s no room, a browser tab or a narrow bar, the short mark takes over: “Calendar · joli”, “Calendrier · joli”.
The app lives at super.joli.studio; the site you’re reading sits on the apex domain.
Four squares, one ember
The symbol is a two-by-two grid. Three modules are graphite. The fourth one, top right, became an ember: a solid Fire circle, no gradient.
The whole geometry comes down to a single measure, the module m: a gutter of 0.1 m, a module radius of 0.3 m, an ember exactly m across, and an overall footprint of 2.1 m. That 2.1 m square is the reference box for margins, alignment and the clear space — one module free all around, where nothing else may go.
Between 16 and 31 pixels the drawing shifts a little: a 0.21 m gutter and a 0.26 m radius, so the modules stay visibly separate on screen. The component picks the right geometry from the size it’s given; below 16 pixels, we don’t show the symbol at all.
The name follows the same discipline: “joli” in Bricolage Grotesque 700, “.studio” in 500 and a step back, letter spacing at −2%. The SVG files carry the name as outlines, at optical size 32 — they depend on no installed font.
Three colors, and no blue
The logo has only three color roles, held by three design-system tokens: the ink of the modules and of “joli”, the ember, and the gray of “.studio”. On a light background the ink is Graphite 950 and the ember Fire 600; on dark, Graphite 50 and Fire 500; on a full brand field, the modules turn to ink and the ember to white.
Blue belongs to AI. The ember speaks for the brand.
It’s the strictest rule in the guidelines, and it comes straight from the Braise design system: Fire belongs to actions and to the brand, and the blue flame only shows up where AI is at work. A blue ember would blur both vocabularies at once.
What the ember is allowed to do
It’s allowed to travel. While the app loads, the ember goes around the modules clockwise: one step every 0.6 seconds, a full lap in 2.4 seconds, each move lasting about 170 milliseconds. The cells themselves never move. The lap is tied to the page clock, so a loader replacing another one picks up where it was instead of jumping backwards.
There’s also the entrance animation: modules cascade in 35 milliseconds apart, the ember pops, then the name slides in.
Everything else is off limits, and the list is short: moving the ember, swapping it with a module, stretching or rotating the symbol, adding a gradient, a shadow or any relief, putting the light version on a dark background, or rebuilding the name in another typeface or in caps.
