COTON·DS v1.0
v1.0
COTON · DS/Patterns·8 compositions
§ 04 · Patterns

Compositions éprouvées.

Comment les composants se combinent — pour résoudre les écrans récurrents de nos produits : hero marketing, liste de profils, empty states, authentification, article éditorial.

§ 04.01

Hero marketing

Composition d'entrée pour les pages marketing — titre Fraunces large, lead Inter Tight, CTA primaire shimmer + secondaire ghost.

Quand l'utiliser Page d'accueil, landing campagne, page produit. Évite : pages app interne, dashboards (préférer une page-header sobre).
★ COLLECTIF · 240 FREELANCES

Le bon profil. Du premier coup.

Recrutement et développement sur-mesure. Nos freelances sont sélectionnés en pair-coding, pas en CV-screening.

C
§ 04.02

Liste de profils

Données denses avec avatar, nom, rôle, métadonnées et action contextuelle. Hover crème.

Quand l'utiliser Tables de données scannables, annuaire, gestion d'équipe. 5–50 lignes — au-delà, prévoir filtres + pagination.

Freelances disponibles

240 résultats · trié par disponibilité
PM
Pierre M.
Lead Frontend · React/TS · Lyon
Top pick 650 €/j
CL
Camille L.
Staff Eng · Backend Go · Paris
Disponible 820 €/j
JD
Julien D.
Designer Product · Figma · Bordeaux
Mi-mai 580 €/j
SA
Sara A.
DevOps · K8s · Toulouse
Disponible 720 €/j
§ 04.03

Empty state contextuel

Premier-run d'une vue vide — sidebar visible pour situer, contenu central avec glyph + titre + CTA.

Quand l'utiliser Section vide d'un produit (Aucune mission, Aucun candidat). Toujours proposer une action claire.
Tableau de bord
Profil
Compétences
Missions
Candidatures3
Disponibilités
Paramètres

Aucune mission pour l'instant

Complétez votre profil pour recevoir des propositions correspondant à vos critères.

§ 04.04

Auth centrée

Carte centrée crème, mark COTON en haut, titre Fraunces, formulaire compact. Bouton primaire shimmer.

Quand l'utiliser Connexion, inscription, mot de passe oublié. Un seul écran à la fois — éviter les wizards multi-step pour l'auth.

Bon retour, Pierre.

Connectez-vous pour accéder à votre espace freelance.

ou

Première fois ? Créer un compte freelance

§ 04.05

Article éditorial

Long-form avec drop-cap, byline, pull-quote. Inter Tight 15 / 1.7 pour le confort de lecture.

Quand l'utiliser Blog, post technique, témoignage freelance, étude de cas client. Largeur 480–560 px maximum.
RÉCIT · TECH · 6 MIN

Pourquoi nous avons arrêté de jugler avec Stripe.

CL
Camille L. · Staff Eng @ COTON
15 avril 2026 · 6 min de lecture

Pendant trois ans, notre intégration Stripe ressemblait à une cathédrale gothique : magnifique de loin, mais chaque modification réveillait des chimères que personne n'osait toucher. Voici comment nous avons tout repensé en deux semaines — et pourquoi nous aurions dû le faire bien plus tôt.

« On ne corrige pas un système qu'on ne comprend plus — on le réécrit. »

La première étape, contre-intuitive, fut de supprimer du code. Près de 40% de notre logique de facturation existait pour des cas de figure que nous n'avions plus rencontrés depuis la v1 du produit.

Pattern 07 — Liste & gestion

Tableau opérationnel

Liste candidats / missions / clients : recherche + filtres rapides en haut, table triable au centre, pagination en bas, actions contextuelles par ligne.

Quand l'utiliser Toute page « gestion » avec une liste de N items à parcourir, filtrer, trier, sélectionner. C'est la page la plus fréquente d'un back-office — investis-y du soin.
Candidat ▲ Stack Statut ↕ Match ↕
Yasmine Daoud
Backend Senior · 8 ans		Go · PostgresValidé92%
Pierre Renault
Frontend · 5 ans		React · TSÀ débriefer78%
Sofia Karam
Lead Data · 9 ans		Python · dbtValidé88%
Marc Albers
DevOps Senior · 7 ans		AWS · TerraformHors-budget65%
1 sélectionné · 47 résultats
…
Pattern 08 — État vide

Empty state habité

L'absence de contenu n'est pas un bug : c'est un moment d'accueil. Une icône, une phrase qui explique pourquoi c'est vide, une action pour en sortir.

Quand l'utiliser Première visite, filtres trop stricts, liste légitimement vide. Jamais un message générique « Aucun résultat » : précise pourquoi et propose une issue.

Aucun candidat pour le moment

Importe ton premier profil ou crée-le manuellement. Tu pourras ensuite le présenter à un client.

Aucun résultat pour « Senior · Go · Lille »

Essaye d'élargir la zone géographique ou la stack. La recherche est exigeante par défaut.

Pattern 09 — Formulaire multi-étapes

Création guidée

Étape sur étape, avec progression visible, validation inline, et boutons fixes en bas. Le bouton primaire reste à droite, le secondaire à gauche.

Quand l'utiliser Création d'objet complexe (mission, candidat complet, contrat). Au-delà de 6-7 champs, étape-le. En-dessous, garde une seule page.
Étape 2 / 4 · Profil 50%

Parle-nous du profil idéal

Ces critères servent au matching automatique. Tu pourras les ajuster ensuite.

Sépare par des virgules. Min. 2 technos.
L'adresse semble incomplète.