Félix Boittinclivio.frEN
Étude de cas Clivio, partie 5 sur 5

Design et motion

L’app est calme et claire, parce qu’on s’en sert tous les jours. La marque est plus sombre, plus chaude. Les films sont entre les deux, et il y en a dix-huit.

Dix-huit films

Une bande-annonce d’une minute, un film de marque et seize films produit, tous en français et en anglais. Choisissez un film, puis passez d’une scène à l’autre.

Montrés sans le son. Chaque film a sa musique originale.

Bande-annonce, 66 s. Vos documents, enfin compris.
Le chaos à partir de 0,0 s

Des documents partout, des mots coupés sur le rythme.

À l’écran : « Invoices. Receipts. Contracts. Reminders. Everywhere. »

Comment ils sont faits

Sans logiciel de montage.

Chaque film est écrit en JavaScript, et chaque image est calculée à partir du temps. Les écrans de l’app sont refaits en CSS d’après la vraie interface : ce que vous voyez, c’est le vrai produit. La musique aussi, c’est du code. Les versions française et anglaise sont le même film, avec un seul fichier de texte qui change.

Les vidéos de ces pages sont rendues à partir de ce même code, image par image, en 1280 × 720 et sans musique. Ce sont les versions anglaises.

Le logo

Une page, avec une étincelle dessus.

  1. La tuileUn carré de 512 unités aux coins arrondis de 116, avec un dégradé en quatre couleurs qui va de l’indigo profond au corail, à 135°.
  2. La pageUn contour blanc avec un coin corné, de 14 unités d’épaisseur. Elle représente n’importe quel document.
  3. L’étincelleUne étoile à quatre branches, en dégradé cyan au centre, et une plus petite dans le coin en bas. C’est l’IA qui lit.

Couleur

La marque est sombre et chaude. L’app reste claire et ne met de la couleur que quand ça veut dire quelque chose : payé, bientôt dû, bientôt expiré. Depuis octobre, elle partage un même bleu avec le site, et garde le violet pour l’IA.

Fond
#100E3F

Violet, pour l’IA
#6B5CA8

Rose
#C992C2

Corail
#F68A88

Étincelle
#7FD8F2

Bleu, site et app
#2155E8

Texte de l’app
#242422

Barre latérale
#F7F7F5

PayéeÉchéance dans 12 joursExpire dans 14 joursRappel le 1er déc.ArchivéLes pastilles de statut dans l’app : une couleur, un sens.

Typographie

Quatre polices, chacune pour un usage, et deux de plus pour le site.

Bricolage Grotesque
Les titres, dans les films

Vos factures se rangent toutes seules.

Figtree
Le texte, dans les films

Transférez un e-mail, déposez un fichier ou scannez un ticket. Clivio le lit, le nomme et le range à sa place.

Inter
L’interface de l’app
DocumentsÀ classerAssistantRappelsRecherche ⌘K
JetBrains Mono
Les chiffres et les adresses

1 240,00 € · F-2026-118 · studio-clair@inbox.clivio.app

Schibsted Grotesk, IBM Plex Mono
Le site, clivio.fr

Clivio, le classeur qui se range tout seul

Chaque facture payée à temps.