Imported from zal9212/application-ducative-Flutter (skills/atlassian-design-system/SKILL.md). Install upstream with npx skills add zal9212/application-ducative-Flutter --skill atlassian-design-system. Copyright stays with the author.

SKILL — Atlassian Design System (ADS) pour la plateforme académique

Contexte d'utilisation

Ce skill définit le système de design officiel inspiré d'Atlassian Marketplace à appliquer uniformément sur toutes les surfaces : Flutter Web, Flutter Mobile, et tous les composants de la plateforme académique intelligente.

Tout développeur travaillant sur ce projet doit lire ce fichier avant de créer un seul widget UI.

1. Palette de couleurs

Couleurs primaires

// lib/core/theme/app_colors.dart
class AppColors {
  // Primary — Bleu Atlassian
  static const Color primary        = Color(0xFF0052CC); // Blue 600
  static const Color primaryHover   = Color(0xFF0065FF); // Blue 500
  static const Color primaryLight   = Color(0xFFDEEBFF); // Blue 50
  static const Color primaryDark    = Color(0xFF0747A6); // Blue 800

  // Neutrals
  static const Color textPrimary    = Color(0xFF172B4D); // Dark Navy
  static const Color textSecondary  = Color(0xFF5E6C84); // Grey 500
  static const Color textSubtle     = Color(0xFF97A0AF); // Grey 400
  static const Color textDisabled   = Color(0xFFC1C7D0); // Grey 300

  // Backgrounds
  static const Color bgBase         = Color(0xFFFFFFFF);
  static const Color bgSunken       = Color(0xFFF4F5F7); // Grey 100
  static const Color bgRaised       = Color(0xFFFFFFFF);
  static const Color bgOverlay      = Color(0xFFFFFFFF);

  // Borders
  static const Color borderSubtle   = Color(0xFFDFE1E6); // Grey 200
  static const Color borderDefault  = Color(0xFFC1C7D0); // Grey 300
  static const Color borderFocused  = Color(0xFF4C9AFF); // Blue 400

  // Status colors
  static const Color success        = Color(0xFF00875A); // Green 500
  static const Color successLight   = Color(0xFFE3FCEF); // Green 50
  static const Color warning        = Color(0xFFFF8B00); // Yellow 500
  static const Color warningLight   = Color(0xFFFFFAE6); // Yellow 50
  static const Color danger         = Color(0xFFDE350B); // Red 500
  static const Color dangerLight    = Color(0xFFFFEDEB); // Red 50
  static const Color info           = Color(0xFF0052CC); // Blue 600
  static const Color infoLight      = Color(0xFFDEEBFF); // Blue 50

  // Purple accent (Atlassian brand secondary)
  static const Color purple         = Color(0xFF6554C0); // Purple 500
  static const Color purpleLight    = Color(0xFFEAE6FF); // Purple 50

  // Teal accent
  static const Color teal           = Color(0xFF00B8D9); // Teal 500
  static const Color tealLight      = Color(0xFFE6FCFF); // Teal 50
}

Règles d'utilisation couleurs

• Jamais de fond coloré en pleine page — garder bgSunken (#F4F5F7) comme fond global
• Les cards ont toujours fond blanc avec ombre légère
• Les actions primaires = primary bleu uniquement
• États danger/warning/success uniquement pour feedback contextuel, pas décoratif

2. Typographie

Système de polices

// lib/core/theme/app_typography.dart
// Police principale : "Charlie Display" (Atlassian) → utiliser "Inter" comme fallback
// Police corps : "Charlie Text" → utiliser "Inter" comme fallback

class AppTextStyles {
  static const String fontFamily = 'Inter';

  // Display — Titres de pages, hero sections
  static const TextStyle display = TextStyle(
    fontFamily: fontFamily,
    fontSize: 35,
    fontWeight: FontWeight.w700,
    color: AppColors.textPrimary,
    height: 1.1,
    letterSpacing: -0.5,
  );

  // Heading 1 — Titres principaux de section
  static const TextStyle h1 = TextStyle(
    fontFamily: fontFamily,
    fontSize: 29,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.2,
  );

  // Heading 2
  static const TextStyle h2 = TextStyle(
    fontFamily: fontFamily,
    fontSize: 24,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.25,
  );

  // Heading 3 — Sous-titres de cards
  static const TextStyle h3 = TextStyle(
    fontFamily: fontFamily,
    fontSize: 20,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.3,
  );

  // Heading 4 — Labels de section
  static const TextStyle h4 = TextStyle(
    fontFamily: fontFamily,
    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: AppColors.textPrimary,
    height: 1.4,
    letterSpacing: 0.1,
  );

  // Body — Texte courant
  static const TextStyle body = TextStyle(
    fontFamily: fontFamily,
    fontSize: 14,
    fontWeight: FontWeight.w400,
    color: AppColors.textPrimary,
    height: 1.5,
  );

  // Body Small
  static const TextStyle bodySmall = TextStyle(
    fontFamily: fontFamily,
    fontSize: 12,
    fontWeight: FontWeight.w400,
    color: AppColors.textSecondary,
    height: 1.5,
  );

  // Label — Boutons, tags
  static const TextStyle label = TextStyle(
    fontFamily: fontFamily,
    fontSize: 14,
    fontWeight: FontWeight.w500,
    height: 1.4,
  );

  // Caption — Méta-informations
  static const TextStyle caption = TextStyle(
    fontFamily: fontFamily,
    fontSize: 11,
    fontWeight: FontWeight.w400,
    color: AppColors.textSubtle,
    height: 1.4,
    letterSpacing: 0.2,
  );

  // Section label uppercase (comme "CATEGORIES" sur Atlassian)
  static const TextStyle sectionLabel = TextStyle(
    fontFamily: fontFamily,
    fontSize: 11,
    fontWeight: FontWeight.w700,
    color: AppColors.textSubtle,
    height: 1.4,
    letterSpacing: 1.2,
  );
}

3. Espacement et grille

class AppSpacing {
  // Base unit = 8px (Atlassian grid)
  static const double xs   = 4.0;
  static const double sm   = 8.0;
  static const double md   = 12.0;
  static const double base = 16.0;
  static const double lg   = 20.0;
  static const double xl   = 24.0;
  static const double xxl  = 32.0;
  static const double xxxl = 40.0;
  static const double huge = 48.0;
  static const double mega = 64.0;
}

class AppRadius {
  static const double sm    = 3.0;  // Inputs, small tags
  static const double md    = 6.0;  // Buttons
  static const double lg    = 8.0;  // Cards
  static const double xl    = 12.0; // Modals
  static const double round = 50.0; // Pills/chips
}

Grille responsive (Web)

4. Élévation et ombres

class AppShadows {
  // Card au repos (comme les category cards Atlassian)
  static const BoxShadow card = BoxShadow(
    color: Color(0x14172B4D), // textPrimary à 8%
    blurRadius: 8,
    offset: Offset(0, 2),
    spreadRadius: 0,
  );

  // Card au hover
  static const BoxShadow cardHover = BoxShadow(
    color: Color(0x1F172B4D), // textPrimary à 12%
    blurRadius: 16,
    offset: Offset(0, 4),
    spreadRadius: 0,
  );

  // Modal / overlay
  static const BoxShadow overlay = BoxShadow(
    color: Color(0x33172B4D),
    blurRadius: 32,
    offset: Offset(0, 8),
    spreadRadius: 0,
  );

  // Dropdown
  static const BoxShadow dropdown = BoxShadow(
    color: Color(0x29172B4D),
    blurRadius: 20,
    offset: Offset(0, 4),
    spreadRadius: 0,
  );
}

5. Composants UI standard

5.1 Card (inspirée des category cards Atlassian)

// COMPORTEMENT CARD ATLASSIAN :
// - Fond blanc
// - Bordure subtile #DFE1E6
// - Radius 8px
// - Shadow légère au repos, plus marquée au hover
// - Transition hover : translateY(-2px) + shadow renforcée
// - Icône ou illustration dans la partie supérieure (fond #F4F5F7)
// - Titre h3 en bas + description bodySmall

Structure Flutter :

// Structure attendue pour toute card
Container(
  decoration: BoxDecoration(
    color: AppColors.bgRaised,
    borderRadius: BorderRadius.circular(AppRadius.lg),
    border: Border.all(color: AppColors.borderSubtle),
    boxShadow: [AppShadows.card],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // Zone illustration (fond gris)
      Container(
        height: 160,
        decoration: BoxDecoration(
          color: AppColors.bgSunken,
          borderRadius: BorderRadius.vertical(top: Radius.circular(AppRadius.lg)),
        ),
        child: /* Icon ou Illustration */,
      ),
      // Zone contenu
      Padding(
        padding: EdgeInsets.all(AppSpacing.xl),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Titre', style: AppTextStyles.h3),
            SizedBox(height: AppSpacing.sm),
            Text('Description...', style: AppTextStyles.bodySmall),
          ],
        ),
      ),
    ],
  ),
)

5.2 Navigation principale (Header)

// STRUCTURE HEADER ATLASSIAN :
// - Fond blanc, border-bottom #DFE1E6, hauteur 56px
// - Logo à gauche (icône + "Marketplace" text en bold)
// - Navigation centrée (tabs avec dropdown arrows)
// - CTA "Sign in" à droite (outlined button) — ici remplacé par profil utilisateur
// - Position sticky en top

5.3 Boutons

class AppButton {
  // PRIMARY — Fond bleu, texte blanc
  // SECONDARY — Fond transparent, bordure grise, texte gris foncé
  // DANGER — Fond rouge, texte blanc
  // SUBTLE — Pas de fond, pas de bordure, texte bleu
  
  // Hauteur standard : 32px (compact), 40px (default)
  // Padding : 0 12px
  // Radius : 6px
  // Font : label 14px Medium
}

5.4 Badges / Tags de statut

// Atlassian "lozenge" pattern :
// - Compact pill (radius 3px)
// - Fond coloré léger (ex: successLight), texte coloré foncé (success)
// - Font : 11px, uppercase, bold, letter-spacing 0.5
// Types: SUCCESS, WARNING, DANGER, IN_PROGRESS, DEFAULT, NEW

5.5 Sidebar de navigation (pages internes)

// STRUCTURE ATLASSIAN SIDEBAR :
// - Largeur 240px desktop, collapsible sur mobile
// - Fond bgSunken (#F4F5F7)
// - Séparateurs de section avec label uppercase (sectionLabel style)
// - Items : icône 20px + label 14px, padding 8px 16px
// - État actif : fond primaryLight, texte primary, bordure gauche 2px primary
// - État hover : fond borderSubtle

6. Illustrations et icônes

Icônes

• Utiliser Material Symbols (outlined, weight 300) par défaut
• Taille standard : 20px (inline), 24px (actions), 32px (section headers)
• Couleur : textSecondary au repos, primary actif

Illustrations de modules

Chaque module a une couleur d'accent associée (cohérence avec les category cards Atlassian) :

7. Règles d'or du design (à ne jamais enfreindre)

1. Fond global = #F4F5F7 — jamais de blanc pur pour le fond de page
2. Cards = fond blanc sur fond gris — créer de la profondeur
3. Un seul bleu primaire — ne pas inventer d'autres bleus
4. Pas de dégradés sur les boutons — couleurs pleines uniquement
5. Espacement 8px-grid — tous les spacings multiples de 4
6. Navigation = sticky — toujours visible
7. Responsive first — concevoir mobile d'abord, adapter desktop
8. Animations légères — 200ms ease-out pour hover, 300ms pour modals
9. Icônes et texte alignés — toujours gap de 8px minimum entre icône et label
10. Tous les formulaires ont un label flottant ou label au-dessus (pas de placeholder seul)

8. Thème Flutter global

// lib/core/theme/app_theme.dart
ThemeData get lightTheme => ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.light(
    primary: AppColors.primary,
    secondary: AppColors.purple,
    error: AppColors.danger,
    surface: AppColors.bgBase,
    background: AppColors.bgSunken,
  ),
  textTheme: TextTheme(
    displayLarge: AppTextStyles.display,
    headlineLarge: AppTextStyles.h1,
    headlineMedium: AppTextStyles.h2,
    headlineSmall: AppTextStyles.h3,
    titleLarge: AppTextStyles.h4,
    bodyLarge: AppTextStyles.body,
    bodyMedium: AppTextStyles.bodySmall,
    labelLarge: AppTextStyles.label,
    labelSmall: AppTextStyles.caption,
  ),
  cardTheme: CardTheme(
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(AppRadius.lg),
      side: BorderSide(color: AppColors.borderSubtle),
    ),
    color: AppColors.bgRaised,
  ),
  appBarTheme: AppBarTheme(
    backgroundColor: AppColors.bgRaised,
    elevation: 0,
    scrolledUnderElevation: 1,
    shadowColor: AppColors.borderSubtle,
    titleTextStyle: AppTextStyles.h4,
    iconTheme: IconThemeData(color: AppColors.textPrimary),
  ),
  scaffoldBackgroundColor: AppColors.bgSunken,
  dividerColor: AppColors.borderSubtle,
);