Salty Vision — Accueil
Hero, portefeuille de marques, piliers du groupe, appel au contact.
SAL-159 · parent SAL-156
Maquettes UX/UI — Phase 1 des trois sites
Maquettes haute fidélité, navigables et responsives. Redimensionnez la fenêtre : chaque page bascule entre composition mobile (< 768 px) et desktop (≥ 768 px).
Statut. Ce kit est un livrable de conception, pas le socle de production.
L’implémentation reste du ressort du CTO (SAL-158). L’identité visuelle générale
(logos, charte, accents définitifs) reste du ressort d’Éphémère : tous les emplacements
concernés sont marqués dans les pages.
Écrans
Les six pages
Salty Vision — Le groupe
Page intérieure type : éditorial, liste d’informations structurées, formulaire.
La Colline Boisée — Accueil
Hero, périmètre en trois volets, méthode en liste, appel au contact.
La Colline Boisée — Savoir-faire
Page intérieure type : contenu long, grille de réalisations, état vide, contact pro.
Malt’Hazard — Accueil
Hero, aperçu de gamme, univers, emplacement réglementaire réservé.
Malt’Hazard — La gamme
Grille catalogue, filtres, fiche en bottom-sheet mobile / modale desktop, états chargement et vide.
Parcours à tester en priorité :
malt-hazard/catalogue.html → bouton « Fiche de dégustation » → fermeture par
Échap, par le bouton, par clic sur le voile, et par glissement vers le bas en
largeur mobile. Lien profond direct :
malt-hazard/catalogue.html#fiche-faux-calme.
Lecture
Conventions de la maquette
- Texte noir
- Libellés d’interface et structure : arbitrés par la Direction Créative, prêts pour le développement.
- À valider
- Proposition éditoriale de la Direction Créative. Lisible dans la maquette, à faire approuver par le métier avant publication.
- Gris italique
- Donnée absente. Aucune valeur n’est inventée : l’emplacement est réservé et signalé.
- Aplat dégradé
- Emplacement de visuel en attente d’Éphémère, avec ratio et cadrage figés.
- Bandeau noir
- Repère de maquette. Absent de toute version publiée.
Fondations
Jetons de design
Tout est dans assets/tokens.css. Les accents de marque y sont isolés :
une seule substitution suffira quand Éphémère aura tranché.
Accents provisoires
Contrastes WCAG 2.1 vérifiés sur fond off-white et en texte blanc sur l’accent.
Salty Vision
#2f6f8f
La Colline Boisée
#4a6b4f
Malt’Hazard
#a8622bEn attente d’Éphémère
Gris et encres (communs)
--bg #fbfbfd--bg-elevated #ffffff--surface-2 #f5f5f7--ink #1c1c1e--ink-3 #6e6e73--ink-decor #8e8e93Typographie
-apple-system, BlinkMacSystemFont, SF Pro Display/Text,
Segoe UI, Inter, puis replis système. Aucune police téléchargée :
zéro requête, zéro décalage de rendu.
Hiérarchie par taille et graisse — 11 à 56 px, graisses 400/500/600.
Profondeur
Espacement base 4, rayons 8→28 px, ombres diffuses, translucidité en amélioration progressive. Les filets restent sous 16 % d’opacité : aucune bordure franche.
Ergonomie
Cibles tactiles 44 × 44 px minimum, anneau de focus 3 px commun aux trois sites,
scroll vertical naturel, overflow-x: hidden en garde-fou.
Dépendances
Entrées manquantes
Détail complet, propriétaire et impact dans design/SPEC-UX-UI.md.
Éphémère — identité visuelle
Logos des trois marques et leurs déclinaisons, accents définitifs, visuels d’ouverture, photographies produit, éventuelle police de titrage.
Métier — contenu et données
Textes définitifs, raison sociale et coordonnées, mentions légales et sanitaires, catalogue bière confirmé (volume, allergènes, disponibilité), réalisations citables.