mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
Claude
79114a741b
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017ADkrVcVFTT14hbB148HYS
44 lines
2.9 KiB
Markdown
44 lines
2.9 KiB
Markdown
# Social Flow - Design Guidelines
|
||
|
||
Interface sobre et lisible, en français, pensée d'abord pour être comprise sans formation.
|
||
Toutes les couleurs passent par les tokens de `client/src/index.css` (modes clair et sombre).
|
||
|
||
## Identité
|
||
|
||
- **Logo** : `components/brand/logo.tsx` (`<Logo />`, `<LogoMark />`) — deux ondes qui s'écoulent vers un point, sur un carré arrondi en dégradé indigo → corail. Même dessin dans `client/public/favicon.svg`.
|
||
- **Primaire** : indigo `#4F46E5` (`primary`) — actions, éléments actifs, focus.
|
||
- **Accent** : corail `#F97362` (`brand-accent`) — uniquement dans le dégradé de marque.
|
||
- **Dégradé de marque** (`.gradient-brand`, bouton `variant="brand"`) : réservé au logo et à **une seule** action principale par écran (publier, créer, se connecter).
|
||
- **Statuts** : `success` (publié, actif), `warning` (bientôt expiré), `destructive` (échec, suppression), `info` (en cours).
|
||
- **Plateformes** : `facebook`, `instagram`, `tiktok` — via `components/platform-icon.tsx`.
|
||
- Ne jamais utiliser de couleurs Tailwind brutes (`bg-blue-500`, `#1877F2`…) ni `text-white` sur une surface de l'interface.
|
||
|
||
## Typographie
|
||
|
||
- Inter (400–700), JetBrains Mono pour les identifiants et le SQL.
|
||
- Titre de page : `PageHeader` (`text-2xl sm:text-[28px] font-semibold`).
|
||
- Titre de carte : `CardTitle` (`text-base font-semibold`), description en `text-muted-foreground`.
|
||
|
||
## Mise en page
|
||
|
||
- **Shell** : `components/layout/app-shell.tsx` — sidebar groupée sur desktop (≥ lg), en-tête + barre de navigation basse sur mobile (Accueil, Calendrier, **Créer**, Médias, Menu). La navigation est définie une seule fois dans `components/layout/nav-config.ts`.
|
||
- **Contenu** : chaque page commence par `<Page width="narrow|default|wide">` puis `<PageHeader icon title description actions />`.
|
||
- `narrow` (max-w-3xl) : formulaires simples
|
||
- `default` (max-w-6xl) : la plupart des pages
|
||
- `wide` (1400px) : tableau de bord, calendrier, médiathèque
|
||
- Une seule version responsive par écran : pas de pages mobiles séparées.
|
||
|
||
## Composants
|
||
|
||
- **Cartes** : `Card` sans surcharge de style (`rounded-xl border shadow-soft`).
|
||
- **États vides** : `components/empty-state.tsx` avec une action suggérée.
|
||
- **Parcours de création** : `components/stepper.tsx` (`Stepper` + `StepNavigation`), utilisé par Publication et Reel. On explique toujours pourquoi une étape est verrouillée.
|
||
- **Choix exclusifs** : cartes sélectionnables (`RadioGroup` dans un `label` bordé), pas de listes déroulantes quand il y a 2 à 4 options.
|
||
- **Suppressions** : toujours confirmées par `AlertDialog`, jamais `confirm()`.
|
||
- **Badges** : variantes `success`, `warning`, `info`, `danger`, `muted`.
|
||
|
||
## Rédaction
|
||
|
||
- Verbes d'action clairs : « Importer », « Programmer », « Connecter un compte ».
|
||
- Pas d'anglicismes (« Uploader », « Token ») ni de jargon technique visible par défaut : les détails vont dans un bloc « Besoin d'aide ? » repliable.
|