Couleurs

Télécharger les tokens (DTCG)

Tous les tokens de couleur, en clair et en sombre, avec leur usage et les composants qui s’en servent.

Surfaces

Clair / sombre	Token	Usage	Utilisé par
	`--bg` #f4f5f2 · #111513	Fond de la page, derrière la carte et les panneaux.à valider	styles globauxDayPlanHomeCountriesLeaveConfirmShareDialogTrackViewWelcome
	`--panel` #ffffff · #1a201d	Fond des panneaux, cartes, menus et boîtes de dialogue ; aussi l’option choisie d’un Segmented.à valider	styles globauxAlertExtrasAlertListCameraControlClimbListCountriesInfoDayPlanDetourBlockDetourGlyphEditBannerEngineInfoExemplePageFeasibleGuideHomeCountriesHomeDemoHomeFeaturesLeaveConfirmLevelInfoMap3DMapContentMenuMapLayersMenuModalPhotoCardPrivacyProfileRouteDockSegmentedServiceStatusShareDialogSidebarTechLadderTourTrackViewWelcome
	`--line` #e2e5e0 · #2b332f	Bordures et séparations fines entre blocs (champs, sections repliables, boutons).à valider	styles globauxAlertExtrasAlertListCameraControlClimbListCountriesInfoDataSourcesDayPlanEngineInfoExemplePageFeasibleGuideGuidesHomeCountriesHomeDemoHomeFeaturesMap3DMapLayersMenuPrivacyProfileRouteDockServiceStatusShareDialogSidebarTechLadderTourTrackViewWelcome
	`--grid` rgba(0, 0, 0, 0.07) · rgba(255, 255, 255, 0.08)	Lignes de grille du profil d’altitude, lues par le code du graphique.à valider	ProfileRouteDock
	`--chip` rgba(40, 70, 30, 0.08) · rgba(200, 230, 210, 0.07)	teinte translucide plutôt qu'une couleur pleine : même contraste sur un panneau opaque ou sur les panneaux flottants semi-transparents (sinon la puce se confond avec eux)	AlertExtrasAlertListCameraControlClimbListCountriesInfoDayPlanEditBannerEngineInfoFeasibleGuideHomeCountriesHomeFeaturesLeaveConfirmLevelInfoMap3DMapContentMenuMapLayersMenuModalPhotoCardRouteDockSegmentedServiceStatusShareDialogSidebarTechLadderTourTrackViewWelcome

Texte

Clair / sombre	Token	Usage	Utilisé par
	`--text` #1c2321 · #e7ece9	Texte courant.à valider	styles globauxAboutAlertExtrasAlertListBalconyFigureCameraControlClimbListCountriesInfoDayPlanDetourBlockDetourGlyphEngineInfoExemplePageFeasibleGuideFootNoteGuidesHomeCountriesHomeDemoHomeFeaturesLeaveConfirmLevelInfoMap3DMapContentMenuMapLayersMenuModalPhotoCardPrivacyProfileRouteDockSegmentedServiceStatusShareDialogSidebarTechLadderTrackViewWelcome
	`--muted` #5f6b66 · #97a39d	Texte de second plan, libellés, légendes et options non choisies.à valider	styles globauxAboutAlertExtrasAlertListBalconyFigureCameraControlClimbListCountriesInfoDataSourcesDayPlanDetourBlockDetourGlyphEditBannerEngineInfoExemplePageFeasibleGuideFootNoteGuidesHomeCountriesHomeDemoHomeFeaturesLeaveConfirmLevelInfoMap3DMapContentMenuMapLayersMenuPhotoCardPrivacyProfileRouteDockSegmentedServiceStatusShareDialogSidebarTechLadderTourTrackViewWelcome

Carte

Clair / sombre	Token	Usage	Utilisé par
	`--detour` #0891b2 · #22d3ee	Tracé et repères des alternatives proposées à une portion de trace (détours).à valider	AlertExtrasAlertListDetourBlockDetourGlyphHomeFeaturesSidebarTrackView
	`--detour-ink` #0e7490 · #67e8f9	Texte et liens des alternatives, plus foncé que --detour pour rester lisible.à valider	AlertExtrasAlertListDetourBlockHomeFeaturesRouteDockSidebarTrackViewWelcome
	`--replaced` #ec4899 · #f472b6	portion de la trace d'origine remplacée par une alternative appliquée	EditBannerSidebar

Action

Clair / sombre	Token	Usage	Utilisé par
	`--accent` #2f6b4f · #5fb48a	Action principale (bouton plein), liens et anneau de focus clavier.à valider	styles globauxAboutAlertExtrasAlertListCameraControlClimbListCountriesInfoDataSourcesDayPlanDetourBlockEditBannerEngineInfoExemplePageFeasibleGuideGuidesHomeCountriesHomeFeaturesLeaveConfirmMap3DMapContentMenuMapLayersMenuPrivacyProfileRouteDockServiceStatusShareDialogSidebarTourTrackViewWelcome
	`--accent-ink` #ffffff · #0d1411	Texte et icônes posés sur un fond --accent.à valider	CameraControlEditBannerExemplePageLeaveConfirmMap3DShareDialogSidebarTourTrackViewWelcome

Difficulté

Clair / sombre	Token	Usage	Utilisé par
	`--ok` #16a34a · identique en sombre	Verdict « Adaptée » et confirmations (aucun point d’attention, confiance élevée).à valider	AlertExtrasRouteDockSidebarTrackViewExemplePage (non déterminé)HomeDemo (non déterminé)ServiceStatus (non déterminé)
	`--engage` #d97706 · identique en sombre	Verdict « Engagée mais faisable » et passages qui demandent de l’expérience.à valider	RouteDockSidebarTrackViewDayPlan (non déterminé)ExemplePage (non déterminé)HomeDemo (non déterminé)ServiceStatus (non déterminé)
	`--exigeant` #dc2626 · identique en sombre	Verdict « Exigeante » et passages difficiles pour le niveau choisi.à valider	AlertExtrasAlertListClimbListDayPlanHomeFeaturesMapContentMenuRouteDockShareDialogSidebarTechLadderTrackViewWelcomeExemplePage (non déterminé)HomeDemo (non déterminé)ServiceStatus (non déterminé)
	`--inadapte` #a21caf · identique en sombre	Verdict « Non adaptée en l’état » et portions à faire à pied.à valider	RouteDockSidebarTrackViewExemplePage (non déterminé)HomeDemo (non déterminé)
	`--tech-black` #111827 · #e7ece9	« très difficile » / S3 : noir des pistes de ski, inversé en thème sombre pour rester visible	AlertListHomeFeaturesTechLaddertechStyle
	`--tech-black-ink` #ffffff · #111513	Texte posé sur --tech-black (niveau « très difficile », S3).à valider	AlertListHomeFeaturesTechLaddertechStyle

Statut des pays

Clair / sombre	Token	Usage	Utilisé par
	`--status-complet` var(--ok) · identique en sombre	Pays pris en charge complètement, sur la carte et la liste des pays. Renvoie à --ok.à valider	CountriesInfo (non déterminé)HomeCountries (non déterminé)
	`--status-beta` var(--engage) · identique en sombre	Pays pris en charge en bêta. Renvoie à --engage.à valider	CountriesInfoHomeCountriesServiceStatus
	`--status-degrade` #64748b · identique en sombre	Pays analysés avec des données moins précises (altitude ou réseau incomplets).à valider	CountriesInfoHomeCountriesServiceStatus