Douze couleurs. Surfaces opaques. Le commutateur ne change que le cyan.
La palette tient en douze nuanciers. Les ratios sont la luminance relative WCAG 2.x, arrondie au centième, seuils inclusifs.
Toile
--yc-bgFond 2
--yc-bg-2Surface 1
--yc-surface-1Surface 2
--yc-surface-2Texte 1
--yc-text-1Texte 2
--yc-text-2Texte 3
--yc-text-3Filet
--yc-lineAccent
--yc-accentAccent survol
--yc-accent-hoverErreur
--yc-dangerhtml[data-brand="doc4geeks"] {
--yc-accent: #06b6d4;
--yc-accent-hover: #67e8f9;
}Icône coche en cyan. Aucun vert de validation.
Texte 1 et icône. Pas de jaune.
Texte 1 et icône. Pas de bleu séparé.
Message de formulaire seulement. Exemple : indiquez un domaine.
Surface 1, filet, texte 2.
Texte cyan, bordure cyan à 30 %, fond transparent.
Systèmes en production.
Blanc #fafafa vers cyan #22d3ee. Réservé à la seconde ligne d'un titre.
| Aperçu | Paire | Ratio | AA | AAA | AA grand |
|---|---|---|---|---|---|
| Titre | Texte 1 sur toile | 19.32 | Pass | Pass | Pass |
| Titre | Texte 1 sur fond 2 | 19.06 | Pass | Pass | Pass |
| Titre | Texte 1 sur surface 1 | 18.12 | Pass | Pass | Pass |
| Titre | Texte 1 sur surface 2 | 17.03 | Pass | Pass | Pass |
| Corps | Texte 2 sur toile | 7.87 | Pass | Pass | Pass |
| Corps | Texte 2 sur fond 2 | 7.76 | Pass | Pass | Pass |
| Corps | Texte 2 sur surface 1 | 7.38 | Pass | Pass | Pass |
| Corps | Texte 2 sur surface 2 | 6.93 | Pass | Fail | Pass |
| Méta | Texte 3 sur toile | 5.89 | Pass | Fail | Pass |
| Méta | Texte 3 sur fond 2 | 5.81 | Pass | Fail | Pass |
| Méta | Texte 3 sur surface 1 | 5.53 | Pass | Fail | Pass |
| Méta | Texte 3 sur surface 2 | 5.19 | Pass | Fail | Pass |
| Accent | Accent sur toile | 11.16 | Pass | Pass | Pass |
| Accent | Accent sur fond 2 | 11.01 | Pass | Pass | Pass |
| Accent | Accent sur surface 1 | 10.46 | Pass | Pass | Pass |
| Accent | Accent sur surface 2 | 9.83 | Pass | Pass | Pass |
| Bouton | #05070a sur bouton blanc #ffffff | 20.17 | Pass | Pass | Pass |
| WA | #05070a sur WhatsApp | 10.17 | Pass | Pass | Pass |
| Interdit | Texte 1 sur WhatsApp | 1.90 | Fail | Fail | Fail |
| Erreur | Danger sur surface 1 | 5.82 | Pass | Fail | Pass |
Texte 3 #8a8a93 : 5.89:1 sur la toile, 5.19:1 sur surface 2. AA passe, AAA non. Les autres paires sont revérifiées. Le bouton du système utilise #fafafa, ratio 19.32, même verdict que le blanc pur. Doc4Geeks (#06b6d4 sur la toile) : 8.31:1, AA et AAA.
Ces teintes ne sont pas des tokens. Elles restent barrées pour qu'on les reconnaisse.
Dégradé multicolore, barré.
Inter pour le texte. JetBrains Mono pour la méta, le code et les sourcils. Le 900 est réservé au h1 du hero.
Des systèmes qui tiennent.
Je construis des systèmes qui tiennent en production.
Montrer le travail, puis le discours.
Doc4Shop, catalogues WhatsApp.
Ingénieur logiciel. Automatisation et IA. Fondateur de Doc4Geeks.
Je transforme une tâche répétitive en un système qui tourne tout seul, et je reste jusqu'à ce que les équipes s'en servent vraiment.
Lead Technical Engineer, Yaoundé, hybride.
Ouvert aux échanges
n8n, Supabase, Docker
Corps 400. Navigation 500. Boutons et h3 700. Titres de section 800. 900 pour le h1 du hero seulement.
Base 4px. Conteneur 1200px, gouttière 24px, douze colonnes dès 768px.
Quatre rayons. Ombres noires, faibles. Deux glows cyan, et rien d'autre.
Deux niveaux, sur la photo, et nulle part ailleurs. Le header sticky, puis la carte flottante du hero.
Surface à 88 %, flou 20px. Réservé à la barre fixe.
glass.headerSurface à 92 %, flou 16px. Workflow n8n, Doc4Shop.
glass.floatLucide, trait 1.5, currentColor. Tailles 16, 20 et 24. Pas de pastille autour.
Courbe unique, cubic-bezier(0.23, 1, 0.32, 1). Survolez une piste. Le mouvement réduit fige la translation.
--yc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);Pointeur 12px, seulement sur le hero. Coupé si prefers-reduced-motion.
Quatre ratios. L'overlay est un dégradé noir, du transparent vers la toile.
