Le plus souvent
Beurre
La tuile du plein, le produit conseillé.
Les composants
Tout ce que base.css sait faire, en vrai HTML, dans l'ordre où on s'en sert. Chaque section dit à quoi sert le composant et montre ses variantes. Rien ici n'est une capture : tout se presse, se tape, s'ouvre, et le total se refait. La recherche à suggestions est montrée en statique ; sa version complète vit sur l'écran de recherche.
Le wordmark
Le mot iClope tracé en vecteur, le point du i en cobalt. En encre sur blanc partout, en blanc sur les surfaces encre. Jamais étiré, jamais recoloré autrement.
Encre sur blanc, l'usage courant : en-tête, pied, documents.
Blanc sur encre : bandeau, tuiles encre, écran de confirmation.
La palette
Six couleurs à rôle fixe, trois surfaces pâles dérivées. Le cobalt est la seule couleur qui fait quelque chose ; le beurre et la mandarine ne portent jamais de texte.
- Blanc#FFFFFFLe fond. Pas de crème, pas de papier.
- Encre#161B3DTexte, bordures des objets pressables, pied.
- Cobalt#2946E6L'action : boutons, liens, onglet actif, dock.
- Beurre#FFD84ALa mise en avant chaleureuse. Jamais du texte.
- Mandarine#FF6A2BCompteurs, pastille du panier. En texte : #C94A12.
- Menthe#DDF6EADisponible, réussi, « C'est dans la poche. » Texte : #0B6B47.
- Ciel#EAF0FFSurface : cartes, fonds de visuel, sections.
- Sable#FFF6D6Surface : conseils, étiquettes, attention.
- Pêche#FFE9DESurface : rupture, mandarine pâle.
L'échelle typographique
Une seule famille, Bricolage Grotesque, sept crans et pas un de plus. Les tailles changent entre mobile et desktop, les graisses non.
Affiche, 40 px en mobile, 64 px en desktop, graisse 800
Bonjour Marianne.
H1, 30 px en mobile, 42 px en desktop, graisse 800
Classic FR-M
H2, 24 px en mobile, 28 px en desktop, graisse 700
Les rayons
H3, 20 px partout, graisse 700
Cartouches XO Havana
Corps, 18 px partout, graisse 400, interligne 1,5
Vos habituels, avec les quantités du 12 août. Corrigez d'un doigt, on refait le total.
Petit, 16 px en mobile, 15 px en desktop, graisse 500
Alfaliquid, 10 ml, 6 mg/ml. Commandé avant 14 h, expédié aujourd'hui.
Prix, 24 px, et prix grand, 32 px en mobile, 36 px en desktop, graisse 800, chiffres tabulaires
5,90 €44,30 €
Le gabarit
Deux pièces qui structurent presque tous les écrans : le fil d'Ariane, en petit et gris sous la barre haute, et la tête de section, un titre à gauche et le lien « Tout voir » à droite, sur la même ligne de base.
Le fil d'Ariane, sur une fiche
La tête de section, avec son lien
Les rayons
Tout voirLes boutons
Une pilule, 52 px de haut, et une seule hiérarchie sur tout le site : cobalt pour l'action principale de l'écran, une seule par écran ; contour encre pour la secondaire ; texte cobalt pour la tertiaire. Les pilules encre et beurre n'existent que sur un fond cobalt ou beurre, là où le cobalt ne se verrait pas.
La hiérarchie : principale, secondaire, tertiaire
Le bouton doux, ciel sur cobalt, reste pour un geste utilitaire posé à côté d'un contenu (copier une référence, modifier une adresse), jamais pour l'action de l'écran.
Sur un fond cobalt, la pilule est beurre ; sur un fond beurre, elle est encre. Nulle part ailleurs.
Les tailles : petit, normal, grand, puis large sur toute la ligne
Avec une icône, avant ou après le mot
Désactivé : la même pilule, éteinte. On dit pourquoi à côté.
Choisissez un mode de livraison d'abord.
Le bouton rond, le bouton texte, le bouton icône. Le Retirer est vrai : il retire sa ligne, et Annuler dans le toast la remet.
Les champs
Un libellé au-dessus, jamais dedans. 56 px de haut, bordure grise qui passe au cobalt au focus, au rouge en erreur. Le message d'erreur dit quoi faire, pas seulement que c'est faux.
Le champ de recherche et ses suggestions, ici en statique : le panneau reste ouvert et se filtre à mesure qu'on tape. Sur les vrais écrans il n'apparaît qu'au focus, au-dessus du dock en mobile, sous la barre haute en desktop.
Rien sous ce nom. Essayez un mot de moins, ou la marque seule.
Les tuiles
Les grandes surfaces colorées de l'accueil et du plein. Le packshot fond blanc se fond dans la couleur par multiplication ; sur encre et cobalt il garde son fond, arrondi.
Ciel
L'habituel, la carte, la section calme.
Pêche
Une rupture, un produit à surveiller.
Menthe
La confirmation, le colis parti.
C'est parti.
Première fois ici ?
Sable
Le conseil, les trois questions. Le bouton reste cobalt : le sable n'est pas le beurre.
Encre
Le contraste fort, la fin d'écran.
Cobalt, la tuile du plein
41,40 €
TTC, livraison offerte dès 49 €
Large
Toute la ligne en mobile, deux colonnes en desktop. Le guide mis en avant, la sélection de la semaine.
La tuile de rayon : un picto du sprite en cobalt, un nom, un chevron. Jamais un packshot en guise d'icône. Trois par ligne en desktop. Les six pictos de rayon : flacon, kit, cartouche, pipe, bécher, marques.
Les cartes produit
Deux par ligne en mobile, quatre en desktop. Le visuel sur ciel, la marque, le nom sur deux lignes au plus, le prix et un bouton rond. Le badge se pose en haut à gauche du visuel.
Geek Vape
Kit Aegis Solo 3, 3000 mAh
4,8 sur 5, 96 avis
Geek Vape
Kit Sonder Q2, 1350 mAh
VDLV
Fruits rouges, sels, 10 ml
Date de durabilité minimale dépassée (06/2026)
Prix antérieur 6,90 € (prix le plus bas des 30 derniers jours)
3,90 €
Oxva
Kit pod Nexlim, 1500 mAh
Retour prévu la semaine prochaine
32,90 €
Le rail : les mêmes cartes, qui défilent au doigt quand il y en a plus que la largeur. Trois par écran en mobile, l'aimant les cale une par une.
Pulp
Cerise glacée, 10 ml
5,90 €
Pulp
Pomme chicha, 10 ml
5,90 €
Pulp
Anis sauvage, 10 ml
5,90 €
VDLV
Mangue framboise, sels, 10 ml
6,90 €
VDLV
Booster 20 mg/ml, 10 ml
La ligne produit au panier : un compteur, Retirer, et le total qui suit chaque geste. Retirez les deux lignes pour voir l'état vide ; Annuler dans le toast les remet.
Le total
- 5 articles
- 31,50 €
- Livraison
- 2,90 €
- Total TTC
- 34,40 €
Produit contenant de la nicotine, substance hautement addictive. Réservé aux adultes.
La ligne produit dans une liste : un prix et un bouton rond.
14,90 €
Le compteur
Plus et moins, le chiffre en mandarine qui saute à chaque geste. À la borne, le bouton s'éteint. Les lots règlent d'un coup le compteur qu'ils visent.
Normal, 44 px
À zéro : moins désactivé
Grand, 56 px, sur la fiche, avec les lots. C'est le compteur principal de l'écran : il porte le prix unitaire et l'unité, et pilote la maquette du dock de fiche plus bas (quantité, prix, libellé du bouton).
Les puces, les badges, les étoiles
La puce est un filtre ou un raccourci : bordure encre, elle se remplit quand elle est active. Le badge est une information, jamais un bouton. Les étoiles sont mandarine, pleines ou vides.
Puces : normale, active, à supprimer
En rail, quand il y en a plus que la largeur : elles défilent au doigt sur une seule ligne
Les six badges
En stock
Plus en stock
Nouveau
DLUO dépassée
Le plus choisi
Le plus souvent
Les options
Toute décision se prend sur de grosses cartes, jamais dans un menu déroulant. Un titre, une aide d'une ligne, ce qui compte à droite. La carte choisie passe en ciel avec un liseré cobalt.
Un groupe de trois, avec un badge. Vous avez choisi : Lettre suivie.
En ligne, pour des choix courts. Taux choisi : 6 mg/ml. Les repères restent des observations, jamais une règle.
Produit contenant de la nicotine, substance hautement addictive. Réservé aux adultes.
Les pastilles de couleur, pour le matériel. Couleur : Gris foncé.
Les blocs
Les surfaces qui portent une information ou un groupe : un aplat pâle, ou un contour encre quand il faut trancher sur du blanc. Puis le conseil, la liste clé, la réassurance, l'accordéon, le tableau, les onglets et les étapes.
Bloc ciel
La livraison, l'adresse, l'avis client. Le bloc le plus courant.
Bloc sable
L'étiquette avant d'acheter, la note qui demande de l'attention.
Bloc menthe
La commande passée, le colis parti, l'adresse enregistrée.
Bloc pêche
Le produit en rupture, l'équivalent proposé.
Bloc encre
La fin d'écran, le rappel fort. Les liens passent en beurre.
Bloc contour
Le choix en cours sur la fiche, le bloc « Le total » au panier.
Le conseil, signé
Si vous fumiez des blondes, c'est le liquide par lequel on fait commencer tout le monde : rond, sans surprise, en 70/30.
L'équipe iClope
La liste clé, avec une ligne de total
- Contenance
- 10 ml
- Ratio PG / VG
- 70 / 30
- Fabrication
- France, Gaiatrend
- Total TTC
- 44,30 €
Les étapes du tunnel : faites en cobalt, en cours en beurre
AdresseLivraisonPaiementConfirmation
L'accordéon, pour les questions fréquentes
Combien de temps dure un flacon ?
Entre trois et six jours pour la plupart de nos clients en pod, selon la résistance et l'usage.
Pourquoi 10 ml seulement ?
La réglementation européenne limite les flacons nicotinés à 10 ml. Pour les grands formats, il existe la version sans nicotine, à booster soi-même.
Les onglets, sur la fiche
Un classic blond, ni sucré ni boisé, pensé pour une inhalation indirecte, celle qui ressemble au geste de la cigarette.
10 ml, 70 / 30, taux 0 à 18 mg/ml, fabriqué à Strasbourg par Gaiatrend, avec des arômes.
4,7 sur 5, 312 avis.
Avis collectés par la Société des Avis Garantis après achat vérifié. Tous sont publiés, positifs ou négatifs ; seuls les contenus illicites ou hors sujet sont retirés. Date d'achat et de publication affichées.
La réassurance, deux par ligne en mobile, quatre en desktop
Expédié sous 24 h ouvrées, depuis Aubervilliers
Carte, PayPal, Alma en 3 fois, virement, chèque
Un conseil au 01 87 66 15 47, du lundi au samedi
4,7 sur 5, sur 10 996 avis vérifiés
Le tableau, qui défile dans son cadre si la ligne est trop large. Le nombre de flacons dépend de la part de base dans le mélange, entre 60 et 85 % selon l'arôme et les boosters.
| Base PG / VG Vaponaute | Prix TTC | Le litre | Pour combien de flacons de 10 ml |
|---|---|---|---|
| 250 ml | 8,90 € | 35,60 € | Environ 30 à 40, selon la part de base |
| 500 ml | 14,90 € | 29,80 € | Environ 60 à 80 |
| 1 l | 24,90 € | 24,90 € | Environ 120 à 160 |
Les alertes
Quatre tons, une icône, une phrase qui dit ce qui se passe et ce qu'on peut faire. L'erreur est la seule à porter du rouge.
Le paiement n'a pas abouti et votre carte n'a pas été débitée. Réessayez, ou choisissez un autre moyen.
Commandé avant 14 h, votre colis part aujourd'hui d'Aubervilliers.
Adresse enregistrée. On vous la proposera à la prochaine commande.
Vous avez changé de taux sur une ligne. Vérifiez le panier avant de payer.
Les états
Ce que l'écran montre quand il n'y a rien, quand ça charge, quand le produit est en rupture ou n'existe plus. Chaque état propose la suite. Sur les autres écrans, ces démonstrations vivent repliées en fin de page, dans un accordéon « Ce que vous voyez quand la page attend ou ne trouve rien » ; ici, sur la planche, elles sont à plat.
Vide
Chargement : quatre squelettes de carte, deux par deux en mobile, et l'indicateur en ligne
On cherche dans les rayons…
Rupture : la carte grise, le badge pêche, le bouton qui prévient au lieu d'ajouter
Aspire
Résistances Nautilus X, lot de 5
On vous prévient dès le retour
12,90 €
Produit retiré
Ce produit n'est plus vendu. Voici l'équivalent.
Le Wenax M pen n'est plus fabriqué. Le Sonder Q2 prend les mêmes cartouches Q et se tient de la même façon.
Geek Vape, cartouches Q 3 ml
La feuille au pouce
Toute décision monte du bas de l'écran, avec une poignée, un titre, une aide d'une ligne, des cartes de 56 px et le bouton de validation sous le pouce. En desktop elle se centre. Échap, le voile ou la croix la ferment. Quand la feuille choisit une déclinaison nicotinée (taux, saveur), elle porte la ligne nicotine avant le bouton.
La feuille d'âge et le bandeau cookies
Deux objets injectés sur tous les écrans par le builder, qui ne se ressemblent pas exprès : l'un bloque, l'autre non.
La feuille d'âge
Une feuille au pouce, sans poignée ni croix : elle ne se ferme que par une réponse. Deux boutons de même taille, « J'ai moins de 18 ans » en contour et « J'ai 18 ans ou plus » en cobalt. La réponse reste sur l'appareil trente jours, puis la question revient. Ni Échap ni le voile ne la ferment, et le focus reste dedans.
Le bandeau cookies
Un bandeau posé au-dessus du dock en mobile, en bas à droite en desktop. Il ne bloque rien : la page se lit et se parcourt derrière. Accepter et Refuser ont la même taille et la même couleur, en contour. Il ne s'enchaîne jamais à la feuille d'âge. Le choix se change depuis le pied de page.
Le toast
Deux secondes, en menthe, juste au-dessus du dock, avec un lien vers le panier. La pastille du panier rebondit une fois. C'est le seul endroit où l'interface se permet une phrase. Un bouton d'ajout peut demander un toast sans lien, ou enchaîner sur un autre écran une fois l'article ajouté.
Chaque bouton ajoute vraiment un article à la pastille. Le troisième ouvre le panier juste après.
Le dock
La barre de poche change de mission selon l'écran. Ci-dessous, six maquettes posées dans la page, et la forme qu'elle prend en desktop : une pilule flottante centrée en bas, large comme son contenu. Le vrai dock, celui de la recherche, est en bas de cet écran en mobile, et son champ se replie quand on descend, revient quand on remonte ; en desktop la recherche remonte dans la barre haute. Les maquettes sont vraies : celle de la fiche suit le compteur principal de la planche, celles du panier et du plein refont le total.
Accueil, rayon, marque, guide : la recherche au-dessus des quatre onglets
Fiche : la déclinaison choisie, la quantité et le prix qui suivent le compteur principal, Ajouter. À partir de deux, le bouton dit combien.
1 flacon, 5,90 € TTC, en stock
Tunnel : l'étape en cours, puis le paiement nommé
Étape 4 sur 4Paiement
Payer 27,60 €
Le plein : le total qui se recalcule à chaque plus ou moins, Tout mettre au panier
Classic FR-M, 5,90 € l'unité
3 articles3 articles, port compris20,60 €
Tout mettre au panier
Panier : le total port compris, Commander. Si le panier se vide, le bouton devient Refaire le plein.
Résistances GTi, pack de 5, 14,90 €
En desktop : la même mission, dans une pilule flottante centrée en bas, bordure encre, largeur au contenu. C'est le seul objet de la piste qui porte une ombre, parce qu'il flotte. Elle n'apparaît qu'une fois le bloc d'action de la colonne (le bouton Ajouter ou Commander de la colonne fixe) passé au-dessus de l'écran ; tant qu'il est visible, la pilule reste repliée.
6 mg/ml1 flacon, 5,90 € TTC, en stock
Ajouter
Le bandeau nicotine
Deux fois par écran, injectés par le builder : un bandeau blanc à filet sous la barre haute, et un bandeau encre, corps 16, sans icône d'alerte, juste au-dessus du pied de page. Les deux sont déjà sur cet écran. Ils se complètent d'une ligne, en petit et gris, partout où l'on choisit une déclinaison nicotinée ou l'on récapitule un total.
La ligne nicotine, dans une feuille de taux ou de saveur et dans le bloc « Le total »
Produit contenant de la nicotine, substance hautement addictive. Réservé aux adultes.
L'en-tête et le pied
Ceux de cette page sont les vrais : le wordmark, la recherche et les rayons en haut en desktop, le compte et le panier avec sa pastille ; en bas, le téléphone, les rayons, les conseils, l'aide et les mentions.
L'avatar du compte : l'initiale sur beurre, sur l'écran compte et dans la barre haute une fois connecté.