Chaque composant est documenté, testé, et porte la voix du collectif. Les boutons primaires héritent du shimmer or au survol — c'est notre signature.
Action principale d'une vue. Le primaire utilise le marine avec un shimmer or au survol — réservé aux CTAs majeurs.
Combinaison d'actions adjacentes — primaire + ghost pour secondary actions, ou outline + outline pour des choix égaux.
Navigation entre sections paritaires. Indicateur or sous l'onglet actif — fait écho à la nav principale.
Champ texte standard. Focus ring or à 18% — trois états : default, focus, error.
Choix unique parmi une liste fermée. Caret marine, alignement à droite.
Sélections multiples (check) ou exclusives (radio). Cocher = marine, fond crème ; le check est dessiné en CSS pur.
État booléen avec retour visuel immédiat. Variante or pour les toggles éditoriaux.
Valeur continue dans un intervalle. Knob blanc avec border marine, fill plein.
Statut, métadonnée, comptage. Six teintes sémantiques + outline neutre.
Initiales en marine par défaut. Variante or pour les freelances « top picks ».
Conteneur générique pour items de liste. Eyebrow or, titre Fraunces, description Inter Tight.
12 ans, React/TS, design systems. Disponible mi-mai 2026.
6 mois, 4 jours/semaine. Stack React + Storybook + Figma.
Paris. 90–120 k€. Hybrid 2j/sem.
Donnée chiffrée éditoriale. Le chiffre est en Fraunces — italique facultative pour rythmer.
Touches clavier inline. Fond crème, ombre subtile sous le bord bas.
Message contextuel. Quatre variantes sémantiques + une variante info teintée crème.
Information contextuelle au survol. Marine sur crème, ombre douce, latence 400 ms.
Indicateur de progression linéaire. Shimmer continu pendant l'opération — variante or pour les actions « premium ».
Chargement indéterminé. Anneau crème, accent or sur la pointe.
État vide. Glyphe + titre Fraunces + sous-texte + CTA optionnel. Évite les illustrations.
Élargissez votre recherche ou ajustez les critères de TJM pour voir plus de profils.
Citation mise en exergue dans un article. Italique Fraunces 300, accent or sur le mot-clef.
« Le bon code, c'est celui qu'on relit avec plaisir — et qu'on a envie de prolonger. » — Camille L., freelance · 8 ans chez COTON
Lettrine éditoriale en italique Fraunces or. À utiliser avec parcimonie — première lettre d'une section seulement.
Le collectif COTON est né d'une intuition simple : recruter des dévs comme on recrute un chef cuisinier — en goûtant son travail. Pas de bullshit, pas de processus interminable, juste un échange honnête entre pairs sur ce qui fait un bon code, un bon produit, une bonne équipe.
Surface flottante ancrée à un trigger. Base pour menus, color-pickers, infos contextuelles. Ferme sur clic extérieur ou Escape.
Le matching se fait sur la stack technique, la disponibilité et le tarif. Tu peux ajuster les filtres dans la barre latérale.
Menu d'actions contextuelles. Construit sur Popover. Items, séparateurs, labels de groupe, item destructif.
Wrapper unifié Label + Input + Help + Error. Gère les ids, aria-describedby et aria-invalid automatiquement.
Habiter le vide — liste filtrée vide, première utilisation, recherche sans résultat. Toujours guider vers une action.
Crée ta première mission pour commencer le matching avec les freelances du collectif.
Essaie d'élargir la stack ou la fourchette de tarif. Ou laisse-nous t'aider à reformuler le brief.
Linéaire et circulaire. 4 variantes (default marine, success, warning, error). Animation respectant prefers-reduced-motion.
Navigation multi-page avec ellipses pour les longues listes. aria-current="page" sur la page active.
Table riche avec tri par colonne, sélection multi-lignes, état vide. Pour les vues opérationnelles (missions, candidats, factures).
| Statut | ||||
|---|---|---|---|---|
YDYasmine D. |
Go · Postgres | 680 € | Validé | |
PRPierre R. |
React · Node | 620 € | En attente | |
SKSami K. |
TypeScript · GraphQL | 740 € | Présenté | |
MAMaïa A. |
Rust · WASM | 820 € | Brouillon |