capture produit
L
LEST
En prod iOS · Android getlest.com ↗
Design system
Sombre, typographique, dégradé en accent chirurgical. Tout ce qui compose le site, sur une page.
Un design system, c'est la grammaire visuelle d'un produit : couleurs, typographie, composants, motifs et animations, documentés au même endroit pour rester cohérents partout. Nous publions le nôtre parce qu'il montre notre façon de travailler - du design fait main, systématique et réutilisable, la même exigence que nous appliquons aux produits de nos clients.
Base monochrome sombre. Le dégradé signature n'apparaît qu'en accent : CTA, soulignements, un élément par section maximum.
Fond & surfaces
Dégradé signature
Ombré services (rose → violet)
#FF4D8F
#E24BB0
#B24DCF
#8F53E0
#7C3AED
Accents produits
Hanken Grotesk partout, graisses 400 à 800, tracking serré sur les titres. Monospace système pour les index, tags et détails techniques.
Typographie française : espace insécable avant « : ; ! ? », jamais de tiret cadratin - toujours « - » ou « : ».
Une seule colonne de contenu, beaucoup d'air, des filets pour rythmer.
Conteneur
max-width : 1200px
Gouttières : clamp(20px, 5vw, 48px)
Sections : clamp(72px, 10vh, 120px) vertical
Header : 64px sticky + blur
Grilles de cartes
repeat(auto-fit, minmax(280px, 1fr))
gap : 20px
Deux colonnes éditoriales : flex-wrap + bases 300-420px
Rayons
8-10
11-13
14-20
999 · pills
Boutons 8-10 · tuiles 11-13 · cartes 14-20 · chips en pill
Le décor reste géométrique et discret : grille blueprint, halos, arcs. Jamais d'illustration figurative.
La grammaire : lignes pleines à pointe de flèche, impulsion qui voyage et se relaie étape par étape (idlRelay), nœud clé lumineux (idlGlowBox), cartes qui s'allument à l'arrivée du point (idlNode). Une topologie par domaine, jamais deux fois la même.
Canevas fixe 720px (défilement horizontal sur mobile) · nœuds #0D0C12 · lignes rgba(accent, .4) · impulsion en dégradé avec halo.
Mobile-first, deux points de rupture seulement. Tout le reste est fluide : clamp() pour la typographie et les espacements, grilles auto-fit pour les cartes.
max-width: 900px
Navigation
La barre de liens passe en menu burger <details>, panneau plein largeur sous l'en-tête.
max-width: 760px
Anneaux de hero
460 px → 300 px, opacité 0.55 → 0.38, décalage réduit pour ne jamais croiser le titre.
fluide
Tout le reste
clamp() sur les titres et les paddings, grilles auto-fit, aucun autre media query.
Règles mobiles
Tous les éléments d'interface du site, à l'état réel.
Logo
Cercle dégradé + point central · « IO » toujours en dégradé · 20px header, 18px footer
Boutons
Un seul bouton primaire par vue · hover : -2px + ombre teintée
Chips & tags
Tuiles d'icônes (services)
Glyphes géométriques uniquement (divs) · fond teinté 10-16 % + bordure 28-40 %
Liste à puces diamant
Carte produit
Capture en tête · accent produit sur mark, lien et hover · base sombre commune
Carte article (lab)
Bandeau : grille + glyphe + index géant à 7 % · hover : bordure teintée + levée 4px
Panneau CTA (bordure dégradée)
Un projet ?
hello@idlabs.io →Bordure 1px en dégradé (padding-trick) · fond #0D0C12 · fin d'article et de page
Un seul jeu de champs pour tout le site : contact, inscription et devis. Fond de champ plus sombre que la carte (#0B0B0F sur #101016), focus rose, jamais de contour bleu par défaut.
Champ texte
Radius 10 · padding 13/15 · 15px · placeholder à 28 % · focus : bordure rose 60 % + anneau 3px à 12 %.
Liste déroulante
Chevron dessiné en deux dégradés CSS (jamais de data-URI dans un attribut style) · padding-right 42px.
Zone de texte
rows 4-5 · resize:vertical uniquement · pleine largeur (grid-column 1/-1).
Case à cocher
17px · accent-color:#E24BB0 · consentement toujours requis, jamais pré-coché en production.
Actions
Un seul bouton primaire par formulaire, suivi d'une mention de délai en gris.
Pré-remplissage
Affiché quand on arrive depuis une carte tarif ou une session : format et date déjà sélectionnés.
Confirmation
Demande envoyée
Réponse sous 24 h ouvrées.
Le formulaire est remplacé, pas doublé d'un bandeau. Bouton secondaire pour renvoyer une demande.
Erreur
L'envoi a échoué. Réessayez, ou écrivez à hello@idlabs.io.
Message en haut du formulaire, rose clair #FF6A8F. Jamais de rouge pur, jamais d'alerte modale.
Règles
Discrètes et fonctionnelles. Reveal au scroll (600ms, translateY 14px), hover -2 à -4px, et quatre boucles nommées.
idlPulse · 2.6s
Statuts « en prod », points vivants
idlBlink · 1.1s
Caret des chips terminal
idlFloat · 7s
Flottement des panneaux décoratifs
idlSpin / idlSpinR · 8-14s
Arcs orbitaux, sens inverses imbriqués
idlFlow / idlFlowY · 1.1s
Flux en pointillés des schémas
idlTravel / idlRelay2-3
Impulsions relayées étape par étape
idlNode · 7-8s
S'allume à l'arrivée de l'impulsion (relais)
Respecter prefers-reduced-motion : le reveal au scroll se désactive automatiquement.
Le ton : sobre, direct, confiant. La preuve par les produits, jamais de superlatifs creux.
Oui
Non