Mike SOBTAMFOIngénieur · Solutions digitales
EN
Parlons de votre projet

SGUsage interne · non indexé

Le système de design, en pièces détachées

Chaque composant du portfolio, rendu avec les vraies feuilles de style. Le site est clair pour tout le monde ; le bouton de l’en-tête active le thème sombre pour le vérifier. Documentation : docs/portfolio-design-system.md ; règles d’écriture : docs/refonte-v2.md §4.

CSSstyles + content + formsJSconfig + mainBuildaucun

Couleurs

Jetons sémantiques (--c-*) : clairs par défaut, ils ne changent de valeur que si le visiteur choisit le thème sombre. Aucune bande sombre en thème clair : l’encre ne sert de fond qu’à de petits éléments (bouton principal, badge Démo). Texte ≥ 4,5:1 dans les deux thèmes.

  • Fond--c-bg · #F5F1EA / #0D1321
  • Surface--c-surface · #ECE6DC / #141C2E
  • Relief--c-raised · #FBF9F5 / #1A2438
  • Encre--c-text · #0D1321 / #EDE8DF
  • Texte secondaire--c-text-2 · 7,0:1
  • Texte tertiaire--c-text-3 · 5,6:1
  • Ambre signal--c-accent · #E3A23B (fonds)
  • Ambre profond--c-accent-text · #8A4B08 (texte)
  • Vert LED--c-led · #2BB673
  • Vert texte--c-led-text · #1A7346
  • Bleu nuit--night-700 · #1C2A4A
  • Erreur--c-danger · #A12C1F

Typographie

Geist (texte et interface), Geist Mono (libellés, chiffres), Instrument Serif italique : un seul mot-clé par grand titre, avec <span class="kw">.

Échelle fluide (Utopia, 360 → 1440 px)

--step-6Parlons de votre projet

--step-5Titre de héros

--step-4Titre de section (h2)

--step-3Sous-titre éditorial

--step-2Titre de carte

--step-1Titre h3

--step-0Texte courant, 16 → 19 px

--step--1Texte secondaire

--step--2Mentions

Styles de texte

.lead : paragraphe d’introduction, plus grand et adouci.

.label : annotation technique en monospace

Texte avec un lien, du gras, du code et une touche Tab.

.muted : texte secondaire.

Espacements, rayons, ombres

  • --space-3xs
  • --space-2xs
  • --space-xs
  • --space-s
  • --space-m
  • --space-l
  • --space-xl
  • --space-2xl
  • --space-3xl

Rayons : --radius-xs 4 px · -s 6 · -m 10 · -l 16 · -xl 24 · -pill. Ombres : --shadow-1 à --shadow-3. Mouvement : --dur-1 à --dur-5, --ease-out, --ease-in-out.

Boutons et liens

Primaire Accent Secondaire Lien bouton

Lien fléché

<a class="btn btn--primary btn--lg" href="contact.html">…</a> · variantes : --primary --accent --secondary --ghost --link --wa · tailles : --sm --lg --block

Badges, étiquettes, puces, mesures

BadgeDémo · marque fictiveRecommandéMesuréContour

  • FR / EN
  • Mobile Money
  • WCAG 2.2 AA

Puce lien

LCP0,9 sPoids312 KoA11yWCAG 2.2 AA

Les mesures ci-dessus sont des exemples de mise en forme : sur les pages publiques, n’afficher que des valeurs mesurées.

LED de disponibilité et horloge

Disponible pour de nouveaux projetsProchains créneaux : novembre 2026

Disponibilités limitéesComplet

Heure au Cameroun Paris

contact@mikesobtamfo.com

En-têtes de section

03Sur-titre

Un titre avec un mot clé

Une introduction de une à deux phrases, au service du client final.

Action secondaire

Cartes

C-01 · carte de service

Sites web

Une phrase concrète : ce que vit le client final.

  • Vitrine
  • Boutique en ligne
  • Refonte
Sur devis

Carte projet, cadres d’appareil

DémoSecteurMarché

Titre du projet

La capture se place dans .device__screen (image 16:10).

Grilles à filets et secteurs

  • Commerce & e-commerce

    Ce que vos clients attendent vraiment.

    Démo : MAISON KÔSSI

  • Cellule libre

    Toute cellule d’une liste .cells reçoit le fond et le filet.

Bento et tuiles

T-01large

Tuile large

.tile--wide occupe deux colonnes dès 40em.

T-02

Tuile

Conteneur de requêtes (@container).

T-03

Papier 2

.scheme-dark (v1) : désormais une zone « papier 2 », jamais sombre en thème clair.

Chiffres et mesures

Compteur animé
12
data-count, respecte le mouvement réduit.
Avec unité
0–1h
.stat__unit
Décimales
2,5s
data-decimals="1"

Étapes (content.css)

  1. 01

    Écouter

    Brief et appel découverte.

    LivrableProposition sous 48 h

  2. 02

    Spécifier

    Cahier des charges léger.

    LivrableCahier des charges

  3. 03

    Concevoir

    Maquettes mobile d’abord.

    LivrableMaquettes validées

Cartouche technique

Fiche projetREF-01
Client
Marque fictive
Secteur
Santé
Langues
FR · EN
Fonctionnalité clé
Prise de rendez-vous en cinq étapes
Mesures publiées dans l’étude de cas

Tableau comparatif

Comparer les formules (exemple de structure, sans prix)
CritèreEssentielCroissanceSignature
Pages1 à 56 à 15Sur mesure
FR + ENOptionInclusInclus
Délai indicatif2 à 3 semaines4 à 6 semaines6 à 16 semaines

Accordéon

Une seule ouverte à la fois (attribut name)

<details name="groupe"> : natif, accessible, sans JavaScript.

Deuxième question

Réponse franche et courte.

Onglets

Afrique Europe Diaspora

Sans JavaScript, ce sont des ancres vers trois blocs lisibles. Avec JavaScript : motif APG, flèches du clavier.

Facture en euros, RGPD, 0 à 1 h de décalage.

Projets au pays, suivis à distance.

Filtres

Type

3 résultats

  • Restaurant · vitrine
  • Mode · boutique
  • Cabinet · vitrine

Formulaires (forms.css)

Étape 2 sur 7Votre secteur

2 sur 7
  1. Projet
  2. Secteur
  3. Budget
  4. Délai

Pour vous répondre, rien d’autre.

Votre projet

aria-pressed

Mention d’information RGPD sous le bouton. Le champ piège _gotcha est invisible.

Notifications et modale

Modale native

<dialog> + commandfor/command (repli JavaScript dans main.js). Échap ferme, le focus revient au bouton.

Contenu rédactionnel et citation

La classe .prose met en forme articles et pages légales : mesure de lecture de 66 caractères, interlignage confortable, liens soulignés.

Intertitre

  • Liste à puces ambrées.
  • Deuxième élément.

Une citation éditoriale en Instrument Serif italique.

.note : encadré d’information.

Modèle de témoignage : n’utiliser qu’avec un avis réel et autorisé.
Prénom N.Fonction · Organisation · Pays

Motifs

.blueprint : grille de plan à 1 px, masquée en dégradé

.signal (+ .signal--draw : tracé au défilement)

.dims .dims--on : repères d’angle

Icônes (SVG en ligne, trait 1,5)

  • flèche
  • validé
  • e-mail
  • téléphone
  • devis
  • agenda
  • fiabilité
  • performance
  • mesure
  • copier

Parlons de votre projet.

Dites-moi ce que vous faites et ce dont vous avez besoin. Je vous réponds sous 24 h ouvrées.

Vous échangez directement avec moi

Mike SOBTAMFO · ingénieur · Cameroun (UTC+1)