sokko-g/DESIGN_SYSTEM.md

Design System - Sokko G

Ce document est la source de verite visuelle du projet Sokko G. Toute nouvelle interface doit respecter le theme Nebula Command.

1. Vision

Sokko G est une webapp gaming pensee pour des groupes d'amis pendant leurs sessions de jeu. Elle doit permettre de consulter rapidement des informations, gerer des toolboxes, notes, checklists, captures d'ecran, liens, ressources et pages informatives.

L'interface doit etre sombre, moderne, immersive, lisible sur desktop et mobile, agreable pendant de longues sessions, inspiree par l'espace, les nebuleuses et les interfaces gaming premium.

Eviter le style RGB agressif. L'ambiance recherchee est celle d'une galaxie calme, profonde et lumineuse.

2. Direction Artistique

Nom du theme : Nebula Command

Mots-cles :

• galaxie ;
• nebuleuse ;
• espace profond ;
• violet electrique ;
• bleu cosmique ;
• verre teinte ;
• lumiere diffuse ;
• interface futuriste ;
• collaboration ;
• gaming premium.

Principes :

• l'arriere-plan principal est tres sombre, legerement bleute ;
• le violet et le bleu servent aux actions, etats actifs, informations importantes et effets de profondeur ;
• les effets lumineux restent subtils et ne doivent jamais reduire la lisibilite ;
• l'interface doit etre elegante, dense et exploitable pendant une session de jeu.

3. Tokens CSS

Utiliser ces variables comme base. Ne pas coder les couleurs en dur dans les composants.

:root {
  color-scheme: dark;

  --color-bg-page: #070913;
  --color-bg-deep: #050711;
  --color-bg-sidebar: #0b0e1b;
  --color-bg-surface: #101426;
  --color-bg-surface-alt: #151a30;
  --color-bg-elevated: #1a2038;
  --color-bg-hover: #202745;

  --color-primary: #8b5cf6;
  --color-primary-hover: #9f7aea;
  --color-primary-active: #7347dc;
  --color-primary-soft: rgba(139, 92, 246, 0.14);
  --color-primary-border: rgba(139, 92, 246, 0.45);

  --color-secondary: #3b82f6;
  --color-secondary-hover: #60a5fa;
  --color-secondary-active: #2563eb;
  --color-secondary-soft: rgba(59, 130, 246, 0.14);

  --color-accent-cyan: #22d3ee;
  --color-accent-pink: #d946ef;
  --color-accent-indigo: #6366f1;

  --color-text-primary: #f5f7ff;
  --color-text-secondary: #b4bdd3;
  --color-text-muted: #7d879f;
  --color-text-disabled: #555e73;
  --color-text-inverse: #080a13;

  --color-border: rgba(150, 165, 205, 0.14);
  --color-border-hover: rgba(150, 165, 205, 0.28);
  --color-border-strong: rgba(167, 139, 250, 0.42);

  --color-success: #34d399;
  --color-success-soft: rgba(52, 211, 153, 0.13);
  --color-warning: #fbbf24;
  --color-warning-soft: rgba(251, 191, 36, 0.13);
  --color-danger: #fb7185;
  --color-danger-soft: rgba(251, 113, 133, 0.13);
  --color-info: #38bdf8;
  --color-info-soft: rgba(56, 189, 248, 0.13);

  --gradient-brand: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #3b82f6 100%);
  --gradient-nebula: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.28),
    rgba(59, 130, 246, 0.18),
    rgba(217, 70, 239, 0.12)
  );
  --gradient-page:
    radial-gradient(circle at 20% 10%, rgba(124, 58, 237, 0.16), transparent 34%),
    radial-gradient(circle at 85% 20%, rgba(37, 99, 235, 0.12), transparent 30%),
    radial-gradient(circle at 55% 90%, rgba(217, 70, 239, 0.08), transparent 35%),
    #070913;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.42);
  --shadow-primary: 0 0 28px rgba(139, 92, 246, 0.22);
  --shadow-secondary: 0 0 28px rgba(59, 130, 246, 0.18);

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

4. Typographie

Police principale :

font-family: "Inter", "Segoe UI", system-ui, sans-serif;

Police d'accent optionnelle pour logo, grands titres, compteurs et titres de toolboxes :

font-family: "Space Grotesk", "Inter", sans-serif;

Regles :

• corps de texte : 14 a 16 px ;
• titres de cartes : 15 a 18 px ;
• titres de page : 28 a 36 px ;
• hauteur de ligne : 1.5 a 1.65 ;
• paragraphes longs limites a environ 70 caracteres ;
• eviter les gris trop sombres sur fond noir.

5. Layout Application

Desktop :

• sidebar gauche : 248px, reductible a environ 72px ;
• zone centrale : flexible, max-width: 1600px ;
• panneau contextuel droit facultatif : 320px, repliable.

La sidebar contient le logo, le nom de l'application, la creation de toolbox, la liste des toolboxes, les raccourcis vers les pages informatives, les parametres et le profil.

La zone centrale contient le titre, les actions principales, les outils, les resultats et les contenus.

Le panneau droit peut afficher membres, activite recente, details, filtres, historique ou options de partage.

Mobile :

• navigation inferieure ou menu lateral ;
• contenu en une colonne ;
• boutons importants pleine largeur ;
• modales quasi plein ecran ;
• filtres dans un panneau bas ;
• cibles tactiles d'au moins 44px.

6. Navigation

Element de navigation :

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--color-text-secondary);
  transition: 160ms ease;
}

.nav-item:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.nav-item.active {
  color: var(--color-text-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

L'etat actif doit etre clair sans fond violet trop sature.

7. Topbar

La barre superieure de la zone centrale peut contenir titre de page, toolbox active, recherche globale, avatars, notifications, partage et menu utilisateur.

.topbar {
  min-height: 68px;
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px);
  background: rgba(7, 9, 19, 0.78);
}

8. Cartes

.card {
  background: rgba(16, 20, 38, 0.88);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-hover);
  background: rgba(21, 26, 48, 0.96);
}

.card.selected {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md), var(--shadow-primary);
}

Une carte peut contenir icone, titre, description courte, statut, date/auteur, actions secondaires, contenu et pied de carte.

9. Boutons

Bouton principal :

.button-primary {
  min-height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
  background: var(--gradient-brand);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.22);
}

.button-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(139, 92, 246, 0.3);
}

Bouton secondaire :

.button-secondary {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface-alt);
}

Bouton fantome :

.button-ghost {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  color: var(--color-text-secondary);
  background: transparent;
}

.button-ghost:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

Bouton danger : reserve aux actions destructrices, avec confirmation si l'action est irreversible.

Bouton icone :

.icon-button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--color-text-secondary);
  background: transparent;
}

10. Formulaires

.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #0c1020;
  color: var(--color-text-primary);
  outline: none;
}

.input::placeholder {
  color: var(--color-text-muted);
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16);
}

.input.error {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

Textarea :

• hauteur minimale 180px ;
• resize: vertical ;
• line-height: 1.6 ;
• style coherent avec les autres champs.

11. Outils Toolbox

Bloc-note

Prevoir titre, contenu, auteur, date de derniere modification, autosauvegarde, statut de sauvegarde, epinglage, partage, suppression, lecture/edition et historique eventuel.

.note-editor {
  background: rgba(5, 7, 17, 0.56);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
}

Checklist

Chaque tache peut comprendre case a cocher, titre, description, responsable, priorite, echeance et menu d'actions.

.checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--color-border-hover);
  background: var(--color-bg-deep);
}

.checkbox.checked {
  border-color: transparent;
  background: var(--gradient-brand);
}

Priorites :

• faible : bleu ;
• normale : violet ;
• elevee : orange ;
• critique : rouge.

Ne jamais utiliser uniquement la couleur pour communiquer la priorite.

Captures d'ecran

La galerie doit etre responsive :

• mobile : 1 colonne ;
• tablette : 2 colonnes ;
• desktop : 3 ou 4 colonnes.

Carte de capture : apercu, nom, auteur, date, tags, copier le lien, telecharger, ouvrir en grand, supprimer selon permissions.

Dropzone :

.dropzone {
  min-height: 160px;
  border: 1px dashed rgba(139, 92, 246, 0.52);
  border-radius: var(--radius-lg);
  background: var(--color-primary-soft);
}

.dropzone.drag-active {
  border-color: var(--color-accent-cyan);
  background: rgba(34, 211, 238, 0.1);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.12);
}

Visionneuse : fond presque noir, image centree, zoom, navigation entre images, metadonnees en panneau lateral, fermeture avec Escape.

12. Toolboxes

Une toolbox represente un espace de jeu. Une carte de toolbox affiche nom, icone/image, couleur, nombre de membres, nombre d'outils, derniere activite, avatars et statut prive/public. Les toolboxes ne portent pas de champ description.

La toolbox active peut utiliser une bordure en degrade, une lueur violette subtile, une pastille active et un fond legerement plus lumineux.

Creation d'une toolbox :

• nom ;
• icone ;
• couleur d'accent ;
• confidentialite ;
• membres ;
• outils ajoutes immediatement.

Couleurs d'accent proposees : violet, bleu, cyan, indigo, rose cosmique, vert emeraude.

13. Pages Informatives

Les pages informatives presentent des donnees structurees : objets, cartes, ressources, personnages, statistiques, strategies, equipements, recettes, quetes, evenements et liens utiles.

Structure recommandee :

1. titre ;
2. description ;
3. recherche ;
4. filtres ;
5. selecteur d'affichage ;
6. grille ou tableau ;
7. pagination ;
8. panneau de detail.

La structure visuelle doit rester independante de la source de donnees JSON ou API.

Exemple :

{
  "id": "item-001",
  "name": "Nom de l'element",
  "category": "Categorie",
  "rarity": "epic",
  "tags": ["support", "coop"],
  "image": "/images/item-001.webp",
  "description": "Description de l'element",
  "stats": {
    "power": 85,
    "speed": 42
  }
}

14. Filtres Et Tableaux

Filtres possibles : recherche textuelle, categorie, rarete, jeu, type, auteur, date, tags, statut et favoris.

Desktop : barre horizontale, panneau lateral droit ou zone repliable au-dessus du contenu.

Mobile : panneau venant du bas.

.filter-chip.active {
  color: #fff;
  background: var(--color-primary-soft);
  border-color: var(--color-primary-border);
}

Afficher le nombre de filtres actifs et prevoir une action de reinitialisation.

Tableaux :

• en-tete lisible en dark mode ;
• ligne separee par var(--color-border) ;
• hover discret rgba(139, 92, 246, 0.06) ;
• en-tete fixe pour les longs tableaux ;
• tri indique par une fleche ;
• valeurs numeriques alignees a droite ;
• mobile : cartes ou scroll horizontal.

15. Badges, Avatars, Presence

Badge :

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

Exemples :

• en ligne : background: var(--color-success-soft); color: var(--color-success);
• prive : background: var(--color-primary-soft); color: #b69cff;
• nouveau : background: var(--color-info-soft); color: var(--color-info);
• attention : background: var(--color-warning-soft); color: var(--color-warning);

Tailles avatar :

--avatar-xs: 24px;
--avatar-sm: 32px;
--avatar-md: 40px;
--avatar-lg: 52px;

Presence :

• vert : en ligne ;
• bleu : en jeu ;
• jaune : absent ;
• gris : hors ligne ;
• rouge : ne pas deranger.

Ne pas reposer uniquement sur la couleur. Ajouter un tooltip ou un libelle accessible.

16. Notifications, Modales, Menus

Toasts :

• position : right: 20px; bottom: 20px;
• information : 4 s ;
• succes : 3 a 4 s ;
• avertissement : 6 s ;
• erreur : persistante ou 8 s.

Les notifications ne doivent pas masquer les actions principales.

Modales :

.modal-backdrop {
  background: rgba(2, 3, 9, 0.76);
  backdrop-filter: blur(8px);
}

.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  box-shadow: var(--shadow-lg);
}

Les actions de modale sont regroupees en bas a droite. Sur mobile, une modale peut devenir un panneau plein ecran.

Menus contextuels :

• fond eleve ;
• ombre forte ;
• separateurs fins ;
• rayon 10 a 12 px ;
• largeur minimale 180 px ;
• action dangereuse isolee visuellement.

17. Etats UI

Etats vides :

• icone ou illustration simple ;
• titre ;
• explication courte ;
• action claire ;
• jamais de section completement vide.

Chargement :

• skeletons pour cartes, listes, tableaux, galeries, profils ;
• spinner reserve aux petites actions ;
• bouton en chargement conserve sa largeur.

Erreur :

• icone ;
• titre clair ;
• explication comprehensible ;
• detail technique secondaire si utile ;
• bouton pour reessayer.

18. Icones

Bibliotheque recommandee : Lucide Icons. Ne pas melanger plusieurs bibliotheques.

Style :

• contour ;
• epaisseur reguliere ;
• taille 18 a 22 px ;
• coins legerement arrondis.

Mappings recommandes :

• toolbox : Package, Boxes, Briefcase ;
• bloc-note : NotebookPen ;
• checklist : ListChecks ;
• screenshot : Image ;
• membres : Users ;
• informations : Database, BookOpen ;
• parametres : Settings ;
• filtre : SlidersHorizontal ;
• recherche : Search ;
• partager : Share2 ;
• ajouter : Plus.

19. Animations

Animations rapides et discretes uniquement :

• leger deplacement vertical au survol ;
• fondu ;
• changement de couleur ;
• ouverture fluide d'un panneau ;
• apparition d'un menu ;
• legere pulsation d'un statut en ligne ;
• transition entre vues grille/liste.

Eviter animations permanentes, rotations gratuites, zooms importants, flashes et effets neon agressifs.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

20. Scrollbars

Les zones scrollables doivent reprendre le style de l'ancien site : piste sombre, ombre interne claire et pouce avec degrade violet/indigo. Pour l'integration Nebula Command, le rail noir historique est remplace par un bleu-noir profond.

Version globale recommandee :

.legacy-scrollbar::-webkit-scrollbar {
  background-color: transparent;
  width: 6px;
  height: 6px;
  border-radius: 0;
}

.legacy-scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}

.legacy-scrollbar::-webkit-scrollbar-thumb {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(79, 26, 114)), color-stop(1, rgb(44, 1, 135)));
  border-radius: 10px;
}

Dimensions recommandees :

• scrollbar principale, panneau lateral, drawer, liste de filtres ou tableau : 6px ;
• rail transparent pour eviter les doubles bordures avec les panneaux ;
• thumb arrondi sans bordure interne ;
• sur un panneau borde, ajouter un leger padding-right au contenu scrollable pour separer le thumb de la bordure du panneau ;
• ne pas utiliser de scrollbar trop lumineuse sur les zones de lecture longues.

Les scrollbars doivent etre appliquees aux panneaux, menus, drawers, listes de filtres, tableaux et zones de details. Utiliser la classe .legacy-scrollbar sur les zones internes qui doivent reprendre explicitement l'ancien rendu. Eviter les overrides globaux comme scrollbar-width ou scrollbar-color, car ils changent l'aspect par rapport a l'ancien site.

21. Accessibilite

Minimum WCAG AA.

Regles :

• contraste suffisant ;
• navigation clavier complete ;
• focus visible ;
• labels de champs ;
• textes alternatifs aux images ;
• ne jamais utiliser uniquement la couleur pour transmettre une information ;
• boutons reels pour actions ;
• liens reels pour navigation ;
• hierarchie correcte h1, h2, h3 ;
• notifications importantes annoncees aux lecteurs d'ecran ;
• modales correctement gerees au clavier.

:focus-visible {
  outline: 2px solid var(--color-accent-cyan);
  outline-offset: 3px;
}

22. Fond Galaxie Et Effet Verre

Fond recommande :

• gradient CSS ;
• pseudo-element avec motif discret ;
• particules statiques seulement ;
• aucun canvas anime en permanence par defaut.

body {
  min-height: 100vh;
  color: var(--color-text-primary);
  background: var(--gradient-page);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle, rgba(139, 92, 246, 0.35) 1px, transparent 1px);
  background-size: 90px 90px, 140px 140px;
  background-position: 0 0, 35px 60px;
}

Effet verre autorise sur topbar, modales, panneaux flottants, barre de filtres et menus. Ne pas l'appliquer a toutes les cartes.

.glass-panel {
  background: rgba(16, 20, 38, 0.72);
  border: 1px solid rgba(165, 180, 252, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

23. Ecrans Cibles

Accueil :

• message de bienvenue ;
• toolbox recemment utilisee ;
• bouton creer une toolbox ;
• bouton rejoindre une toolbox si collaboration activee ;
• section Mes toolboxes ;
• activite recente ;
• outils rapides.

Page toolbox :

• nom, icone ;
• membres ;
• inviter, partager, options ;
• onglets : vue d'ensemble, notes, checklists, captures, fichiers, informations, activite ;
• vue d'ensemble avec outils epingles, notes recentes, taches en cours, dernieres captures et activite.

Pages informatives :

• recherche ;
• filtres ;
• vue grille/table ;
• detail ;
• association rapide a une toolbox.

24. Permissions Et Themes Par Toolbox

Roles visuels a prevoir :

• proprietaire ;
• administrateur ;
• membre ;
• lecteur.

Actions indisponibles :

• masquer si cela simplifie l'interface ;
• sinon desactiver avec tooltip explicatif.

Chaque toolbox peut definir une couleur d'accent :

.toolbox-theme {
  --toolbox-accent: #8b5cf6;
  --toolbox-accent-soft: rgba(139, 92, 246, 0.14);
}

Cette couleur peut etre utilisee pour icone, bordure active, badges, graphiques, titre et certains boutons secondaires. La couleur principale de l'application doit rester coherente.

25. Recommandations Techniques

Stack suggeree pour une refonte propre :

• React ou Next.js ;
• TypeScript strict ;
• Tailwind CSS ou CSS Modules ;
• Lucide React pour les icones ;
• Radix UI ou shadcn/ui pour les composants accessibles ;
• Framer Motion uniquement pour quelques transitions utiles ;
• React Hook Form pour les formulaires ;
• Zod pour la validation ;
• TanStack Query pour les donnees distantes ;
• TanStack Table pour les tableaux ;
• Zustand ou Context API pour un etat global leger.

Organisation cible :

src/
  components/
    ui/
      Button
      Input
      Textarea
      Modal
      Dropdown
      Badge
      Avatar
      Tooltip
      Tabs
      Card
      Toast
      Skeleton
    layout/
      AppShell
      Sidebar
      Topbar
      MobileNavigation
      ContextPanel
    toolbox/
      ToolboxCard
      ToolboxHeader
      ToolboxMembers
      ToolboxSettings
      CreateToolboxModal
    tools/
      NoteTool
      ChecklistTool
      ScreenshotTool
      FileTool
    information/
      FilterBar
      DataCard
      DataTable
      DataDetailsPanel
      EmptyResults
  pages/
  hooks/
  services/
  stores/
  styles/
  types/

Regles de developpement :

• creer les composants UI de base avant les pages ;
• centraliser les couleurs en variables CSS ;
• gerer les etats normal, hover, active, focus, disabled, loading et error ;
• concevoir mobile-first ;
• ajouter des donnees fictives JSON pour tester les vues ;
• separer les composants visuels de la recuperation des donnees ;
• prevoir les permissions ;
• traiter l'accessibilite des le debut ;
• eviter les composants de plus de 250 a 300 lignes ;
• ajouter des tests sur les composants critiques.