Atomes

Boutons

Plein clair pour Me contacter. Le vert ne sert qu'à WhatsApp.

Variantes, tailles, états .yc-btn

Me contacter Écrire sur WhatsApp Voir mes projets Tous les articles

Me contacter Voir mes projets

Primaire

Défaut
Survol
Focus
Actif
Désactivé
Chargement

WhatsApp

Défaut
Survol
Focus
Actif
Désactivé
Chargement

Contour

Défaut
Survol
Focus
Actif
Désactivé
Chargement

Ghost

Défaut
Survol
Focus
Actif
Désactivé
Chargement

Lien

Défaut
Survol
Focus
Actif
Désactivé
Chargement

Accessibilité. Anneau 2px cyan, décalage 2px. Le survol ne grise pas le texte. Désactivé : opacité 0,4. Chargement : libellé gardé, aria-busy. Le sm (36px) reste hors des appels de page.

Sanity. yc.button : label, href, variant (primary, wa, outline, ghost, link), size (sm, md, lg), icon, iconPosition. WhatsApp lit siteSettings.whatsappUrl.

<a class="yc-btn yc-btn--wa yc-btn--md" href="https://wa.me/">
  <!-- SANITY: siteSettings.whatsappUrl -->
  <span class="yc-btn__label">Écrire sur WhatsApp</span>
</a>

Pastilles

Ouvert en cyan. Passé et en ligne restent neutres. Pas de couleur par catégorie.

Statuts .yc-badge

Ouvert aux échanges et aux interventions

Passé

En ligne

Accessibilité. Le point ouvert pulse très lentement et s'arrête si les animations sont réduites. Le statut ne repose pas sur la couleur seule : le mot est écrit.

Sanity. Champ status (open, past, online). Le libellé ouvert est fixe, pas un champ libre.

<p class="yc-badge yc-badge--open">
  <span class="yc-badge__dot" aria-hidden="true"></span>
  Ouvert aux échanges et aux interventions
</p>

Tags de stack

Les outils réellement utilisés. Fond neutre, sans pastille colorée.

Liste .yc-tag

n8n Supabase PostgreSQL Docker Cloudflare Next.js React TypeScript PHP WordPress WhatsApp

Accessibilité. Un tag n'est pas un bouton. S'il filtre, c'est une puce .yc-chip.

Sanity. yc.tag (string) ou un tableau tags.

<span class="yc-tag">n8n</span>
<span class="yc-tag">Supabase</span>
<span class="yc-tag">Docker</span>

Liens

Cyan, souligné. Dans un paragraphe, la graisse reste celle du texte.

Inline et externe .yc-link

Mettre une automatisation en production, pas en démo Défaut

Héberger les projets étudiants Survol

Ce que le CITS26 m'a appris Focus

Doc4Shop part de WhatsApp : le client parcourt un catalogue, puis commande dans la conversation.

Profil LinkedIn

Accessibilité. Le soulignement reste au focus. L'icône externe est décorative. target et rel portent l'ouverture.

Sanity. siteSettings.nav, siteSettings.linkedin, ou le slug d'un post.

<a class="yc-link yc-link--external" href="https://www.linkedin.com/in/yoane-lary-koyoe-ngassam-806977313/" target="_blank" rel="noopener noreferrer">Profil LinkedIn</a>

Champs

Le formulaire de contact. Le placeholder n'est jamais le seul nom du champ.

Saisie, zone, liste .yc-input

Nom

Le nom qui apparaîtra dans la réponse.

E-mail, survol

E-mail, focus

E-mail

Indiquez un e-mail avec un domaine, par exemple hello@doc4geeks.com.

E-mail

Message reçu. Je réponds à hello@doc4geeks.com.

Nom

Message

Type de demande

Demande, survol

Demande, focus

Demande

Choisissez un type de demande.

Demande

Accessibilité. Label lié par for. Aide et erreur dans aria-describedby. Erreur : bordure et message danger, aria-invalid et role alert. Succès : coche cyan, texte clair.

Sanity. Pas de champ libre en phase 1. Les libellés vivent dans contactForm.

<div class="yc-field is-error">
  <label class="yc-label" for="email">E-mail</label>
  <input class="yc-input" id="email" type="email" aria-invalid="true" aria-describedby="email-err">
  <p class="yc-field__error" id="email-err" role="alert">Indiquez un e-mail avec un domaine.</p>
</div>

Choix

Radio, case, interrupteur, puce. Le cyan ne marque que l'état coché.

Contrôles .yc-radio .yc-checkbox .yc-switch .yc-chip

Type de demande

Projet personnel ou étudiant Doc4Shop Invitation à intervenir Échange technique

Stack du projet

n8n Supabase Docker PHP

Inactif

Survol

Actif, focus

Désactivé

Essayez

Accessibilité. Cible 44px. Case cochée : fond cyan, coche encre. Interrupteur : role switch et aria-checked. Puce : aria-pressed. Sélection : bordure et texte cyan, fond transparent.

Sanity. yc.choice : label, value, checked (boolean).

<button class="yc-chip is-selected" type="button" aria-pressed="true">Docker</button>

Avatars

Photos locales, cercle. Anneau neutre, ou un filet cyan fin.

24, 32, 40, 56, 72, 96 .yc-avatar

24

32

40

56

72

96

Anneau neutre

Anneau cyan fin

Groupe

Accessibilité. alt au nom. Fichiers de assets/img seulement. Le cercle recadre volontairement.

Sanity. Image avec alt requis.

<img class="yc-avatar yc-avatar--56 yc-avatar--ring" src="assets/img/yoane-officiel.webp" width="1024" height="1024" alt="Yoane Ngassam">

Icônes

Vingt-quatre signes des fondations. Trait 1,5, currentColor. La grille est en 24.

Set .yc-icon

aller

retour

haut

coche

fermer

plus

moins

heure

chercher

courrier

profil

appel

lien

code

copier

info

menu

bas

suite

date

lieu

terminal

reçu

alerte

Accessibilité. Décor : aria-hidden. Seule : role img et title. Pas d'emoji. 16 et 20 restent dans les boutons denses.

Sanity. Le champ icon de yc.button stocke le nom, pas le SVG.

<svg class="yc-icon yc-icon--24" viewBox="0 0 24 24" aria-hidden="true">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>

Séparateurs

Un filet, ou le même filet avec un libellé. Pas de lueur.

Filets .yc-divider

Stack

Accessibilité. role separator quand le filet structure deux blocs. Un simple espace ne prend pas ce rôle.

Sanity. Pas de champ. Le libellé, s'il existe, reprend le titre de section déjà saisi.

<div class="yc-divider yc-divider--labeled" role="separator">Stack</div>

Info-bulle

Surface opaque, filet neutre. Visible au survol et au focus.

Bulle .yc-tooltip

Haut

Bas

Sur focus

Accessibilité. La bulle a un id cité par aria-describedby. Elle ne porte rien d'indispensable seule.

Sanity. Pas de schéma. Le texte reprend une valeur déjà publiée (e-mail, titre d'article).

<span class="yc-tooltip">
  <button class="yc-btn yc-btn--outline" type="button" aria-describedby="tip-mail">Copier l'e-mail</button>
  <span class="yc-tooltip__bubble" role="tooltip" id="tip-mail">hello@doc4geeks.com</span>
</span>

Logo

Tuile YN, trait cyan discret. Doc4Geeks change le nom, pas la couleur.

Monogramme .yc-logo

Yoane Ngassam Doc4Geeks

Accessibilité. La tuile seule a un nom sur le lien. Les lettres YN sont décoratives quand le nom est déjà écrit.

Sanity. siteSettings.logoMark, brandName, brandSuffix, dataBrand (yoane ou doc4geeks).

<a class="yc-logo" href="/" data-brand="yoane">
  <span class="yc-logo__mark" aria-hidden="true">YN</span>
  <span class="yc-logo__word">Yoane</span>
  <span class="yc-logo__suffix">Ngassam</span>
</a>

Code, touche, attente

La commande du campus, la touche qui envoie, le spinner neutre, la barre cyan.

Retour .yc-code-inline .yc-kbd .yc-spinner .yc-progress

Sur le campus cloud, le projet étudiant part avec docker compose up -d.

Dans le formulaire, Entrée envoie le message à hello@doc4geeks.com.

Envoi en cours.

Champs du message2 sur 5

Accessibilité. Spinner seul : nom accessible. Dans un bouton, il est masqué et le libellé reste. La barre a aria-valuenow. Mouvement réduit : la rotation s'arrête, la barre reste.

Sanity. Pas de schéma. La commande est fixe. Les libellés de formulaire viennent de contactForm.

<code class="yc-code-inline">docker compose up -d</code>
<kbd class="yc-kbd">Entrée</kbd>
<div class="yc-progress" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="5" style="--yc-progress-value:40%">
  <span class="yc-progress__bar"></span>
</div>