Sillage

Refonte UX/UI Sillage · Livré par CyberScale

Le guide de style Sillage

Couleurs, typographie, composants et bonnes pratiques d'image et de SEO : la référence commune pour que chaque page de la plateforme parle le même langage visuel, du site public à l'administration.

13

couleurs de marque

6

styles de texte

6

composants documentés

1. Principes

Quatre règles qui guident chaque décision visuelle sur la plateforme, de l'agenda public à l'administration.

Lisibilité avant tout

Contrastes AA minimum, tailles de texte généreuses, lignes courtes. Un visiteur pressé ne doit jamais relire une phrase deux fois.

Cohérence systématique

Chaque écran réutilise les mêmes couleurs, espacements et composants. Pas de variante ad hoc sans raison fonctionnelle.

L'image d'abord

Sillage vend des expériences : les visuels des événements portent la page, le texte les accompagne sans les concurrencer.

Accessible par défaut

Navigation au clavier, alternatives textuelles, zones cliquables confortables. Pas une option, une base.

2. Couleurs

Une palette chaleureuse et contrastée. Chaque teinte a un rôle précis, cliquez pour copier son code hexadécimal.

3. Typographie

Fraunces (serif) pour les titres, Inter pour le reste. Tapez un texte pour voir comment il se comporte sur toute l'échelle.

Display

56px

Interligne 64px (1,14)

Titre héros, couverture de page

Sillage, les événements lyonnais

H1

40px

Interligne 48px (1,2)

Titre de page

Sillage, les événements lyonnais

H2

32px

Interligne 40px (1,25)

Titre de section

Sillage, les événements lyonnais

H3

24px

Interligne 32px (1,33)

Sous-titre, carte mise en avant

Sillage, les événements lyonnais

Corps

16px

Interligne 26px (1,6)

Texte courant, descriptions

Sillage, les événements lyonnais

Légende

13px

Interligne 18px (1,4)

Métadonnées, labels, badges

Sillage, les événements lyonnais

4. Espacements & grille

Une échelle fixe en pixels évite les marges inventées au cas par cas. La grille structure les pages en 12 colonnes.

4px
8px
12px
16px
24px
32px
48px
64px

Grille 12 colonnes (gouttière 24px)

5. Composants

Les briques réutilisables de la plateforme, avec leurs états et leur code Tailwind.

Boutons

Badges de catégorie

ConférencesAteliersNetworkingConcertsExpositionsGastronomie

Carte événement

Sommet Tech LyonConférences

Sommet Tech Lyon

jeu. 19 nov. · Cité Internationale

Champ de formulaire (connexion)

Toggles

6. Images

Les visuels portent la page : ils suivent des règles strictes pour rester nets, légers et accessibles.

  • Couverture d’événement : ratio 16:9, jamais recadrée à la volée.
  • Galerie et vignettes : ratio 4:3, cohérent sur toute une série.
  • Texte alternatif (alt) obligatoire et descriptif sur chaque image, jamais vide par défaut.
  • Formats WebP ou AVIF en priorité, JPEG en repli, jamais de BMP ou TIFF en ligne.
  • Poids maximum 200 Ko par image après compression, quel que soit le format.
Intervenante sur scène pendant la keynote
À faire : ratio 4:3 respecté, alt descriptif, image unique
À éviter : même visuel que la couverture, alt vide, doublon dans la galerie

7. Mise en page & navigation

Trois gabarits couvrent l'essentiel de la plateforme. Chacun garde la même hiérarchie : navigation, contenu principal, action secondaire.

Accueil

Barre nav, hero éditorial, mise en avant, grille des catégories.

Barre de navigation
Hero + recherche
Catégorie
Catégorie
Catégorie

Liste d’événements

Filtres persistants à gauche, grille de cartes à droite.

Filtres
Carte
Carte
Carte
Carte

Fiche événement

Visuel de couverture, informations clés, programme, réservation fixe.

Couverture 16:9
Titre + méta
Programme
Bloc réservation

8. SEO

Une structure claire aide autant les visiteurs que les moteurs de recherche à comprendre une page événement.

Structure des titres (Hn)

  • H1 unique par page : le titre de l'événement ou de la section.
  • H2 pour les blocs majeurs (programme, intervenants, lieu).
  • H3 pour les sous-points, jamais de saut de niveau (H1 direct à H3).
31 / 60
99 / 155

URL lisible : /evenements/sommet-tech-lyon-2026

Aperçu Google

sillage.lyon › evenements › sommet-tech-lyon-2026

Sommet Tech Lyon · Sillage Lyon

Participez au sommet tech de Lyon le 19 novembre : conférences, démos et networking autour de l’IA.

Données structurées (schema.org/Event)

{
  "@context": "https://schema.org",
  "@type": "Event",
  "name": "Sommet Tech Lyon",
  "startDate": "2026-11-19T09:00:00",
  "location": {
    "@type": "Place",
    "name": "Cité Internationale",
    "address": "50 quai Charles de Gaulle, 69006 Lyon"
  },
  "offers": {
    "@type": "Offer",
    "price": 45,
    "priceCurrency": "EUR",
    "url": "https://sillage.lyon/evenements/sommet-tech-lyon-2026"
  }
}