BRAND IDENTITY
Identité de marque Rankstead
Charte d'utilisation du logo, palette de couleurs, typographie, do/don't, voice & tone. Pour les graphistes, intégrateurs et équipes marketing.
Toute reproduction de l'identité Rankstead doit porter la mention © Rankstead / Northken, Montréal. Pour les communiqués et articles, ajouter : Données hébergées au Canada. Conforme Loi 25 et RGPD.
Palette de couleurs
La palette est servie par le runtime Next.js via les variables CSS --rk-*. Source canonique : /press-kit/brand/color-palette.json.
Couleurs principales
- Deep
#0a1628— surfaces sombres, header, footer dark - Electric
#0ea5e9— CTA primaire, liens, focus - Gold
#d4a853— badges, certifications, accent premium
Couleurs neutres
- Void
#020408— fond très sombre - White
#f8fafc— texte sur fond sombre - Slate 50-900 — palette Tailwind slate complète
Typographie
Deux familles : Inter (UI, corps de texte) et JetBrains Mono (mono, badges, code). La spécification typographique complète (familles, échelles, hiérarchies, do/don't) est rendue ci-dessous.
Voice & tone
Voix : sobre, factuel, sans bullshit. Pas de superlatifs non vérifiables. Pas d'engagement sans conditions.
Ton : professionnel accessible. Tutoiement proscrit. Vouvoiement de rigueur.
Do
- Utiliser les couleurs avec leur rôle prévu (Electric = CTA, Deep = fond, Gold = badge)
- Respecter l'espace de respiration minimum autour du logo
- Garder la hiérarchie sobre (3 niveaux max par page)
Don't
- Recolorer le logo (utiliser la version mono si N&B requis)
- Étirer ou déformer les proportions du logo
- Ajouter un effet (ombre, glow, dégradé)
- Placer sur une image en fond sans couche d'opacité
- Utiliser plus de 2 familles (Inter + JetBrains Mono uniquement)
Pour aller plus loin
Le PDF brand-guidelines (15-25 pages) est en cours de design. En attendant, ce Builder page constitue la source de vérité pour les graphistes et intégrateurs.
Spécification typographique complète
Source canonique pour graphistes et intégrateurs. La spec technique complète (familles, échelles, hiérarchies, do/don't) est rendue ci-dessous, ainsi qu'disponible en téléchargement Markdown brut pour intégration dans vos pipelines.
Familles
| Usage | Famille | Source | Fallback |
|---|---|---|---|
| UI / corps de texte | Inter (variable, italique inclus) | Google Fonts auto-servie | -apple-system, BlinkMacSystemFont, sans-serif |
| Code / mono / presse badges | JetBrains Mono | Google Fonts auto-servie | 'Fira Code', 'Courier New', monospace |
Échelle (corps de texte)
| Token | Taille (rem) | px @ 16px base | Line height | Usage |
|---|---|---|---|---|
text-xs | 0.75 | 12 | 1.5 | Captions, badges, labels mono |
text-sm | 0.875 | 14 | 1.6 | UI secondaire, metadata |
text-base | 1.0 | 16 | 1.7 | Corps de paragraphe standard |
text-lg | 1.125 | 18 | 1.6 | Sous-titres |
text-xl | 1.25 | 20 | 1.5 | H3 |
text-2xl | 1.5 | 24 | 1.4 | H2 |
text-3xl | 1.875 | 30 | 1.3 | H1 secondaire |
text-4xl | 2.25 | 36 | 1.25 | H1 |
text-5xl | 3.0 | 48 | 1.2 | Hero H1 |
text-6xl | 3.75 | 60 | 1.1 | Hero H1 large |
Échelle (mono / presse)
0.6875rem(11px) — eyebrow letterspaced0.8125rem(13px) — métadonnées presse
Hiérarchie type
- H1 hero : Inter 700, 3-4rem, letter-spacing -0.025em
- H1 page : Inter 700, 2.25rem
- H2 section : Inter 600, 1.5rem, letter-spacing -0.02em
- H3 sous-section : Inter 600, 1.25rem
- Body : Inter 400, 1rem, line-height 1.7
- Caption : Inter 400, 0.875rem, color text-muted
- Code / mono : JetBrains Mono 500, 0.875rem
Do
- Garder la hiérarchie sobre (3 niveaux max par page)
- Utiliser le tracking négatif (-0.02em à -0.025em) pour les H1/H2
- Préférer
text-balancepour les titres sur 2+ lignes
Don't
- Utiliser plus de 2 familles (Inter + JetBrains Mono uniquement)
- Italique pour les H1/H2 (réserver aux citations et termes étrangers)
- Souligner autre chose que des liens
- Compresser le letter-spacing en dessous de -0.04em (devient illisible)