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 compte se refait. Seule la recherche à suggestions vit ailleurs, 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 fait le compte.
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. Cobalt pour l'action principale de l'écran, une seule par écran ; contour pour la secondaire ; encre et beurre sur les tuiles colorées ; doux pour les gestes discrets.
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.
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.
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 packshot, un nom, un chevron. Trois par ligne en desktop.
E-liquides
Kits et pods
E-pipes et e-cigaresLes 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
À consommer avant novembre 2026
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 compte qui suit chaque geste. Retirez les deux lignes pour voir l'état vide ; Annuler dans le toast les remet.
- 5 articles
- 31,50 €
- Livraison
- 2,90 €
- Total TTC
- 34,40 €
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
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 courte
Point de départ courant
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 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, le compte, 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 compte 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.
312 avis, 4,7 sur 5, recueillis par la Société des Avis Garantis après une commande réelle.
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. Les flacons sont comptés avec 60 à 90 % de base dans le mélange.
| Base PG / VG Vaponaute | Prix TTC | Le litre | Pour combien de flacons |
|---|---|---|---|
| 250 ml | 8,90 € | 35,60 € | Environ 30 flacons de 10 ml |
| 500 ml | 14,90 € | 29,80 € | Environ 60 |
| 1 l | 24,90 € | 24,90 € | Plus de 120 |
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 manque ou n'existe plus. Chaque état propose la suite.
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.
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.
Ça ajoute vraiment un article à la pastille.
Le dock
La barre de poche change de mission selon l'écran. Ci-dessous, cinq 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 ; en desktop la recherche remonte dans la barre haute et la pilule n'apparaît que sur les écrans qui portent une action. Le compteur de la maquette du plein est vrai : il refait le total.
Accueil, rayon, marque, guide : la recherche au-dessus des quatre onglets
Fiche : la déclinaison choisie, le prix, Ajouter
6 mg/ml5,90 € TTC, en stock
Ajouter
Panier : le total port compris, Commander
Port comprisTotal, port compris44,30 €
Commander
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
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.
6 mg/ml5,90 € TTC, en stock
Ajouter
Le bandeau nicotine
Il est déjà en pied de cet écran, comme de tous les autres : un bandeau encre, corps 16, sans icône d'alerte, juste au-dessus du pied de page.
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é.