# @coton/ds — Design System v1.0 Système de design du collectif **COTON**. Tokens, preset Tailwind et composants React typés. Bleu marine + or + crème. --- ## Installation ### 1. Copier le package dans votre repo ```bash # Mono-repo cp -R ds packages/coton-ds # Ou dépendance locale npm install ./ds ``` Dans `package.json` de votre app : ```json "dependencies": { "@coton/ds": "file:../ds" } ``` Puis : ```bash npm install clsx tailwind-merge class-variance-authority ``` ### 2. Importer les tokens CSS Dans votre `app/globals.css` (Next.js) ou `src/index.css` : ```css @import "@coton/ds/tokens.css"; /* Optionnel : appliquer le fond signature (taches crème floutées) */ body { @apply coton-bg-maison; } ``` ### 3. Brancher Tailwind sur le preset Dans `tailwind.config.ts` : ```ts import cotonPreset from "@coton/ds/tailwind.preset"; export default { presets: [cotonPreset], content: [ "./src/**/*.{ts,tsx}", "./node_modules/@coton/ds/**/*.{ts,tsx}", ], } satisfies Config; ``` ### 4. Charger les fonts Dans `` (ou via `next/font`) : ```html ``` --- ## Utilisation ```tsx import { Button, Card, CardTitle, CardDescription, Badge, Alert, Tabs, TabsList, TabsTrigger, TabsContent } from "@coton/ds"; export default function Page() { return (

Le bon profil. Du premier coup.

Top pick Pierre M. Lead Frontend · React/TS · Lyon Le système est composable, pas monolithique.
); } ``` --- ## Composants | Composant | Variantes | |---|---| | ` … ``` --- ## Versions - **v1.0** (avril 2026) — palette marine + or + crème, Fraunces editorial, shimmer button. - v3.0 — *Editorial* — long-form, drop-cap. - v2.0 — *Product* — formulaires, tables denses. - v1.0 — *Terminal* — PoC mono dark. --- ## Convention de contribution 1. Tout nouveau token passe d'abord dans `tokens.json` (source W3C), puis est répercuté dans `tokens.css` et `tailwind.preset.js`. 2. Tout nouveau composant React expose un `cva()` de variantes + un export typé `XxxProps`. 3. Tester sur fond blanc ET sur fond marine avant merge. — *COTON Collectif · 2026*