Charte graphique

Logo, couleurs, typographies, pictogrammes et ton : les règles pour qu'Oukonjou reste reconnaissable partout.

Nom et promesse

Oukonjou, c'est « Où qu'on joue ? » écrit comme on le dit. La question que se posent chaque jour les ados, les parents et les sportifs du dimanche, transformée en nom. Il se prononce [u.kɔ̃.ʒu] et s'écrit toujours avec une seule capitale : Oukonjou.

Promesse : trouver en quelques secondes un terrain gratuit, sans réservation, autour de soi, avec les règles pour bien en profiter.

Signatures

Où qu'on joue ? Juste là.

Where to play? Right here.

Ligne de base : « Le sport en accès libre, autour de vous. » / “Free-access sports spots near you.”

Le symbole reprend le rond central d'un terrain : la ligne médiane, le cercle et, au centre, un point jaune qui est à la fois le ballon et le « vous êtes ici » d'une carte. Dans le logotype, ce point jaune se loge dans le premier O. Le logotype est dessiné dans la Big Shoulders Display Black, une linéale étroite inspirée de la signalétique des stades.

Logo principal (symbole + logotype)
Logo principal (symbole + logotype) logo-lockup.svg
Version sur fond Résine
Version sur fond Résine logo-lockup-white.svg
Version sur fond Asphalte
Version sur fond Asphalte logo-lockup-white.svg
Logotype seul
Logotype seul logo.svg
Monochrome (impression 1 couleur)
Monochrome (impression 1 couleur) logo-mono.svg
Symbole (icône d'application, favicon)
Symbole (icône d'application, favicon) logo-mark.svg
  • Zone de protection : laissez autour du logo un espace libre au moins égal à la hauteur du point jaune multipliée par deux.
  • Taille minimale : logotype 80 px (20 mm) de large ; symbole 24 px (8 mm).
  • Fichiers (dossier assets/img) : logo-lockup.svg, logo-lockup-white.svg, logo.svg, logo-white.svg, logo-mono.svg, logo-mark.svg, logo-mark-dark.svg, favicon.svg, og-fr.png, og-en.png.

Couleurs

Une palette tirée du terrain de quartier : la résine verte des city-stades, l'asphalte, la peinture jaune des tracés, le béton des skateparks. Proportions indicatives : 60 % béton et craie, 25 % asphalte, 10 % résine, 5 % jaune.

Résine#0C6B57contraste : blanc 6.4 · asphalte 2.6Couleur de marque. Fonds pleins, boutons principaux, symbole.
Asphalte#17202Acontraste : blanc 16.5 · asphalte 1.0Texte, logotype, pied de page, grappes sur la carte.
Jaune traçage#FFC83Dcontraste : blanc 1.5 · asphalte 10.6Le point du logo et un seul accent par écran. Jamais pour du texte sur fond clair.
Béton#EEF2EFcontraste : blanc 1.1 · asphalte 14.6Fond de page en thème clair.
Craie#FFFFFFcontraste : blanc 1.0 · asphalte 16.5Surfaces, cartes, lignes du symbole.
Terrain de nuit#0F151Bcontraste : blanc 18.4 · asphalte 1.1Fond de page en thème sombre.
Résine claire#2DB48Econtraste : blanc 2.6 · asphalte 6.3Couleur de marque en thème sombre.

Couleurs des types de terrains

Chaque type a sa couleur sur la carte et dans les fiches. Une couleur n'est jamais seule porteuse de sens : elle est toujours accompagnée du pictogramme et du nom. Sur ces couleurs, seuls les pictogrammes et les grands titres sont posés en blanc (contraste d'au moins 3:1) ; le texte courant reste en Asphalte, à côté.

Skatepark#6D4FD3blanc 5.7
Pumptrack#C8620Fblanc 4.0
City-stade#1E6FD9blanc 4.8
Aire de street workout#D2344Bblanc 4.8
Terrain de basket#B54A1Cblanc 5.3
Parcours de santé#178A86blanc 4.2
Boulodrome#9C7A2Eblanc 4.0
Terrain de foot#3C9431blanc 3.8
Terrain de beach-volley#A67C00blanc 3.8
Bloc d'escalade#56677Ablanc 5.8
Court de tennis#6E8710blanc 4.1
Table de ping-pong#D2457Ablanc 4.3
Site de baignade#0E7FA6blanc 4.6
Site d'escalade#7A5C3Eblanc 6.1
Parcours d'orientation#C2410Cblanc 5.2
Départ de randonnée#4D7C0Fblanc 5.0

Typographies

Trois familles gratuites sous licence SIL Open Font License, hébergées avec le site (dossier assets/fonts, sous-ensemble latin) : aucun appel à un service tiers.

Big Shoulders Display · 800 / 900 · titres

Skatepark à Lyon

Titres et chiffres forts, toujours en capitales, interlignage serré (1,0 à 1,1).

Atkinson Hyperlegible · 400 / 700 · texte

Conçue par le Braille Institute pour les personnes malvoyantes : chaque lettre se distingue nettement des autres. Corps 17 px minimum, interlignage 1,6.

IBM Plex Mono · 500 / 600 · données

1,2 km · 45.76402, 4.83570 · EN 15312:2026

Distances, coordonnées, dates, références de normes, étiquettes en capitales espacées.

NiveauFamilleTaille
H1Big Shoulders Display 80034–74 px
H2Big Shoulders Display 80030–43 px
H3Big Shoulders Display 70023 px
TexteAtkinson Hyperlegible 40017 px
ÉtiquetteIBM Plex Mono 60012,5 px · +9 %

Pictogrammes

Grille de 24 px, trait de 1,8 px, extrémités et angles arrondis, pas de remplissage. Sur fond de couleur de type, le pictogramme est blanc dans un carré aux coins arrondis (rayon 27 % du côté).

Skateparki-skatepark
Pumptracki-pumptrack
City-stadei-citystade
Aire de street workouti-workout
Terrain de basketi-basket
Parcours de santéi-trail
Boulodromei-petanque
Terrain de footi-foot
Terrain de beach-volleyi-beach
Bloc d'escaladei-climb
Court de tennisi-tennis
Table de ping-pongi-pingpong
Site de baignadei-swim
Site d'escaladei-crag
Parcours d'orientationi-compass
Départ de randonnéei-hike
i-search
i-locate
i-map
i-list
i-route
i-star
i-bell
i-flag
i-light
i-access
i-info
i-mail

Composants

Bouton principalAccent jauneSecondaire
SkateparksTerrains de basketAccès libreNouveau

Formes : boutons et filtres en pilule (rayon complet) ; cartes rayon 12 px ; un seul bouton jaune par écran. Cible tactile 44 px minimum. Focus clavier : contour bleu de 3 px.

Ton et écriture

  • Vouvoiement, phrases courtes, verbes d'action : « Cherchez », « Allez-y », « Signaler une erreur ».
  • Concret : des distances, des règles, des dimensions. Pas de superlatifs, pas de jargon administratif.
  • Honnête : « à vérifier sur place » quand on ne sait pas. Oukonjou ne se présente jamais comme un service officiel.
  • Le clin d'œil est réservé aux titres et aux pages d'erreur (« Hors des limites »), jamais aux règles de sécurité.

À faire, à éviter

À faire
  • Utiliser les fichiers fournis sans les redessiner.
  • Placer le logo sur Béton, Craie, Résine ou Asphalte.
  • Garder le point jaune dans le premier O.
À éviter
  • Déformer, incliner, ombrer ou contourner le logo.
  • Changer la couleur du point ou le déplacer.
  • Utiliser le jaune pour du texte sur fond clair (contraste insuffisant).
  • Associer le logo à un logo officiel (ministère, Marianne, fédération).