En stock
Ecrou hexagonal galvanise M16
QUI-ECR-M16-GAL
2,916 TND
CEM — Système de design
À comparer à docs/theme-mockup.html
Palette
Primaire = orange franc, pas le jaune du logo. Le tertiaire réutilise la couleur exacte mesurée sur le logo.
Primaire — orange franc
CTA, prix, liens actifs
900
700
600
500
400
200
50
Secondaire — rust / terracotta
Boutons secondaires, badges Pro
900
700
500
300
50
Tertiaire — or / ambre
Accents. Le 500 est la couleur exacte du logo
900
700
500
300
50
Neutres chauds et encre
Texte, bordures, fonds. Ink 950 est le noir exact du logo
ink 950
800
500
200
50
Sémantiques
États et messages
succès
alerte
erreur
Typographie
EB Garamond pour les titres, Manrope pour le corps et l'interface.
Titres · EB Garamond
Aa
Corps et interface · Manrope
Aa
Display — quincaillerie
H1 — outillage professionnel
H2 — sanitaire et nettoyage
Corps 16 px — plancher de lisibilité, jamais plus petit sur mobile.
Annexe 13 px — mentions secondaires.
Prix
Chiffres tabulaires, trois décimales, formatage rendu par packages/money — nulle part ailleurs.
- Nettoyeur haute pression145,500 TND
- Mitigeur série Élégance62,900 TND
- Écrou galvanisé M162,450 TND
- Commande professionnelle18 420,075 TND
Prix mis en avant sur une fiche produit :
145,500 TNDBoutons
Cible tactile de 44 x 44 px minimum sous le palier tablette.
Badges
Palier Pro 2En stockStock faibleRuptureNeutre
Points de rupture
La zone 1024–1280 px (mega-menu, filtres à facettes) est la plus exposée : elle se teste en priorité.
| Largeur | Palier | Préfixe Tailwind |
|---|---|---|
| 375 px | mobile | aucun |
| 768 px | tablette | sm |
| 1024 px | tablette large | md |
| 1280 px | portable 13" | lg |
| 1536 px | portable 14-15" | xl |
| 1920 px | bureau | 2xl |
Squelettes de chargement
Le squelette occupe EXACTEMENT la boîte de la carte qu'il annonce — c'est sa seule raison d'être.
Apparition au défilement
Fondu et décalage vertical de 14 px, joués UNE fois. Sans mouvement si la préférence système le demande.
Ce bloc apparaît à son entrée dans la fenêtre. Il part visible et n'est masqué qu'une fois le script en marche : si celui-ci n'arrive jamais, le texte reste lisible.