# 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.

Published 2026-09-17

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.

*How the symbol is built, and the logo on its three surfaces: light, dark, Fire.*

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.

> **The ember’s lap is not decoration**
>
> It’s reserved for app loading — the splash screen, reading your session, opening a project. AI generation keeps its blue indicators: if the logo spun while a model was writing, you’d no longer know what you were waiting for.

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.

---

Source: https://joli.studio/en/journal/our-new-brand-the-mosaic/