Charte graphique

Les règles visuelles d'alternative-rvb.com : fond quasi noir, un seul accent tiré du logo, la police Geist et des filets fins à la place des ombres. Cliquer sur une valeur la copie.

Rouge

Triangle du haut, réservé au logo

Vert

Rond central, réservé au logo

Bleu

Triangle du bas, devenu l'accent unique de l'interface

Logo

Un R construit autour de trois formes, une par initiale : rouge, vert, bleu. Toujours posé sur un fond uni, sans déformation ni changement de couleur.

Version 2026, fond transparent

Le logo actuel, utilisé dans l'en-tête du site. Sur fond clair, utiliser la variante noire.

Fond sombre

Fond intermédiaire

Fond clair

Avec rond blanc intégré

Pour les avatars et les supports où le logo doit se détacher d'un fond quelconque.

Fond sombre, monochrome blanc

Fond intermédiaire, rond restauré

Fond clair, couleurs pleines

Couleurs

Un fond quasi noir, une surface à peine plus claire pour les cartes, et des neutres zinc pour le texte. Les sections se séparent par un filet, jamais par une alternance de fonds.

Fonds et filets

Texte

Contraste mesuré sur la surface #111113. Le minimum WCAG AA est de 4,5:1.

Accent et contrastes

Une seule couleur d'accent : le bleu exact du logo en accent-500, éclairci vers le blanc et foncé vers le noir. Les anciens noms (red, purple, green, blue...) pointent tous sur cette échelle dans tailwind.config.js.

Échelle accent

Ratio du texte posé sur la surface #111113, et du texte blanc posé sur la couleur pour les fonds de bouton.

Associations autorisées

Usage	Classes	Contraste
Texte, lien ou icône en accent	`text-accent-400`, `text-accent-300`	7,04:1 et 9,49:1
Bouton plein	`bg-accent-500 text-white`	5,89:1
Bouton plein au survol	`hover:bg-accent-600`	7,83:1
Badge teinté	`bg-accent-500/20` + `text-accent-400`	5,99:1
Bleu du logo en texte	`text-accent-500`	3,2:1, interdit
Texte blanc sur accent clair	`bg-accent-400 text-white`	2,68:1, interdit

Typographie

Deux familles de Vercel, auto-hébergées dans static/fonts/ (aucun CDN, conformité RGPD). Titres en semi-gras avec un interlettrage resserré, jamais en gras.

Aa Gg 123

Geist

Titres, texte courant, boutons. Police variable 100 à 900.

Aa Gg 123

Geist Mono

Surtitres, chiffres clés, code, valeurs techniques.

Échelle

Titre d'accueiltext-4xl sm:text-5xl lg:text-7xl semi-gras, tracking-tighter

Consultant & Formateur Digital

Titre de pagetext-3xl sm:text-4xl lg:text-5xl semi-gras

Création de site internet à Marseille

Titre de sectiontext-3xl sm:text-4xl semi-gras, tracking-tight

Ce que je réalise

Sous-titre d'articletext-2xl lg:text-3xl semi-gras

Ouvrir et gérer une base

Texte courant16 px, text-gray-200 dans les articles

Développeur web freelance depuis 2017. Ce qui compte pour moi : analyser, comprendre et partager. Des sites rapides, accessibles et pensés pour le référencement.

SurtitreGeist Mono, tracking-widest, text-accent-400

Alternative RVB

Chiffre cléGeist Mono, text-2xl font-medium

Composants

Reproduction des briques du site avec leurs classes Tailwind. Pas d'effet de flou ni de dégradé décoratif : la profondeur vient des filets et de la surface.

Boutons

Un seul bouton plein par zone. L'icône directionnelle se place après le texte, une icône de nature (mail, github) avant.

Démarrer un projet Voir les réalisations

bg-accent-500 text-white rounded-lg px-5 py-3 hover:bg-accent-600

border border-white/[.14] text-white rounded-lg px-5 py-3 hover:bg-white/5 hover:border-white/25

Carte

Blog, outils et portfolio partagent la même carte. Au survol, seul le fond s'éclaircit.

Tester WordPress en local avec Docker

MySQL, PhpMyAdmin et WP-CLI prêts en 5 minutes, sans installer PHP.

Lire l'article

bg-surface border border-white/[.08] rounded-xl hover:bg-white/5

Badges

Développement Web # docker # wordpress Linux / DevOps

Catégorie : bg-accent-500/10 border border-accent-400/20 text-accent-400 rounded-md

Tag : bg-gray-500/20 text-gray-300 rounded-md

En-tête d'article : bg-accent-900/30 text-accent-300 rounded-full

Alerte

Shortcode alert ou syntaxe > [!NOTE]. Toutes les variantes prennent la couleur d'accent ; le titre est une étiquette, pas un titre de section.

Information

PowerShell interprète différemment les guillemets doubles dans certains cas.

alert-box bg-accent-500/10 border border-accent-500/30 rounded-xl p-4

Bloc de code

Thème Dracula, généré au build par css.ChromaStyles.

import express from 'express'
const app = express()
app.listen(3000)

Formes et règles

Des rayons resserrés et hiérarchisés : petit pour les éléments interactifs, moyen pour les conteneurs.

Rayons

rounded-lg 6 px
boutons, badges

rounded-xl 10 px
cartes, alertes

rounded-2xl 12 px
grands encarts

rounded-full
pastilles

À faire, à éviter

Séparer les sections par un filet border-b border-white/[.08], sur un fond uni.
Garder une seule couleur d'accent. Ne pas réintroduire de couleur par section.
Pas de flou décoratif, pas de dégradé animé, pas d'ombre portée comme élément de style.
Icônes Lucide avec aria-hidden="true". Dans les boutons d'appel à l'action, toujours une flèche après le texte.
Un seul h1 par page, puis des niveaux de titres sans saut.
Toute classe ajoutée en JavaScript doit figurer dans la safelist de postcss.config.js.