Une plateforme de présence en ligne pour les commerces locaux
Stride s'adresse aux entreprises qui gèrent un ou plusieurs établissements : restaurants, bars, hôtels, salons de beauté et de bien-être, cabinets médicaux, boutiques, artisans du bâtiment, professions libérales. Stride leur donne un site web géré, la synchronisation Google Business, Instagram et Facebook, l'agrégation des avis, une boîte de réception unique, plus de cent intégrations métiers et les outils domaine, e-mail et SEO.
Le nom
»
Stride, a name that makes you feel alive
Stride, c'est l'élan et l'agilité. Le produit aide les marques à se faire connaître, à engager leur audience et à convertir. Il accompagne toute la trajectoire : un site dès le premier jour, puis un site qui grandit au rythme des idées.
La promesse
»
The website that never dies
L'aliveness, c'est la promesse d'une présence numérique toujours vivante : un site qui grandit avec la marque, qui reste frais, performant et engageant.
02 · Logo et usages
Trois déclinaisons du logo
Un tracé continu, une lettre technique. Le symbole se dessine d'un seul geste, sans lever le crayon : c'est l'élan. Le logotype, en Outfit, y répond par une géométrie précise et posée : c'est la technologie.
Le mot seul, quand le symbole est déjà présent à l'écran.
Logo complet
Signature par défaut. Largeur minimale 120 px.
Logomark inversé
Logotype inversé
Logo complet inversé
Fonds et zone de protection
Le logo et le logomark s'utilisent en noir, en blanc ou dans une couleur de la palette métiers, jamais dans une autre couleur.
Sur fond sombre, on utilise la variante inversée fournie ; on ne colorise pas la version claire.
Zone de protection : la moitié de la hauteur du symbole, sur les quatre côtés. Rien n'y entre.
Sur photographie, le logo se pose sur une zone vide et peu contrastée, jamais sur un sujet.
20 px202020
Logomark · hauteur 40 px · zone 20 px
13 px131313
Logotype · hauteur 26 px · zone 13 px
En rouge : la zone de protection, égale à la moitié de la hauteur du signe. Aucun texte, aucune image, aucun bord n'y entre.
Interdits
Utiliser une couleur hors palette métiers.
Étirer, incliner ou modifier les proportions.
Ajouter ombre portée, contour ou effet.
03 · Couleurs
Noir cassé et blanc, rien d'autre par défaut
Le noir et blanc est un choix, pas une absence de choix. La star, ce sont les sites des clients : photos de plats, de salles, de vitrines, chacune avec sa palette. Une identité neutre les laisse exister. Stride tient le cadre, le client tient la couleur.
Primaire
#222222
--c-black · --color-primary
Noir cassé, volontairement pas #000.
Surfaces et neutres
Fond application
#f3f3f1
--c-gray-lighter
Carte
#ffffff
--c-white
Bordure
#E2E2E2
--c-gray-light
Texte principal
#222222
--font-color-base
Texte atténué
#868686
--c-text-light
Métiers
Huit paires de couleurs. Elles identifient le secteur d'un établissement. Deux versions d'une même couleur, pas toujours utilisées ensemble : la claire et la foncée peuvent se combiner, comme sur les visuels Local Heroes.
Restaurant et café
#FECBA1
#D93A00
Bar et vie nocturne
#C4B5FD
#2D1B8E
Hôtellerie
#F5D0A9
#92400E
Salon et bien-être
#FBCFE8
#9D174D
Santé et médical
#BAE6FD
#1D77E6
Construction et artisanat
#D4FAB0
#4A8A1A
Boutique et retail
#FEF9A1
#F5AB00
Professions libérales
#C8C8C8
#1A1A1A
04 · Typographie
Outfit
Une seule famille de police. Linéale géométrique, très lisible en petit corps. Quatre graisses en service ; 600 est le plafond d'affichage.
Light 200--font-weight-lightSous-titres de héros, chapôs marketing
Regular 400--font-weight-normalCorps de texte
Medium 500--font-weight-boldGras d'interface : boutons, badges, titres de carte, navigation
SemiBold 600--font-weight-displayTous les titres, héros, en-têtes de section
Échelle
Exprimée en rem, sur une racine de référence de 10 px, qui varie de 9,5 à 11 px selon la largeur d'écran. Les corps 5xl et 6xl sont réservés au marketing.
--font-size-xs9 pxBadges, légendes
--font-size-sm11 pxTexte secondaire
--font-size-base12 pxCorps de texte de l'application
--font-size-md14 pxGrand corps, titre secondaire
--font-size-lg16 pxTitre de section
--font-size-xl18 pxTitre de carte ou d'encart
--font-size-2xl24 pxTitre de formulaire
--font-size-3xl30 pxHéros applicatif
--font-size-4xl45 pxAccroche
--font-size-5xl60 pxHéros
--font-size-6xl80 pxÉditorial
Interlettrage
--track-tight-0.04emAffichage 5xl / 6xl
--track-snug-0.02emGrands titres 4xl
--track-normal0Valeur par défaut
--track-eyebrow0.18emMarqueurs de section en capitales, marketing uniquement
05 · Photographie de marque
Ce qu'est une photographie Stride
Le registre documentaire, net, coloré, habité, porte le site, le blog, les pages sectorielles et les supports commerciaux. Le corpus complet, secteur par secteur, est en annexe.
05.1Le registre documentaire
Authentique, humain, tactile, vivant
Des images nettes et colorées, qui pourraient avoir été prises pendant une vraie journée de travail. Quatre qualités doivent se lire dans chaque image ; si l'une manque, l'image est hors sujet.
Authentique
Des modèles crédibles et du détail opérationnel : ce qui traîne sur le plan de travail appartient au métier.
Humain
La présence, pas nécessairement la personne. Le geste, le caractère, l'imperfection, ou la trace de quelqu'un qui vient de passer.
Tactile
La matière et le détail sensoriel portent la scène : farine, cuivre, tissu, vapeur, papier.
Vivant
Une énergie ouverte, sans vernis publicitaire. Le commerce est en train de tourner.
Une seule action
Servir, préparer, conseiller, fabriquer, réparer, accueillir. Si le cadre contient deux actions concurrentes, on en retire une.
Les quatre familles d'images
Portrait au travail
On voit la personne entière en train de travailler : visage visible, geste en cours, lieu lisible autour d'elle.
Geste
Le visage sort du cadre. On serre sur les mains, l'outil et la matière : un geste précis explique un métier.
Usage de la technologie
Un appareil est utilisé dans le commerce. La zone de l'écran reste nette.
Lieu
L'établissement est le héros. Vide ou plein, le sujet est l'ambiance générale, pas une personne. Vide, jamais inhabité : on doit lire qu'on y travaille. Pas de lieu rangé comme un showroom.
06 · Compositions de marque
Mettre un établissement en avant
Deux compositions superposent une marque à une photographie. Le visuel sectoriel place la marque Stride derrière un local hero. Le Stride Blur pose le logo du client, net et blanc, sur un fond flou. Les deux ne se mélangent jamais dans un même visuel.
06.1VISUELS DE PERSONNES
Local heroes
Chaque visuel sectoriel met en avant un local hero : la personne qui fait tourner le commerce. Elle reste au premier plan, nette et détachée du fond, et la marque passe derrière elle, jamais peinte sur le sujet. Trois calques produisent cet effet, listés ci-dessous de haut en bas. Leur ordre ne change jamais.
Restaurant et café, paire abricot et rouge. La cheffe et son dressage restent au premier plan, la boucle centrale passe derrière elle.
03
Masque de premier plan
Personnes, cheveux, mains, plan de travail et objets de travail. Uniquement des pixels de l'original, jamais une personne régénérée.
02
Marque Stride en SVG
Géométrie de tracé exacte. On ne change que les remplissages : jamais d'étirement, jamais de tracé redessiné à la main.
01
Photographie d'origine
L'image source complète, à ses dimensions natives, forme la plaque de fond.
Paires de couleurs par secteur
Le tracé supérieur prend la couleur claire, le tracé décalé la couleur foncée. Les deux restent totalement opaques : ni ombre, ni mode de fusion, ni transparence.
SecteurTracé supérieurTracé décalé
Restaurant et café#FECBA1#D93A00
Bar et vie nocturne#C4B5FD#2D1B8E
Hôtellerie#F5D0A9#92400E
Salon et bien-être#FBCFE8#9D174D
Santé et médical#BAE6FD#1D77E6
Construction et artisanat#D4FAB0#4A8A1A
Boutique et retail#FEF9A1#F5AB00
Professions libérales#C8C8C8#1A1A1A
Placement de la marque
Poser le SVG à 105–115 % de la largeur du cadre.
Placer la boucle près du sujet, jamais directement sur un visage.
Le recadrage est permis, mais la montée à gauche, la boucle centrale et la continuation à droite restent visibles.
Déplacer et redimensionner le SVG comme un seul bloc, proportions verrouillées.
Professions libérales. La marque lit comme une partie de la pièce, la table de matières passe devant.
Bar et vie nocturne. L'arche haute reste visible, la barmaid reste au premier plan.
Hôtellerie. La marque traverse client et hôte sans couvrir un visage.
Salon et bien-être. Le masque inclut les mains, les flacons et le plan de travail.
Avant livraison
Géométrie SVG exacte conservée
Bonne paire de couleurs
Marque derrière le premier plan
Visages et mains non masqués
Aucun halo sur les cheveux ou les objets
Dimensions d'origine conservées
06.2VISUELS DE MARQUES
Lieux dynamiques et logo
Utilisé pour mettre en avant un client ou une marque partenaire. Les photographies floues racontent la vie d'un entrepreneur et donnent une impression de vie et d'animation d'un lieu. Elles ne s'utilisent jamais seules : le flou sert de fond, et le logo de l'établissement se pose net, en blanc, par-dessus.
Le logo du client se pose en blanc, centré, sur la zone la plus calme de l'image.
Fabrication
Le Stride Blur se fabrique en cinq calques empilés sur l'image de référence. Les réglages sont fixes : on ne les improvise pas image par image.
Calque 1
FondImage de référence
Calque 2
Flou directionnel 110°Vitesse 90 %Opacité 75 %
Calque 3
Flou directionnel 100°Vitesse 15 %Opacité 50 %
Calque 4
Zoom 115 %10 px vers le hautOpacité 20 %
Calque 5
Zoom 105 %10 px vers la gaucheOpacité 10 %
Générateur
Déposez une image de référence : les cinq calques sont appliqués aux réglages ci-dessus, puis le résultat se télécharge en PNG.
Il existe trois façons de montrer le produit : le résultat, le fonctionnement, ou l'idée.
Attention. Les écrans vont être refaits selon le nouveau branding. Ne réutilisez pas ces captures dans un support durable sans vérifier qu'elles sont à jour.
01Sites clientsCe que le produit fabrique.
Akai, Bruxelles
Coco les pieds dans l'eau
Matka, Paris
Oté, Paris
02Interface de gestionComment ça marche.
Captures par fonctionnalité
Tableau de bord
Vue d'ensemble : site, boîte de réception, actions rapides.
Éditeur et aperçu
Aperçu plein écran du site avec la barre de bascule.
Boîte de réception
Demandes entrantes et détail de la conversation.
Statistiques
Trafic du site, sources et pages les plus vues.
Intégrations
Services partenaires connectés au site.
E-réputation
Avis agrégés, note moyenne et réponses.
Liste des clients
Base de contacts exportable.
QR codes
QR codes permanents par page du site.
Éditeur du site
Options activables sur le site public.
03Interface simplifiéeNon définitif
Interface redessinée en blocs, sur fond sombre pour illustrer une fonction.
