Explore Togo — système de design

Couleurs

Les trois couleurs de marque sont extraites du logo. Deux contraintes mesurées gouvernent leur usage : le jaune a un contraste de 1,5:1 sur blanc, il est donc interdit en texte et ne vit qu'en aplat avec du texte foncé. Le vert (6,3:1) et le rouge (5,1:1) passent tous deux en AA avec du texte blanc.

#0B6D53

VertSurfaces, structure, liens

#08543F

Vert profondHero, calques sur photo

#E7F1ED

Vert tintéBadges, encadrés

#FECC58

JauneBadges, mises en avant

#D61E42

RougeAction de réservation

#171512

EncreTexte principal

#6B6459

GrisTexte secondaire

#E2DED3

LigneBordures en 0,5 px

#8A1F11

BriqueErreurs, avec icône

Les règles qui tiennent la direction

Le vert est un canvas, jamais une barre de navigation horizontale — c'est le marqueur numéro un du site institutionnel.
Deux grandes zones vertes pleines par page au maximum.
Un seul bouton rouge par écran. La barre d'action collante le possède ; les offres sont en vert plein ou vert contour.
Le rouge n'est jamais une erreur. Les erreurs sont en brique, toujours avec une icône et un texte.
Jamais de texte jaune. Le jaune est un fond, avec #5C4409 par-dessus.

Typographie

Anton pour les titres, uniquement au-dessus de 24 px. Inter pour tout le reste, en deux graisses seulement. Casse phrase partout, jamais de capitales intégrales. Longueur de ligne plafonnée à 68 caractères.

Titre de hero — Anton 64 px desktop / 38 px mobile

Le Togo se visite du nord au sud.

Titre de section — Anton 40 px / 28 px

Sites à ne pas manquer

Corps — Inter 400, 17 px, interligne 1,65

Koutammakou est un site habité. On demande l'autorisation avant de photographier une personne ou d'entrer dans une maison. Le guide du village fait partie de la visite, il ne s'agit pas d'une option.

Interface 15 px · Métadonnées 13 px

Réserver cette journée

Départ Kara · 6 h · français, anglais

Rôle	Police	Desktop	Mobile	Interligne
Titre de hero	Anton	64 px	38 px	1,15
Titre de section	Anton	40 px	28 px	1,15
Titre de carte	Inter 500	20 px	18 px	1,3
Corps	Inter 400	17 px	16 px	1,65
Interface, boutons	Inter 500	15 px	15 px	1,4
Métadonnées	Inter 400	13 px	13 px	1,4

Composants

Rayons de 8 px sur les contrôles, 12 px sur les cartes. Bordures de 0,5 px. Aucune ombre portée, sauf l'anneau de focus. Zones tactiles de 44 px minimum.

Actions

Réserver Réserver cette offre Demander un devis Voir le circuit

Badges

Confirmation immédiate Unesco Sur mesure Guide vérifié Devis expiré

Cartes d'offre

Confirmation immédiate

Journée guidée à Koutammakou

Départ Kara · 6 h · français, anglais

38 € 25 000 FCFARéserver

Sur mesure

Le grand nord, 5 jours

2 à 8 personnes · dates libres

dès 274 € 180 000 FCFADemander un devis

Réponse sous 24 h

Prix

Euro en principal pour la cible internationale, FCFA en dessous et en plus petit. Conversion au taux fixe de 655,957, le franc CFA étant arrimé à l'euro.

Mouvement

Six animations autorisées, tout le reste est interdit. Aucune ne dépasse 600 ms, et seules transform et opacity sont animées. Sous prefers-reduced-motion, tout est désactivé et les éléments s'affichent immédiatement dans leur état final.

Jeton	Valeur	Usage
`--dur-etat`	150 ms	Survol, focus, changement d'état
`--dur-entree`	260 ms	Révélation au défilement
`--dur-zoom`	420 ms	Cadrage sur une région
`--dur-scene`	600 ms	Plafond absolu
`--ease-entree`	`cubic-bezier(.22,1,.36,1)`	Entrées et cadrages
`--ease-etat`	`cubic-bezier(.4,0,.2,1)`	États

Interdits

Parallaxe. Compteurs qui s'incrémentent. Texte lettre par lettre. Entrées en scale ou depuis les côtés. Rebond et élasticité. Boucles hors hero. Curseur personnalisé. Défilement piloté en JavaScript. Bibliothèques type AOS ou animate.css. Transitions de page.

La carte

Carte des cinq régions du Togo avec les marqueurs de sites

Construite à partir des frontières administratives officielles, pas dessinée de mémoire. Cinq régions en tracés exacts, marqueurs au pictogramme des cornes du logo vectorisé, regroupement automatique là où les sites se superposent.

Élément	Sélecteur
Régions, avec `data-bbox`	`path.tg-region`
Groupe transformé au zoom	`#tg-scene`
Marqueurs contre-échelonnés	`g.tg-pin-wrap`
Regroupements	`g.tg-grappe`
Corridor de circuit	`#tg-circuit`
Minicarte de retour	`#tg-minicarte`

Télécharger le SVG · Coordonnées et projection · Spécification du zoom

Ratio du pays : 1:2,53. Ratio d'une région : entre 1:0,76 et 1:1,64. C'est ce qui justifie le zoom — une région remplit un cadre que le pays entier ne peut pas remplir.