Design & motion
The app is calm and light, because people use it every day. The brand is darker and warmer. The films sit somewhere in between, and there are eighteen of them.
Eighteen films
A one-minute trailer, a brand film and sixteen feature films, each in French and English. Pick a film, then jump to any scene.
Documents everywhere, words cut on the beat.
On screen: “Invoices. Receipts. Contracts. Reminders. Everywhere.”
How they’re made
No video editor involved.
Every film is written in JavaScript, and each frame is calculated from the time. The app screens are rebuilt in CSS from the real interface, so what you see is the actual product. The music is code too. The French and English versions are the same film, with one file of text swapped.
The videos on these pages were rendered from that same code, frame by frame, at 1280 × 720 and without the score.
The mark
A page, with a spark on it.
- The tile512 units square, 116-unit corners, a four-stop gradient running from deep indigo to coral at 135°.
- The pageA white outline with a folded corner, 14 units thick. It stands for any document.
- The sparkA four-point star with a cyan gradient in the middle, and a smaller one in the bottom corner. That’s the AI, reading.
Colour
The brand is dark and warm. The app stays light and only uses colour when it means something, like paid, due or expiring. Since October it shares one blue with the website, and keeps violet for the AI.
Ground#100E3F
Violet, for AI#6B5CA8
Rose#C992C2
Coral#F68A88
Spark#7FD8F2
Blue, site and app#2155E8
App text#242422
App sidebar#F7F7F5
Type
Four typefaces, each used for one thing, and two more for the website.
Display, in the films
Your invoices organise themselves.
Text, in the films
Forward an email, upload a file or scan a receipt. Clivio reads it, names it and puts it where it belongs.
The app interface
Figures and addresses
€1,240.00 · F-2026-118 · studio-clair@inbox.clivio.app
The website, clivio.fr
Clivio, the binder that files itself
Every invoice paid on time.