J.Preti— Visual Artist & Creative Developer
BIJOUX EN PERLES DE TAHITI — BOUTIQUE EN LIGNE

Mathaíni Tahiti

Accueil de Mathaíni Tahiti : le collier Fenua porté face au lagon, le titre Tarito'a
mathainitahiti.fr — accueil
Voir
le site
Défiler
ClientMathaíni Tahiti
Année2026
RôleSite & back-office
01 — Intention

Des perles de Tahiti montées à la main, souvent en pièce unique. La boutique devait avoir la lumière du lagon et la rigueur d’un atelier — sans rien perdre en quittant Shopify.

Le défi — quitter Shopify sans rien perdre : 140 pièces, l’historique des clientes, les adresses déjà partagées.

La réponse — une boutique indépendante qui reprend tout, du catalogue aux redirections, et un Atelier où la marque règle elle-même commandes, pièces et couleurs du site.

AstroReactSupabaseStripeResend
02 — ParcoursCapture réelle · 63 s

Du lagon à l’Atelier

03 — Écrans
01 / 05

Collection

La grille en cellules séparées d’un filet, sans rayon. Filtres par matière, style, couleur, finition, motif, longueur, prix et tirage ; les pièces uniques signalées.

mathainitahiti.fr/collections/colliers
02 / 05

Fiche produit

La galerie à gauche, la décision à droite : prix, pièce unique n° 1/1, taille, panier — puis la fiche technique de la perle.

mathainitahiti.fr/produits/collier-fenua
03 / 05

Recherche

Un panneau sur la page en cours : les pièces arrivent pendant la frappe, le mot cherché surligné, le tri par catégorie à côté.

mathainitahiti.fr/produits/collier-upu · recherche
04 / 05

Panier

Un tiroir, pas une page : la pièce, l’écrin cadeau et le mot manuscrit offerts, la livraison suivie — la fiche reste derrière.

mathainitahiti.fr/produits/collier-fenua · panier
05 / 05

Paiement

Trois étapes, le récapitulatif à droite. Une pièce unique est réservée au moment de payer, le temps du paiement.

mathainitahiti.fr/commande
Collection — Mathaíni TahitiFiche produit — Mathaíni TahitiRecherche — Mathaíni TahitiPanier — Mathaíni TahitiPaiement — Mathaíni Tahiti
mathainitahiti.fr/collections/colliersmathainitahiti.fr/produits/collier-fenuamathainitahiti.fr/produits/collier-upu · recherchemathainitahiti.fr/produits/collier-fenua · paniermathainitahiti.fr/commande
01 / 05
Planche 01 — la page de la créatrice, en plein cadre
04 — L’accueil en entier

L’accueil, en entier

Huit sections, du film du lagon à la lettre du lagon. Leur ordre, leurs textes et leurs photos se règlent dans l’Éditeur de design de l’Atelier.

00 %
L’accueil de Mathaíni Tahiti, sur toute sa hauteur
05 — Détails
Détail 01 — l’entrée : le contour se trace au rythme du chargement, compteur à l’appui
Détail 02 — « pièce unique n° 1/1 : il n’en existe qu’un exemplaire »
Détail 03 — la fiche technique : signification, perle, matériaux, motif, entretien
Détail 04 — dans l’Atelier : « réservée 15 min pendant le paiement », la fiche perle
06 — Avant / après
Avant — ShopifyAprès — Astro & Supabase
Après — Astro & Supabase — Mathaíni TahitiAvant — Shopify — Mathaíni Tahiti
Collier Fenua — la fiche de l’ancienne boutique, puis la nouvelle : mêmes photos, même texte
07 — Charte de la boutique
Couleurs
#F1EEE9sable
#1D1B18encre
#5F5A53encre 2
#8E8880encre 3
#D9D4CBfilet
oklch(.56 .08 135)pistache
#B8975Aor
Pictogrammes — 12 des 68 de la marque, au trait, sans rayon
Perle de Tahiti
Keshi de Tahiti
Nacre de Tahiti
Corail et bambou de mer
Coquillage
Diopside
Turquoise
Pierre de lune
Plaqué or
Mousqueton amovible
Amulettes et tiki
Multi-positions
Logotype
Typographie
Tarito'a
Titre du hero — Lexend 500, 96 px, −0,02 em, capitales
Colliers
Titre de section — Lexend 500, 44 px
Collier Fenua — 270 €
Nom et prix d’une pièce — Lexend 500 et 400, 10,5 px
Perle de Tahiti catégorie A, forme goutte, 9 mm, lustre très brillant.
Texte courant — IBM Plex Mono 11,5 px : la boutique écrit ses fiches en mono

Deux familles, aucune graisse au-delà de 500 : Lexend porte les titres et les noms, IBM Plex Mono tout ce qui se lit de près. Les titres ne se coupent jamais au milieu d’un mot.

08 — Téléphone
Entrée — le carré se trace
Accueil — le film en portrait
Menu — matières et univers
Fiche produit
Image de campagne — générée à partir des vraies pièces, deuxième plan du film
09 — Atelier — le back-office
Éditeur de design — sections, textes et photos de l’accueil, aperçu en direct
Thème — bandeau, lettre du lagon, réseaux, polices et couleurs
Catalogue — 140 pièces : pièces uniques, séries, stock faible, épuisés, à vérifier
Une pièce — photos, vidéo 360°, signification, description
Collections — les huit de Shopify, reprises avec leur adresse
01 / 05
CommandesÀ préparer, préparées, expédiées, livrées ; bon de préparation et certificat d’authenticité à imprimer
Pièces uniquesRéservées le temps du paiement : jamais vendues deux fois
Éditeur de designSections, textes, photos et thème réglés par la marque, publiés depuis l’Atelier
ClientesReprises de Shopify avec leur historique ; ce qui change sur le site n’est jamais écrasé par un import
10 — Crédits
Direction artistique et développementJulien Preti
LivrablesBoutique en ligne, back-office Atelier, migration depuis Shopify, film de campagne
OutilsAstro, React, Supabase, Stripe, Resend
Film et images de campagneGénérés à partir des vraies pièces : images Gemini, animation Higgsfield (Seedance 2.5)
Photographies des piècesMathaíni Tahiti