FREN
  • design
  • palette
  • design-tokens
  • quebec

Aurora Boréal : pourquoi zinc-950 + amber-500 ne sent pas le démo

Choisir une palette qui assume une identité québécoise sans tomber dans le cliché bleu-blanc-rouge.

Par Jescy Gratton 8 min de lecture

TL;DR — La palette Aurora (zinc-950 + amber-500) ne vient pas d’une tendance UI — elle découle de contraintes fonctionnelles : lisibilité élevée sur fond sombre, identité distincte dans l’espace OSBL/tech québécois, tokens nommés par usage (pas par couleur) pour éviter la dérive au fil des itérations. Voici le raisonnement derrière chaque décision de la palette.

La plupart des portfolios tech ont les mêmes couleurs. Fond blanc ou gris clair, accent en bleu ou en violet, typographie noire. C’est safe — et invisible.

Le défi : comment assumer une identité visuelle distincte sans tomber dans le cliché de la “québécité” (fleurs de lys, bleu-blanc-rouge) ni dans le flashy qui ne sert pas les clients cibles ?

Pourquoi le noir comme base

Le choix du zinc-950 (#09090b) comme couleur de fond n’est pas un choix esthétique — c’est un choix fonctionnel.

Rapport de contraste : Sur zinc-950, le blanc (#fafafa) donne un ratio de 19.5:1, bien au-dessus du minimum WCAG AA (4.5:1) et WCAG AAA (7:1). Sur fond blanc, pour atteindre AAA, on est limité à du presque-noir. Le sombre donne plus de liberté de contraste.

Réduction de la fatigue visuelle : Pour les développeurs et gestionnaires d’OSBL qui lisent du contenu technique, un fond sombre avec du texte lumineux réduit l’éblouissement sur les écrans modernes à haute luminosité. C’est mesurable — les IDEs ont basculé vers des thèmes sombres par défaut pour cette raison.

Différenciation : La majorité des sites institutionnels québécois (gouvernement, OSBL, PME) utilisent des fonds clairs. Un fond sombre positionne immédiatement le projet comme technique, sans avoir à l’écrire.

Pourquoi amber-500 comme accent

L’amber-500 (#f59e0b) a plusieurs propriétés utiles :

  • Chaleur : Contrairement au bleu froid (technocratique) ou au vert (environnement/santé), l’ambre est associé à l’artisanat, l’excellence locale, et la chaleur humaine — cohérent avec le positionnement “développeur local au service des organismes québécois”.

  • Visibilité sur fond sombre : L’ambre reste très lisible sur zinc-950, contrairement au rouge (agressif) ou au vert (fatigue).

  • Sémantique subtile : L’ambre évoque l’or, la forêt boréale en automne, les lumières nordiques — sans que ce soit explicite. C’est une identité québécoise discrète, pas un cliché.

La règle que j’applique : une couleur d’accent doit fonctionner comme signal d’action (CTA, lien, badge) sans jamais être utilisée pour décorer. Si on peut supprimer l’accent sans perdre d’information, il est mal utilisé.

Tokens nommés par usage, pas par couleur

C’est la décision technique la plus importante du design system. Les tokens CSS sont nommés par leur rôle, pas par leur valeur :

/* ❌ À éviter : nommé par couleur */
--zinc-950: #09090b;
--amber-500: #f59e0b;
--zinc-100: #f4f4f5;

/* ✅ Nommé par usage */
--jg-bg: #09090b;          /* Fond principal */
--jg-bg-elevated: #18181b; /* Fond surélevé (cards, modals) */
--jg-bg-overlay: rgba(9, 9, 11, 0.85); /* Fond avec transparence (header) */
--jg-fg: #fafafa;          /* Texte principal */
--jg-fg-muted: #a1a1aa;    /* Texte secondaire */
--jg-fg-subtle: #71717a;   /* Texte tertiaire, labels */
--jg-accent: #f59e0b;      /* Action principale */
--jg-accent-hover: #d97706; /* État hover de l'accent */
--jg-border: #27272a;      /* Bordures */

L’avantage devient clair quand on veut ajouter un mode clair ou changer l’accent :

/* Mode clair — même noms de tokens, valeurs différentes */
[data-theme="light"] {
  --jg-bg: #ffffff;
  --jg-bg-elevated: #f4f4f5;
  --jg-fg: #09090b;
  --jg-fg-muted: #52525b;
  --jg-accent: #d97706; /* Amber plus sombre pour contraste sur blanc */
  --jg-border: #e4e4e7;
}

Tous les composants qui utilisent --jg-bg et --jg-fg basculent automatiquement. Aucun fichier composant à toucher.

CSS variables vs Tailwind config

Les deux approches sont valides, mais pour un monorepo multi-apps, les CSS variables ont un avantage décisif : elles sont accessibles dans n’importe quel fichier CSS, sans dépendance au runtime Tailwind.

Avec Tailwind config :

// tailwind.config.ts — doit être importé par chaque app
module.exports = {
  theme: {
    extend: {
      colors: {
        'jg-bg': '#09090b',
        'jg-accent': '#f59e0b',
      }
    }
  }
}

Avec CSS variables :

/* global.css — importé une fois, disponible partout */
:root {
  --jg-bg: #09090b;
  --jg-accent: #f59e0b;
}
<!-- N'importe quel composant Astro -->
<style>
  .card { background: var(--jg-bg-elevated); }
  .card:hover { border-color: var(--jg-accent); }
</style>

Les CSS variables sont aussi directement accessibles depuis JavaScript :

// Utile pour des animations ou des canvas
const accent = getComputedStyle(document.documentElement)
  .getPropertyValue('--jg-accent').trim();

Typographie : Plus Jakarta Sans

Le choix de Plus Jakarta Sans comme police principale découle de trois critères :

1. Variable font — Une seule police couvre tous les poids (300→900), ce qui réduit les requêtes réseau et permet des transitions fluides sur font-weight.

2. Lisibilité technique — La hauteur de x élevée et les formes ouvertes la rendent lisible aux petites tailles (code inline, labels de formulaire). C’est crucial pour un site qui présente du contenu technique.

3. Caractère sans genericité — Contrairement à Inter (omniprésente), Plus Jakarta Sans a une personnalité légèrement géométrique qui la distingue sans être exotique.

/* Import via Google Fonts avec subset latin-ext pour les caractères accentués FR */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300..900&display=swap&subset=latin-ext');

:root {
  --jg-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --jg-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
}

Le subset=latin-ext est important pour le français québécois : é, è, ê, à, â, ô, û, ç, œ — sans ce subset, ces caractères tombent en fallback sur la police système.

Ce que le design system évite

Pas de gradient aurora omniprésent — Les gradients cyan-violet sont partout en 2024-2025. Utilisé avec parcimonie (un seul endroit : le hero de l’accueil), pas comme motif répété.

Pas de glassmorphism lourd — Le header utilise un backdrop-filter: blur(12px) discret, pas des cards en verre partout. L’effet est réservé aux éléments flottants.

Pas de border-radius excessif — Les cards ont un border-radius: 12px (md), pas 24px. Le minimalisme évite que tout ressemble à un SaaS B2B générique.

Pour aller plus loin