01 · Marques mères
Deux logos, jamais retouchés.
Liito Media est le studio, Liito Suite regroupe les applications. Les logos du Brandkit s'affichent tels quels. Les icônes en héritent : les « ii » et les rayures, rien d'autre.
Liito Media
Le studio : deux « i » aux points ronds bleus, rayures en bas à droite.
Liito Suite
Les applications : mêmes « i » et mêmes rayures, avec un point carré et un point rond bleu.
02 · Couleurs
Cinq couleurs. Un accent.
Passe la souris sur une couleur, touche-la pour copier son code. Une seule exception à la palette : les icônes d'apps, qui ont chacune leur teinte.
03 · Typographie
Trois voix, trois rôles.
Lettering et titres
Bricolage Grotesque. Dans les logos et les icônes, le texte est converti en tracés. Clique le texte pour l'essayer.
Accent éditorial
Instrument Serif, pour un mot ou une phrase qui doit respirer. Jamais en corps de texte.
Texte courant
Public Sans, 16 px minimum, 65 caractères de large au plus.
04 · Construction
Une grille, cinq constantes.
Logos et icônes partagent la même géométrie. C'est elle qu'on reconnaît avant même de lire le nom.
À faire
- Marine pour la structure, bleu pour un seul accent.
- Utiliser les fichiers du Brandkit tels quels.
- La version fond sombre sur fond foncé.
- Garder la marge de sécurité autour du logo.
À ne pas faire
- Étirer, pivoter, recolorer ou ajouter un effet à un logo.
- Changer l'écart ou l'angle des rayures.
- Écrire le nom autrement que « liito » + Nom, sans espace.
- Reprendre les anciennes valeurs #2F98E4 et #1B3354.
05 · Système d'icônes iiXx
Un « ii », deux lettres, trois rayures.
Chaque produit a une icône reconnaissable d'un coup d'œil. Bouge la souris sur l'icône pour la tourner, glisse le curseur pour la démonter couche par couche.
- 1La tuileTeintée pour une app, marine avec liseré épais pour un outil.
- 2Les rayuresTrois diagonales à 45°, comme dans le logo : bleu, teinte de l'app, blanc.
- 3Les « ii »Point carré et point rond, repris de Liito Suite. Identiques sur toutes les icônes.
- 4Le sigleDeux lettres (trois pour PDF et SEO), en contours, Bricolage 800.
06 · Atelier
Crée ta propre icône.
Écris un sigle, choisis la teinte : l'atelier dessine l'icône et applique les règles du système en direct. Ici le sigle utilise la police pour la démo ; en production, il est converti en tracés.
07 · En situation
Sur un vrai écran d'accueil.
Seize icônes dans un écran de téléphone, avec le fond clair, sombre ou teinté d'iOS. À petite taille, ce sont le sigle et la couleur qui font le travail.
Le mode teinté d'iOS passe tout en une seule couleur : les sigles doivent rester lisibles sans la teinte. C'est ce que mesure le contrôle n° 8.
08 · Explorateur
Les 49 produits.
Les tailles optiques
À 48 px et plus, l'icône complète. De 32 à 47 px, lettres et rayures. Sous 32 px, les lettres seules ; à 16 px, la couleur et le liseré identifient.
Apps : une couleur chacune
Les douze apps prennent une teinte d'identité, comme une suite pro. Deux identités sont toujours à un écart de couleur d'au moins 10 (ΔE OKLab).
- Sur tuile sombre, le point bleu passe à #4aa0f5 pour garder le contraste.
- Cette exception ne concerne que les icônes d'apps.
Outils : une famille, un liseré
Les 37 outils sont groupés en cinq familles : IA, Média, Contenu, Affaires, Culture. La famille est dans le liseré et les rayures, jamais dans le fond.
- Un outil ne reprend jamais la couleur d'une app.
- Même tuile marine pour tous.
09 · Règles
Huit contrôles, zéro exception.
Chaque modification d'icône passe par ces contrôles automatiques. Aucun seuil n'est assoupli pour les faire passer.
Règles des sigles
- 2 ou 3 lettres : majuscule puis minuscule(s).
- Aucune initiale « I » (« iiI » se lit « iil »).
- Pas de « i » ni de « l » minuscule.
- liitoPDF s'écrit PDF, jamais « Pd ».
Pas encore validé
- Rendu macOS 27 non validé : le fichier .icon n'a pas été ouvert dans Icon Composer.
- Zones sûres Apple et essais Android sur appareil.
- Droit des marques au Canada.
- Cinq produits ajoutés à confirmer : liitoAI, liitoConvert, liitoDProd, liitoPass, liitoFileManager.
10 · Savoir-faire web
Tout ça est fait main.
Cette page n'utilise aucune bibliothèque d'animation : du HTML, du CSS et un peu de JavaScript. Voici les techniques, en miniature et jouables.
Bouton magnétique
Le bouton suit le curseur de quelques pixels.
Compteur animé
Un nombre qui monte quand il entre à l'écran.
Projecteur
Un halo qui suit la souris, avec fusion des couleurs.
Défilement infini
Boucle en CSS pur, en pause au survol.
Texte en vague
Chaque lettre décalée d'une fraction de seconde.
Inclinaison 3D
Les cartes de cette page s'inclinent avec un reflet.