brandkit

Échelle d’affichage

Quatre paliers Geologica, exposés en utilitaires text-display-*. Les titres référencent l’échelle, ils ne réinventent pas de clamp.

• Aa
  text-display-xlcopierclamp(48px, 8vw, 96px)page hero H1 (6rem ceiling)
• Aa
  text-display-lcopierclamp(40px, 5vw, 64px)section opener / lead
• Aa
  text-display-mcopierclamp(30px, 4vw, 44px)standard section H2
• Aa
  text-display-scopierclamp(22px, 2.8vw, 28px)sub-section / card H3

Espacement

Quatre paliers nommés, jamais mélangés. Plus les largeurs de conteneur.

• tight8–12 px· within an element
• standard16–24 px· between rows of a block
• section40–56 px· between sub-sections
• chapter80–128 px· between H2-level sections

Conteneurs

• prose
  largeur maximale
  65 ch
• narrow
  largeur maximale
  720 px
• container
  largeur maximale
  1320 px
• wide
  largeur maximale
  1480 px
• full
  largeur maximale
  100 vw

Rayons

Bordures

Trois épaisseurs, deux teintes de filet. Le filet par défaut n’est jamais plus lourd qu’il ne doit.

Filets

Élévation

Cinq niveaux, tous teintés encre, jamais colorés, jamais de glow.

Traitements de surface

Profondeur Z

Échelle nommée, aucun nombre magique. On consomme z-[var(--z-modal)], jamais z-[100].

• z-raised
  cartes levées / élévation au survol
  10
• z-float
  chrome flottant sous le header (pilule d'index wiki)
  40
• z-sticky
  header sticky
  50
• z-progress
  barres de progression lecture / scroll
  60
• z-overlay
  backdrop modale / commandes / recherche
  100
• z-modal
  panneau modale / commandes / recherche
  101
• z-drawer
  tiroir panier
  110
• z-toast
  toasts, au-dessus de tout overlay
  120

Boutons

Registre skeuomorphe (production)

Matrice d’états

Tailles

Champs

Pilules à filet plat. Pas de relief : surface papier, filet 1 px, anneau accent au focus. Le libellé est en Roboto casse phrase, jamais en mono majuscules.

Le rejet de saisie utilise t-shake (voir le chapitre Mouvement).

SelectField — le select canonique

FormAlert — retour de formulaire

Badges & pastilles

Pastille code (registre métadonnée)

L’étiquette simplifiée

Statuts (la couleur qui signifie)

Le point accent — tone=accent (ponctuation, jamais surface)

Jeton de citation — surface encre

Tooltip — indice

Données & jauges

La ligne de données : numéral mono accent, symbole Geologica, nom Roboto muté, valeur mono encre, filet à remplissage proportionnel et point-repère.

Ligne de données

• 01CBDCannabidiol

  15,9 %
• 02Δ⁹-THCTétrahydrocannabinol

  0,28 %
• 03CBGCannabigerol

  1,2 %

Barre-jauge

Grille specimen — la fiche en six champs

Panneaux

rounded-soft, filet rule, surface papier, en-tête Geologica casse phrase (pas un eyebrow tracké). Plus les helpers Do/Don’t.

Plaque scindée — popup de bienvenue

Do / Don’t

Toast — retour non-modal

Archétype listing

Strawberry Payton's Usa

Profil aromatique terreux et épicé, porté par le myrcène, concentration en cannabidiol mesurée par HPLC.

Dès7,85 €/g

Me prévenir

Strawnana

Strawnana, fleur de chanvre au profil terreux et épicé, porté par le myrcène. Analyse HPLC lot par lot.

CBD11 %

Dès2,00 €/g

Me prévenir

Fruit Cake

Variété sélectionnée pour un profil terreux et épicé, porté par le myrcène, cultivée en intérieur sur substrat coco-perlite.

CBD7 %

Dès2,00 €/g

Me prévenir

Le vrai <ProductCard/>, trois références du catalogue : CTA panier révélé au survol/focus, statique en mobile.

Chaque valeur est choisie par USAGE sur l’échelle transitions.dev — jamais au nombre le plus proche. Interactions sous 300 ms, transform et opacity seulement, jamais transition: all, jamais ease-in sur de l’UI.

Courbes

Échelle de jetons

Le système en vie

Chaque animation du site, en démo vivante — les bascules sont la vraie primitive, les one-shots se rejouent au ↻. La source structurée est brandkit/motion-registry.ts. Trois bibliothèques MIT (torph · calligraph · number-flow) sont consommées derrière un wrapper de marque.

Surfaces

9

Ce qui s'ouvre, glisse et se replie. Origine ancrée au déclencheur, fermetures plus rapides que les ouvertures.

Options

Dropdown

CSS + état

Presse sur le déclencheur. Origin-aware : la surface grandit depuis son déclencheur, jamais du centre.

.t-dropdown + .is-open/.is-closing + data-origin

--dropdown-open-dur--dropdown-close-dur--ease-out

Utilisé sur Méga-menu header · Résultats de recherche

Ouvrir la modale

Modal

CSS + état

Ouverture / fermeture. Échelle 0,96 → 1 depuis le centre ; le backdrop ne fait que fondre.

.t-modal + .t-auth-overlay

--modal-open-dur--modal-close-dur--modal-scale

Utilisé sur Modale d'authentification · Popup de bienvenue

10 € offerts

Le code part par e-mail.

Plaque qui se pose

CSS

Ouverture de la modale, un temps APRÈS la carte. La seule échelle d'entrée AU-DESSUS de 1 : la plaque se pose avec du poids au lieu de claquer avec la carte.

.t-plate-settle (enfant d'un .t-modal)

--ease-out-quart520 ms (littéral recette)échelle 1,04 → 1

Utilisé sur Popup de bienvenue — plaque photo

Ouvrir le tiroir

Panneau / tiroir

CSS + état

Ouverture du tiroir. Axe X (divergence assumée du Y amont) ; ferme plus vite qu'il n'ouvre.

.t-panel-backdrop + .t-panel-drawer + .is-open

--panel-open-dur--panel-close-dur--ease-out

Utilisé sur Tiroir panier · Tiroir filtres (mobile)

Étape 1 / 2

Livraison

RetourContinuer

Étape d'assistant

CSS + état

Changement d'étape. Entrée seule (variante assumée) : les formulaires à hauteur variable ne supportent pas la sortie jumelée.

.t-page-enter + --t-page-dir (remount key={step})

--page-slide-dur--page-slide-distance--page-blur

Utilisé sur Tunnel de commande

RésuméComplet

L'essentiel scannable.

Onglets glissants

CSS + état

Sélection d'un segment. La pastille tween transform + width entre segments mesurés ; flèches + Home/End au clavier.

<SegmentedControl/> (.t-tabs + .t-tabs-pill)

--tabs-dur--tabs-ease

Utilisé sur Fiche wiki - Résumé / Complet

LégalStatut juridique en France

Survolez — ou Tab, puis Échap.

Tooltip

CSS + état

Survol (délai 300 ms) OU focus clavier (instantané). Scale-in 0,98 depuis le bord ancré ; a11y focus-within, Échap, aria-describedby ; délai d'intention 300 ms.

<Tooltip/> (.tooltip-anchor + .tooltip-bubble)

--duration-quick--scale-pre-small--ease-out

Utilisé sur Verdict légalité wiki

Livraison & retours

Expédition sous 24-72 h. Interpolate-size ouvre en douceur sur Chromium ; ailleurs, instantané.

Accordéon

CSS

Ouverture du <details> natif. Amélioration progressive (Chromium 129+) sur la sémantique native ; ailleurs, ouverture instantanée.

details.t-details (::details-content + interpolate-size)

--duration-fast--ease-out

Utilisé sur FAQ · Facettes du laboratoire

Agrandir

Card resize

CSS

Changement d'état de taille. LE tween largeur/hauteur sanctionné (exception assumée du transform-only, recette amont #01).

.t-resize + classe d'état du caller

--resize-dur--resize-ease

Installé, en attente de son premier consommateur.

Texte & chiffres

10

Trois registres de numéraux - célébration (pop), instrument (roll continu), promo (machine à sous) - et les swaps de libellés.

Ajouter au panierPermuter

Text swap

CSS + état

Le libellé change en place. Bloc entier : sortie vers le haut, entrée par le bas. Pour un morph partiel → MorphText.

.t-text-swap + .is-exit/.is-enter-start

--text-swap-dur--text-swap-translate-y--blur-swap-small

Utilisé sur États de bouton, compteurs

Publier mon avisMorpher

Morph de libellé

lib · MIT

Le libellé change - les glyphes communs GLISSENT. FLIP mot-à-mot (Intl.Segmenter) ; respectReducedMotion natif ; sans dépendance.

<MorphText/> (torph, MIT)

--duration-fast--ease-out (lus au runtime)

Utilisé sur Soumission d'avis (PDP) · Me prévenir (rupture)

7Ajouter

Digit pop (célébration)

CSS + état

Un ÉVÉNEMENT numérique (ajout panier). Le registre célébration : pop escaladé, ~100×/jour, jamais pour une quantité continue.

.t-digit-group + .t-digit[data-stagger]

--digit-dur--digit-stagger--ease-bounce-soft

Utilisé sur Badge compteur du panier

24,90 €

−× 1+

Price flow (instrument)

lib · MIT

Une quantité qui BOUGE (la direction porte du sens). Anneau de chiffres masqué + composite:accumulate : le spam de clics reste continu. fr-FR natif.

<PriceFlow/> · <PriceFlowLockup/> (number-flow, MIT)

--duration-medium--duration-quick (fade-cap)--ease-out

Utilisé sur Panier : lignes, sous-total, « Plus que X € », CTA · Prix PDP (variante/quantité) + barre d'achat mobile

-10 %Faire tourner

Promo slots (machine à sous)

lib · MIT

Révélation d'une offre (first-run) ou cycle promo. Odomètre à tendance (9→0 roule vers l'avant), chiffre de droite d'abord. Garde reduced-motion maison.

<PromoSlots/> (calligraph, MIT)

preset snappy (350 ms), stagger 20 ms

Utilisé sur Offre de bienvenue (10 € offerts)

P.Déplier

Texte fluide (logotype qui se déplie)

lib · MIT

Un libellé d'affichage dont la valeur ET la largeur changent sur place. Les caractères communs glissent, le reste entre/sort. Reduced-motion maison derrière une porte d'hydratation.

<FluidText/> (calligraph, MIT)

preset bouncy (spring 500 ms, bounce .3), stagger 20 ms

Utilisé sur Logotype du header (« P. » ⇄ « Phytogrammes. »)

Recherche des lots disponibles…

Shimmer

CSS

Attente inline (un bloc skeleton serait faux). Pure CSS ; reduced-motion lit un muté statique.

.t-shimmer

2 s linéaire, encre ↔ encre-muté

Utilisé sur Liste d'attente (envoi en cours)

Le chanvre,mesuré puisprouvé.

Texts reveal

CSS + état

Entrée first-run d'un hero. Montée + fondu ligne par ligne ; réservé aux surfaces vues une fois par visite.

.wiki-rise (+ délais par enfant)

560 ms (littéral recette)--ease-out--duration-stagger

Utilisé sur Hero Canna·wiki

Le végétal, mesuré ligne à ligne, prouvé.

Titre en lignes masquées

GSAP

Chargement (héros au-dessus du pli) ou entrée viewport (once). Montée ligne par ligne sous masque ; le SSR peint le titre nu. Le wordmark du footer monte de 112 % sous clip.

<MaskedLines/> (ui/masked-lines, SplitText mask lignes)

BRAND_EASE (miroir de --ease-out)0,8 s / stagger 80 ms (rythme useGsapReveal)

Utilisé sur Héros des pages secondaires (PageHero) · Titre d'article du journal · Masthead de l'index du journal · FAQ · Contact · Notre laboratoire · Masthead du brandkit · Wordmark géant du footer

5/5

Le certificat correspond au chiffre près.

Julien M.

Review-in (nor.ma)

CSS + état

La plaque entre au viewport, PUIS chaque permutation du trio. Fondu + flou 4 px + montée 16 px, rejoué au remount du trio. Rotation 7 s, suspendue au survol ; le PDP ne tourne pas.

.review-in + remount du trio (landing) · motion whileInView (PDP)

blur 4 px · y 16 px · 0,6 s (littéraux recette nor.ma)--ease-out (≡ leur --ease-norma)délais inline 0/100/200 ms (échelle recette)rotation 7 s — pause survol/focus, stop reduced-motion

Utilisé sur Avis du landing (§ 07) · Avis produit (PDP)

Retours

11

L'interface répond : confirmations, refus, attentes. Chaque canal visuel est doublé d'une sémantique (role, aria).

Icon swap

CSS + état

Deux icônes permutent dans un slot.

.t-icon-swap[data-state] + .t-icon[data-icon]

--icon-swap-dur--blur-swap-small

Utilisé sur Burger ↔ croix (header mobile)

Rejeter la saisie

Shake d'erreur

CSS + état

Saisie rejetée. Le message d'erreur vit dans <FormAlert/> (divergence assumée : pas de bordure/auto-revert amont).

.t-shake + .is-shaking

--shake-distance420 ms (littéral recette)

Utilisé sur Formulaires (auth, notify, avis)

Success check

CSS + état

Action confirmée. Retuné plus calme que l'amont : rotation -10° (vs 80°), bob 6 px (vs 40).

.t-success-check + data-state

--check-dur--check-draw-dur--check-bob

Utilisé sur Confirmations de formulaire

Notifier

Badge + point

CSS + état

Notification qui apparaît. Le pop du point roule sur le spring COMPILÉ (linear(), physique réelle, zéro JS).

.t-badge[data-open] + .t-badge-dot

--badge-slide-dur--badge-pop-dur--ease-spring-linear

Utilisé sur Compteur panier (header)

Déclencher un toast

Toast

CSS + état

Retour d'arrière-plan non-modal. Entrée : échelle 0,97 + cross-blur rejoignent la montée. Sortie : fondu calme.

useToast() (.toast-item)

--duration-fast--duration-quick--scale-pre-medium--blur-swap-small

Utilisé sur Échec d'enregistrement du panier

Fleur CBD Alpine

Indoor, 15,9 % CBD — lot 2026-04, COA disponible.

Charger

Skeleton → contenu

CSS + état

Les données arrivent. Cross-fade + cross-blur EN PLACE (grille superposée) : zéro décalage de mise en page.

.t-skel + .is-revealed (+ <Skeleton/>)

--duration-fast--blur-swap-small

Installé, en attente de son premier consommateur.

Publier mon avis

Spinner

CSS

Attente indéterminée dans un bouton. Reduced motion RALENTIT au lieu de figer : un loader porte du sens (guidance checklist).

.spinner-arc (arc sur piste 10 %, currentColor)

800 ms linéaire ; reduced-motion → 2400 ms

Installé, en attente de son premier consommateur.

Traitement…working · 1/6

Orbe d'attente (thinking-orbs)

lib · MIT

Une RÉGION fait un aller-retour indéterminé de plusieurs secondes. Six verbes point-par-point ; le libellé est obligatoire. Repos hors écran, DPR plafonné à 2.

<WaitOrb/> · <WaitOrbSection/> · <WaitOrbGlyph/> (thinking-orbs, MIT)

présets calibrés lib (canvas 2D, 20 / 64 px).orb-wait / .orb-wait-section (recette de paire)encre épinglée par surface (paper / ink)

Utilisé sur Tunnel - capture du paiement · Retour OAuth (plein écran) · Mon compte - commandes + adresses · Confirmation - récapitulatif

Fleurs CBD uniquement

Checkbox check

CSS

Cocher / décocher. La boîte se remplit d'encre, puis la coche se TRACE (pathLength=1) en 250 ms. Famille de jetons --cbx-*.

<Checkbox/> (.t-check, famille --cbx-*)

--cbx-box-dur--cbx-draw-dur--ease-out

Utilisé sur Facettes du laboratoire · Suppression de compte

Lettre Phytogrammes

Toggle

CSS

Bascule on / off. Double rebond du pouce : dépasse 1 px, revient, se pose. .is-init bloque le rejeu « off » au montage.

<Switch/> (.t-toggle + data-on + .is-init)

--toggle-dur--toggle-travel--ease-spring

Utilisé sur Préférences e-mail (mon compte) · Adresse par défaut (éditeur)

Like (cœur + particules)

CSS

Un booléen « aimé » passe à vrai. Remplissage accent + pop compressé-relâché + 8 particules ; décocher rembobine sans fête.

.t-like[data-liked] + .is-bursting (+ --px/--py par point)

--like-fill-dur--like-pop-dur--ease-spring

Installé, en attente de son premier consommateur.

Décoratif

7

Les garnitures - boucles ambiantes, survols, gloss. Budget délice : surfaces occasionnelles seulement.

Livraison 24-72 h · Analyses HPLC · < 0,30 % THC · Livraison 24-72 h · Analyses HPLC · < 0,30 % THC · Livraison 24-72 h · Analyses HPLC · < 0,30 % THC · Livraison 24-72 h · Analyses HPLC · < 0,30 % THC · Livraison 24-72 h · Analyses HPLC · < 0,30 % THC · Livraison 24-72 h · Analyses HPLC · < 0,30 % THC ·

Marquee

CSS

Boucle ambiante. Bords fondus (edge-fade) : les glyphes se dissolvent au lieu d'être coupés.

.animate-marquee (+ .edge-fade-x)

32 s linéaire (défaut recette)

Installé, en attente de son premier consommateur.

ALMBCJÉR

Avatar hover

CSS

Survol (pointeur fin uniquement). Levée -4 px ; le RETOUR seul est springé — le relâchement porte l'élan.

.t-avatar (dans .t-avatar-group)

--duration-fast (entrée)--ease-spring-linear (retour)

Installé, en attente de son premier consommateur.

5/5

« Le taux annoncé correspondait au certificat du lot, au chiffre près. »

Photo-swap d'avis (nor.ma)

CSS

Survol d'une carte d'avis (pointeur fin uniquement). Au survol, la citation recule (flou 2 px) et l'image du produit noté monte à sa place. Pointeur fin seul.

.review-swap + .review-quote/.review-photo (survol de .review-card)

--duration-fast--ease-out--ease-spring (l'échelle)

Utilisé sur Avis du landing (§ 07)

Survolez le gloss

Balayage de gloss

CSS

Survol d'un bouton skeuo.

.btn-skeuo::before (au survol)

650 ms--ease-out

Utilisé sur Tous les CTA skeuo

En savoir plus

Learn-more hover

CSS

Survol d'un lien fléché (pointeur fin). Le chevron glisse 2 px et OUVRE ses bras en flèche (±8° autour de l'apex).

.t-learn + .t-learn-chevron (<ChevronSpreadIcon/>)

--learn-dur--learn-shift--ease-out

Utilisé sur « Voir plus » des sections (landing) · Tuiles promo des collections · Avis clients - lien produit · CTA de la modale d'authentification · Journal - à la une + articles liés

floatdrift

Flottements ambiants

CSS

Boucles lentes, à la demande.

.animate-float-y · .animate-drift

6-22 s ease-in-out

Utilisé sur Découpes du hero · Plaque moléculaire wiki

scroll-piloté

Les scrubs GSAP (deck méthode, crossfades) vivent sur la landing — un cadre statique les trahirait.

Voir en contexte

Registres GSAP

GSAP

Scroll (landing uniquement). Partage moteur assumé : GSAP pour les sections landing scrollées, motion/react partout ailleurs.

@/lib/gsap (BRAND_EASE, useGsapReveal, scrubs)

BRAND_EASE (miroir de --ease-out)

Utilisé sur Deck méthode (scrub épinglé) · Crossfade des cartes produit · Bande de réassurance (drift + vélocité)

Rejetés

Le refus documenté fait partie de la référence — reprendre un motif rejeté demande de rouvrir sa décision au journal, pas de le glisser dans un coin.

• Card tilt 3D + glare curseurtransitions.dev #19Gimmick « carte physique » qui combat le registre éditorial plat ; pointeur seul, zéro mobile.
• Plus → menu morph (FAB)transitions.dev #20Exige un déclencheur FAB circulaire qui n'existe nulle part ; dropdown + tiroir couvrent déjà.
• Input clear dissolvetransitions.dev #13JS par frame + lueur en blend-mode pour un seul champ : trop bruyant pour papier/encre.
• AutoSize (calligraph) / morph de largeurcalligraph · torphAnime la largeur (hors GPU-only) ; les numéraux tabulaires rendent la compensation inutile.
• Drawer menu multi-niveauxannnimate starter-packLe header possède déjà méga-menu + panneau mobile (t-dropdown / t-panel) ; remplacer la chrome de navigation est un redesign, pas une amélioration de motion.
• Image fly-in (champ 3D continu)annnimate starter-packChamp d'images 3D sombre en vol perpétuel : personnalité « sport » opposée au papier botanique calme, et une boucle qui ne se repose jamais (budget perf).
• Dual scramble (double passe couleur)annnimate starter-packLe registre décodage ASCII existe déjà (<ScrambleText/>, badge NOUVEAU du hero) ; deux registres de scramble brisent la cohésion.
• Accordéon GSAP (hauteur + stagger de lignes)annnimate starter-pack0,8 s expo.inOut au-dessus du plafond UI et anime la hauteur ; .t-details (natif, interpolate-size) couvre déjà la FAQ.
• Tween GSAP pour la plaque photo de la popupRegistre GSAP maison (@/lib/gsap)La loi moteur réserve GSAP aux sections scrollées du landing. Une modale montée sur toutes les routes tirerait le moteur hors de son domaine pour un seul transform que deux règles CSS tiennent déjà — et le registre CSS se cale tout seul sur la machine à phases .t-modal.

Ambiance

Helpers décoratifs, en lecture à la demande (au repos sur une page de référence). La garde prefers-reduced-motion globale les neutralise toutes.

Skeleton — état de chargement

• animate-slide-up / animate-fade-in
  Entrées d’ambiance, ease-out
• animate-float-y / animate-drift
  Flottement atmosphérique (héros)
• [data-reveal][data-shown]
  Reveal piloté par IntersectionObserver

Retirés (anti-slop), ne pas réintroduire : hero-cloudscape, cloud-drift, liquid-glass-sweep.

Glyphes

Échelle

Artwork de marque

• Contraste
  Texte courant sur papier ≥ 4,5:1, accent en grand corps ≥ 3:1, petit corps accent via --brand-accent-strong (variante AA petit texte).
• Couleur
  Le statut ne s'appuie jamais sur la couleur seule : un badge porte aussi le texte, une alerte de formulaire ajoute une icône.
• Clavier & lecteurs d'écran
  Chaque contrôle interactif porte un focus visible, les fenêtres modales piègent et restituent le focus, les widgets composites suivent leur motif ARIA exact (combobox, onglets, groupe radio).
• Mouvement
  La préférence mouvement réduit est honorée par une garde globale et par primitive, tout défilement automatique s'arrête sous mouvement réduit.
• Cibles tactiles
  24 px minimum sur les contrôles personnalisés, 44 px sur le chrome mobile.
• Formulaires
  Libellé visible par défaut. L'exception sanctionnée : le champ unique (recherche, newsletter) associant aria-label et un texte explicatif adjacent. Une erreur est role=alert, texte et icône, jamais la couleur seule.

• Jetons de design (JSON)
  243 jetons vivants, générés depuis globals.css à chaque publication, jamais édités à la main.
  Télécharger
• Geologica
  Display et titres. Un seul poids sur ce site : 600 (SemiBold).
  Google Fonts
• Roboto
  Corps de texte et interface. Roboto Mono porte les numéraux tabulaires.
  Google Fonts

Le logotype « Phytogrammes. » se compose en direct (Futura PT Demi, .font-logo) - aucun fichier SVG séparé n’existe à ce jour.

• Hairline-rule + tracked-caps eyebrow kickerReads as AI slop above a heading. Use a sentence-case Geologica heading directly.
• Micro tracked-caps mono labelfont-mono + uppercase + tracking ≥ 0.1em + ≤ 12px + muted. Banned anywhere — field, card, status.
• transition: all / transition-allEnumerate exact properties (transform, opacity).
• Glow / coloured shadowAll elevation is ink-tinted, never coloured, never glow.
• Bordure + ombre sur une même surface flottanteDeux arêtes empilées : un trait net, puis l'ombre qui démarre juste à côté — la surface vire au lourd et au gris. Une surface élevée n'a qu'UNE arête, et le filet appartient à la dernière couche de l'ombre. Exclus : l'anneau de focus, qui garde outline + outline-offset.
• Gradient text, glassmorphism default, custom cursorsQuiet, clinical surfaces only.
• Pure #000 / #fffUse --brand-ink / --brand-paper. Pure black/white reads as cheap.
• Side-stripe borders, hero-metric template, identical card gridsTemplate tells. Break rhythm with real hierarchy.
• A fourth TEXT familyThree text families, fixed roles - Geologica (display + headings), Roboto (body + UI), Roboto Mono (numerals). A new role replaces one of the three, never adds a family. Sole exception: the « Phytogrammes. » LOGOTYPE keeps Futura PT (.font-logo) and never sets running text.
• scale(0) entrances, ease-in on UIEnter from scale(0.95) + opacity. Use the brand ease-out curves. The ban is scoped to UI, and the one thing outside that scope is a loop which never ends and never answers input. That may use --ease-in-out.
• Logo in italic, all-pink, or missing its accent periodThe « Phytogrammes. » wordmark is Futura PT Demi/Bold (.font-logo), never italic. The NAME is all-ink on light, all-paper on dark, never accent. Its trailing full stop is ALWAYS the brand pink (--brand-accent), rendered as its own text-accent span, on every surface.
• A utility glued to a ${…} interpolation in a classNameTailwind scans components as raw text and swallows the token touching the interpolation — the class emits ZERO CSS, with no error and no diff to blame. `…42fr)]${phaseClass}` stacked the welcome popup at every width. Keep a space before the ${. Four masked call sites were swept (bg-ink/45 and outline-none in AuthModal, backdrop-blur-[2px] in NewUserPopup, focus-visible:ring-accent in ProposeEditAffordance) ; the check:design rule « glued-class-interpolation » now locks the idiom.

Registre des retraits

Motif retiré → remplacement sanctionné. Reprendre un motif retiré est une violation du check de dérive, pas un choix de style. La justification vit dans l’entrée de journal « Depuis ».

• Famille .badge-skeuo* (badge en relief)<Badge /> étiquette plate, 2 paliers × 6 tonsv0.37
• SVG badges (SyntheticBadge, NewBadge, SoldOutSticker)Tons <Badge /> ; sceau PDP = <SoldOutStamp />v0.37
• Kicker filet + tracked-caps en surligne de sectionTitre Geologica casse phrase, sans kickerv0.20.57
• Micro-étiquette mono majuscules trackéeLibellé Geologica casse phrase 13-15 px, ou suppression2026-06-17
• Libellé CTA mono-caps sur bouton skeuo (l'exemption du script)font-geologica text-[13px] font-medium, casse phrase2026-07-19
• Label bouton plat bg-ink text-paper.btn-skeuo-ink (registre relief)v0.27
• Futura PT comme famille de TEXTEGeologica / Roboto / Roboto Mono ; Futura survit en .font-logo (wordmark seul)v0.36
• Marque picturale « le poids »Identité wordmark seule « Phytogrammes. », point rosev0.36
• Animation ambiante hero cloudscapeRetirée sans remplacement (note globals.css)v0.30
• .t-reel (NumberReel maison) + .t-auth-aurora (aurora d'onglet)<PriceFlow /> (number-flow) pour les numéraux ; l'aurora n'a jamais eu de consommateur — CSS mort retirév0.49
• Rangée prix + CTA du hero et sous-titre italique bicoloreLede specimen (famille en gras + claim labo debout), CTA unique ; le prix vit sur la PDPv0.52

Imagerie & voix

100 % piloté par le CMS, aucun asset local. La voix est en français, vouvoiement, sans tiret cadratin.

Direction artistique

Voix (FR)

• ·Vouvoiement, toujours.
• ·Espace insécable (U+00A0) avant deux-points, point-virgule, points d'interrogation et d'exclamation, après le guillemet ouvrant ET avant le fermant.
• ·Virgule décimale (12,5), insécable avant l'unité (12,5 %, 24 h).
• ·Phrases ≤ 28 mots.
• ·Les adjectifs doivent être mesurables.
• ·Pas de tiret cadratin (virgule, deux-points, point-virgule, point, parenthèses).
• ·Termes scientifiques (Δ⁹-THC, HPLC, CBGA) employés sans explication dans le texte courant.
• ·Zéro promesse thérapeutique.

Exceptions ancrées

• CollectionPromoTile.tsx
  CTA mono-caps 11 px : une action, pas une étiquette. Même registre que les CTA btn-skeuo des cartes.
• globals.css · .t-badge-dot
  scale(0) verbatim transitions-dev, sur 6 px : sous le seuil perceptuel.
• globals.css · .image-outline
  Noir pur à 10 % : un liseré teinté encre lit comme de la saleté sur le bord de l'image.
• SoldOutStamp.tsx · hero-nouveau
  Tampon (art) et pastille verre au-dessus de 12 px : deux registres sanctionnés hors de l'interdit micro-étiquette.
• BrandkitPage.tsx · citation labo
  Guillemets accent en spans aria-hidden : la marque décorative porte sa propre marge, pas une espace insécable.