Copié !
Document de référence

Charte Graphique

Référence visuelle et design system du site Alternative RVB. Cliquez sur n'importe quelle couleur pour copier le code hexadécimal.

Design system

Palette principale

Couleurs de fond, de surface et de texte qui constituent la base de l'interface.

Fonds et surfaces

Cliquer pour copier
Base
#0f172a
slate-900
Cliquer pour copier
Carte
black/20
Composants
Cliquer pour copier
Secondaire
#1e293b
slate-800
Cliquer pour copier
Tertiaire
#334155
slate-700

Texte (echelle slate - source: _markdown-content.scss)

Cliquer pour copier
Blanc
#ffffff
Titres H1-H4
Cliquer pour copier
slate-50
#f8fafc
Corps principal
Cliquer pour copier
slate-300
#cbd5e1
Texte secondaire
Cliquer pour copier
slate-400
#94a3b8
Texte discret
Cliquer pour copier
slate-500
#64748b
Desactive

Design system

Accents par section

Chaque section du site a une couleur d'accentuation dédiée. Ces couleurs sont utilisées pour les icones, textes actifs, bordures et fonds de composants.

Couleurs principales (texte, icones)

Copier
red-400
#f87171
Blog
Copier
purple-400
#c084fc
Portfolio
Copier
green-400
#4ade80
Outils / Services
Copier
blue-400
#60a5fa
Accueil / Contact
Copier
orange-400
#fb923c
Contact / CTA
Copier
yellow-400
#facc15
Formation

Variantes medium (fonds, hover)

Copier
red-500
#ef4444
Copier
purple-600
#9333ea
Copier
green-500
#22c55e
Copier
blue-500
#3b82f6
Copier
orange-500
#f97316
Copier
yellow-500
#eab308

Nebula (fond animé homepage - source: _nebula.scss)

Copier
Nebula primary
#3b82f6
blue-500
Copier
Nebula primary dark
#1d4ed8
blue-700
Copier
Nebula secondary
#9333ea
purple-600
Copier
Nebula accent
#10b981
emerald-500

Design system

Gradients

Utilisés pour les lignes d'accentuation, titres en valeur, CTA et fonds décoratifs.

Gradients decoratifs (infographie, composants)

Accent principal
#3b82f6 → #6366f1
Lignes, bordures, boutons
Headline
#60a5fa → #818cf8
Titres en valeur
CTA
#2563eb → #4f46e5
Blocs d'appel a l'action

Gradients page-header par section (source: page-header.html)

Blog
gray-900 → red-900/20
from-gray-900 to-red-900/20
Portfolio
gray-900 → purple-900/20
from-gray-900 to-purple-900/20
Outils
gray-900 → green-900/20
from-gray-900 to-green-900/20
Accueil
gray-900 → blue-900/20
from-gray-900 to-blue-900/20

Design system

Typographie

Police unique: Inter Variable (100-900). Stockée en local pour la performance et la conformité RGPD. Code: JetBrains Mono / Fira Code.

h1
48px / 800
text-5xl
Titre principal
h2
36px / 700
text-4xl
Titre de section
h3
24px / 700
text-2xl
Titre de sous-section
h4
20px / 600
text-xl
Titre de composant
body
18px / 400
lh 1.8
Développeur web freelance depuis 2017. Ce qui compte pour moi: analyser, comprendre et partager. Sites rapides, accessibles et optimisés pour le SEO.
small
14px / 400
text-sm
Métadonnées, dates, labels discrets
label
11px / 600
uppercase / ls +0.1
Titre de catégorie
code
14px mono
JetBrains Mono
const site = new AlternativeRVB();

Design system

Composants

Les briques de base de l'interface. Fond translucide, bordure white/10, backdrop-blur-md, radius rounded-xl.

Cartes

Image 16:9
Blog
Titre de l'article de blog
Description courte de l'article, limitée à 3 lignes maximum pour garder les cartes homogènes.
15 mars 2025 Lire l'article
Image 16:9
Portfolio
Nom du projet
Description du projet réalisé, technologies utilisées et résultats obtenus.
Voir le projet 2024
Image 16:9
★★★ Outils
Nom de l'outil
Description de l'outil, ses points forts et son usage recommandé.
Accéder au site Freemium

Boutons

Primary
Sections
Ghost

Badges et pills

Hugo React JavaScript Performance Contact Développement web freelance

Design system

Tokens UI

Valeurs de base pour les bordures, rayons et couches de transparence.

Border radius

sm
4px
md
8px
lg
12px
xl
16px
full
9999px

Borders

white/5 — Séparateurs très discrets
white/10 — Bordure standard (cartes, nav, footer)
white/20 — Bordure visible (h2, tableaux)

Couches de transparence (surfaces)

white/30.03
white/50.05
white/100.1
white/200.2
black/20Cartes
black/30Hover

Backdrop blur

backdrop-blur-sm — Header sticky, menus
backdrop-blur-md — Cartes, composants