SOLUTIONS EN ACCESSIBILITE ACCESSIBILITY SOLUTIONS
Charte graphique · source de verite

L’accessibilité,
avec la bonne pente.

Le système visuel officiel de Go Rampe — fabricant québécois de rampes d’accès en aluminium et en bois. Ambre franc, charbon solide, ton chaleureux d’atelier. Conçu pour la dignité et l’autonomie des personnes.

MarqueGo Rampe inc.
Fondé2012 · Lévis, QC
VersionCharte v2.0
Date2026-06-23
Aluminium × bois Bilingue FR / EN PMR · aînés RBQ 5695-2260-01 Québec & Canada
01 — ADN de marque

Ce que Go Rampe porte

Une mission concrète — rendre les lieux accessibles — servie par un savoir-faire d’atelier et une image chaleureuse, jamais froide.

Mission

Concevoir et fabriquer des rampes qui redonnent l’autonomie. L’accessibilité est la raison d’être, pas un argument marketing.

Aluminium × bois

Deux matériaux, une expertise : la robustesse durable de l’aluminium, la chaleur naturelle du bois. Le positionnement signature.

Ancrage québécois

Fondé en 2012 à Lévis par Marc Lacasse. On dessert tout le Québec et le Canada, en français comme en anglais, avec une parole d’artisan.

Ton de marque

Fiable, chaleureux, concret, orienté solution. On parle de dignité et d’autonomie — jamais de pitié, jamais de jargon corporatif.

03 — Couleurs

Ambre & charbon

Deux couleurs officielles, confirmées par le logo 2025. Tout le système en découle : échelles dérivées, neutres chauds, couleurs sémantiques.

texte : voir tableau
Ambre Go Rampe
#FCB034
RVB 252·176·52 · signature
Charbon
#5F6062
RVB 95·96·98 · gris secondaire
Noir d’encre
#0D0D0C
RVB 13·13·12 · texte / logo
Crème / papier
#FFFBF5
RVB 255·251·245 · fond chaud
Couleurs officielles — références d’impression
CouleurHEXRVBCMJNPantone
Ambre Go Rampe#FCB034252 / 176 / 520 / 35 / 90 / 0137 U
Charbon Go Rampe#5F606295 / 96 / 980 / 0 / 0 / 77425 U
Noir d’encre#0D0D0C13 / 13 / 120 / 0 / 0 / 95Black 6 U

Cliquez une pastille pour copier son code hexadécimal.

Échelle d’ambre — 400 est la couleur officielle
50
100
200
300
400
500
600
700
800
900
Échelle de charbon / gris — 500 est le charbon officiel, 900 le noir d’encre
50
100
200
300
400
500
600
700
800
900
Couleurs sémantiques — accordées à la marque, lisibles sur crème
Succès
#2E7D52 / fond #E5F3EB
Avertissement
#B47F28 / fond #FCF1DE
Erreur
#B4322B / fond #F8E6E4
Information
#2B5C8A / fond #E4EFF7
Contraste WCAG 2.2 — ratios réels, honnêtes (AA normal ≥ 4,5:1 · AA grand texte ≥ 3:1)
AperçuPaireRatioVerdict
Aa — soumissionAmbre #FCB034 sur Noir #0D0D0C10,55:1AA
Aa — boutonNoir #0D0D0C sur Ambre #FCB03410,55:1AA
Aa — corpsNoir #0D0D0C sur Crème #FFFBF518,21:1AA
Aa — texte douxCharbon #5F6062 sur Crème #FFFBF56,11:1AA
Aa — lien ambreAmbre-700 #8E6522 sur Crème #FFFBF55,05:1AA
Aa — sur charbonBlanc sur Charbon #5F60626,29:1AA
Aa — gros titreAmbre #FCB034 sur Charbon #5F60623,42:1AA grand seulement
Aa — à éviterAmbre #FCB034 sur Blanc1,84:1Échec · ne pas utiliser pour du texte
Aa — à éviterBlanc sur Ambre #FCB0341,84:1Échec · texte blanc interdit sur ambre

Règle d’or : l’ambre #FCB034 est une couleur d’aplat et d’accent, pas une couleur de texte sur fond clair. Pour du texte ambre sur crème ou blanc, utiliser l’Ambre-700 (#8E6522). Sur l’ambre, le texte doit toujours être noir d’encre, jamais blanc. L’ambre sur charbon ne passe qu’en grand texte (≥ 24 px ou 19 px gras).

04 — Typographie

Gill Sans & Mulish

Gill Sans est la police de marque officielle (impression, papeterie, signalétique). Pour le web, on charge Mulish, l’alternative humaniste gratuite la plus proche.

GO RAMPE
Police de marque · impression

Gill Sans — humaniste britannique classique. Semi Bold pour « GO » et les titres forts, Light pour « RAMPE » et les display légers, Regular pour la signature et le corps.

Semi BoldRegularLight
Go Rampe
Alternative web · Google Fonts

Mulish — choisie pour sa structure humaniste à faible contraste de trait, sa grande hauteur d’œil et ses formes ouvertes, très proches de Gill Sans tout en restant excellente à l’écran. C’est la police de rendu de ce document.

300400500600700800

Pile de substitution : font-family: 'Gill Sans', 'Gill Sans Nova', 'Mulish', sans-serif;

Display / H1La bonne penteMulish 300/700 · clamp 34–56 px · LH 1,1
Titre / H2Rampes en aluminiumMulish 600 · 34 px · LH 1,15
Sous-titre / H3Sur mesure, installéMulish 600 · 22 px · LH 1,3
CorpsUne rampe bien conçue redonne l’autonomie au quotidien.Mulish 400 · 16–18 px · LH 1,6
Petit / légendeRBQ 5695-2260-01 · Lévis, QCMulish 400 · 13 px · LH 1,5
Étiquette / monoObtenir une soumissionJetBrains Mono · 12 px · +0,1em

Lisibilité pour public aîné et PMR

  • Corps de texte à 16 px minimum, 18 px recommandé pour les pages publiques.
  • Interligne généreux : 1,6 pour le corps, 1,1–1,3 pour les titres.
  • Éviter les gris trop pâles : texte courant au minimum en Charbon #5F6062 sur crème (6,1:1).
  • Pas de texte en capitales sur de longs blocs ; réserver les capitales aux étiquettes courtes.
  • Longueur de ligne confortable : 60–75 caractères.
05 — Iconographie & biseau

Le biseau, motif signature

Le biseau ambre du logo — une pente ascendante — est l’ADN graphique de la marque. Il rappelle la rampe et sa pente sécuritaire de 1:12.

1:12La pente accessible — reprise comme angle de coupe, séparateur de section et accent graphique.
Style : linéaire Trait : 1,6 px Extrémités : arrondies Grille : 24 × 24 Accent : ambre, parcimonieux
Rampe
Domicile
Mobilité
Aluminium
Bois
Conforme
Sécurité
Sur mesure
Installation
Lévis
Soumission
Contact
06 — Espacement & grille

Rythme & structure

Une échelle d’espacement en base 4, une grille à 12 colonnes et trois rayons de coin doux pour un rendu d’atelier soigné.

Échelle d’espacement (base 4 px)
4 px--sp-1
8 px--sp-2
12 px--sp-3
16 px--sp-4
24 px--sp-6
32 px--sp-8
48 px--sp-12
64 px--sp-16
96 px--sp-24
Grille · 12 colonnes, gouttière 24 px
  • Largeur de contenu max 1180 px
  • Gouttière 24 px · marge mobile 22 px
  • Colonnes 12 (4 ou 6 en tablette/mobile)
Rayons de coin
--r-sm · 6 px
--r-md · 12 px
--r-lg · 20 px
--r-pill · boutons
07 — Composants UI

La boîte à outils

Tokens appliqués : boutons, badges, cartes produit, champ de formulaire et bandeau d’appel à l’action. Rendu réel en HTML/CSS.

Boutons
Badges & pastilles
Aluminium Bois Conforme RBQ Sur mesure Installé à Lévis
Cartes produit

Rampe modulaire aluminium

Sans entretien, installée en quelques heures. Pente sécuritaire 1:12, garde-corps conformes. Idéale en location ou achat.

Sur soumission · installée, garantie

Rampe en bois sur mesure

Intégrée à l’architecture de la maison, finition chaleureuse. Conçue, fabriquée et posée par notre atelier.

Sur soumission · conception incluse
Champ de formulaire
On vous rappelle dans les 24 h ouvrables.

Un projet d’accessibilité? Parlons-en.

Soumission gratuite, partout au Québec · sans frais 1-888-957-2673

08 — Ton & voix

Comment Go Rampe parle

Chaleureux et concret, jamais condescendant. On vend de l’autonomie et de la tranquillité d’esprit, pas un produit technique.

On dit / on ne dit pas
« Redonnez-vous l’autonomie chez vous. »
« Solution pour personnes à mobilité réduite. »
« On conçoit, on fabrique, on installe. »
« Fournisseur de solutions clés en main. »
« Aluminium ou bois : on vous guide. »
« Gamme de produits multi-matériaux. »
« Une soumission gratuite, sans pression. »
« Demandez votre devis personnalisé. »
Principes d’écriture FR / EN
  • Concret avant tout — on nomme le bénéfice réel (entrer chez soi, sortir seul).
  • Dignité — la personne d’abord, jamais réduite à son handicap.
  • Parole d’artisan — « on » plutôt que « nous », phrases courtes, mots du métier.
  • Bilingue équivalent — l’anglais garde la même chaleur : « We design it, build it, install it. »
  • Pas de superlatifs creux — on prouve (depuis 2012, RBQ, garantie) au lieu de promettre.
CTA principal
Obtenir une soumission
CTA téléphone
Parler à un conseiller
Réassurance
Gratuit · sans pression
09 — Accessibilité

WCAG 2.2 AA, par principe

L’accessibilité est la mission de Go Rampe : elle doit aussi se vivre dans ses interfaces. Engagement minimal niveau AA.

Focus visible

Tout élément interactif reçoit un contour ambre net de 3 px au clavier. Jamais de outline:none sans remplaçant.

outline: 3px solid #B47F28

Cibles ≥ 44 px

Boutons et liens d’action atteignent au moins 44 × 44 px de zone cliquable — crucial pour les mains moins précises.

min-height: 44px · padding généreux

Contraste AA

Texte courant ≥ 4,5:1, grand texte ≥ 3:1. L’ambre reste un accent ; le texte s’appuie sur noir, charbon ou ambre-700.

cf. tableau de contraste — section 03

Mouvement réduit

La feuille de style respecte prefers-reduced-motion : animations et transitions coupées pour qui le demande.

@media (prefers-reduced-motion: reduce)

Structure & alt

Hiérarchie de titres logique, libellés explicites sur les champs, textes alternatifs sur le logo et les images porteuses de sens.

aria-label sur SVG signifiants

Taille de texte

Corps à 16 px minimum, unités relatives (rem), zoom 200 % sans perte de contenu ni de fonction.

font-size en rem · pas de px figé
10 — Note de cohérence

Mise au point site vs charte

Ce document est la source de vérité. Le site actuel (refonte Astro) présente quelques écarts à aligner.

La charte officielle prime

La refonte Astro emploie aujourd’hui un ambre légèrement différent et des polices Fraunces / Hanken Grotesk. Ces choix doivent converger vers les valeurs officielles ci-dessous pour que la marque reste cohérente du papier au web.

ÉlémentSite actuel (Astro)Charte officielle — à appliquer
Ambre signature#E8951C#FCB034 (Pantone 137 U)
Police d’affichageFrauncesGill Sans / web : Mulish
Police de corpsHanken GroteskGill Sans / web : Mulish
Neutre foncédivers#0D0D0C + charbon #5F6062

Action recommandée : mettre à jour les tokens du thème Astro (couleur d’accent et familles de polices) pour refléter cette charte. Tant que ce n’est pas fait, c’est ce document — pas le site — qui fait foi.