Aller au contenu principal

Design system

L'identité visuelle de MomBiz Academy s'articule autour d'une palette Plum Bordeaux chaleureuse et féminine, contrastée par un duo typographique serif / sans-serif qui équilibre élégance et lisibilité.

Toutes les valeurs ci-dessous sont centralisées dans packages/ui/src/tokens.ts (importées via @app/ui/tokens) et exposées via cinq objets : C (couleurs), S (espacements), T (typographie), R (border-radius), SH (ombres) et G (gradients).

Palette de couleurs​

C.brand
#8B1A50
Plum Bordeaux — couleur primaire
C.brandDark
#6B1040
Pressed / gradient end
C.brandLight
#F5E6EF
Surface teintée / hover
C.accent
#C4567A
Rose Fuchsia — accent
C.pageBg
#FDF5F8
Blush Rose — fond de page
C.ink
#2A0D1F
Prune nuit — texte principal
C.success
#10B981
Feedback positif
C.error
#EF4444
Feedback erreur

La couleur brand (#8B1A50) est utilisée pour les éléments primaires : boutons, liens, accents, en-têtes. Le page background (#FDF5F8) crée une atmosphère douce qui distingue MomBiz Academy des plateformes e-learning génériques au fond blanc neutre.

Règles d'usage

  • Utiliser C.brand pour un seul élément primaire par section visible (un CTA principal, pas trois)
  • C.brandLight pour les surfaces hover ou les états sélectionnés
  • C.accent (Rose Fuchsia) pour un accent secondaire, jamais comme fond de bouton primaire
  • C.success / C.error strictement réservés aux retours utilisateur (validation, erreur)

Typographies​

Titres — Playfair Display
Forme-toi.
Entreprends. Rayonne.
Sous-titre élégant
Corps — Montserrat

MomBiz Academy rassemble des formations en marketing digital pensées pour les mamans entrepreneures africaines.

Texte secondaire pour les annotations, les libellés et les légendes d'interface.

Le duo s'articule selon une règle simple :

  • Playfair Display (T.fontDisplay) — polices à empattements, réservée aux titres h1 à h4, aux nombres mis en avant (KPIs) et aux citations. Donne le caractère "magazine pédagogique" à la plateforme.
  • Montserrat (T.fontBody) — police géométrique sans empattements, pour tout le reste : paragraphes, libellés de formulaires, navigation, boutons. Optimisée pour la lisibilité sur petits écrans.

Les deux familles sont chargées depuis Google Fonts. Les graisses utilisées sont 400, 500, 600, 700.

Espacements​

L'application suit une grille de 8 px exposée via le token S :

S[1]  =  4px      S[8]  =  32px
S[2]  =  8px      S[10] =  40px
S[3]  =  12px     S[12] =  48px
S[4]  =  16px     S[16] =  64px
S[5]  =  20px     S[20] =  80px
S[6]  =  24px     S[24] =  96px

Les valeurs intermédiaires (par exemple 7 ou 9) ne sont pas exposées : le rythme visuel reste cohérent en se limitant aux multiples de 8.

Primitives de layout​

Inspirées de l'auto-layout Figma, trois composants polymorphiques couvrent 90 % des besoins :

<Stack gap={6} align="start">
  <h2>Titre</h2>
  <p>Paragraphe</p>
</Stack>

<Row gap={4} justify="between" align="center">
  <Logo />
  <UserMenu />
</Row>

<Grid cols={3} gap={5}>
  <Card />
  <Card />
  <Card />
</Grid>
  • <Stack> : flex vertical avec gap et align
  • <Row> : flex horizontal avec gap, justify, align
  • <Grid> : CSS Grid avec cols et gap

Toutes acceptent un prop as pour changer l'élément HTML (section, nav, article, etc.) et un prop style pour les surcharges ponctuelles. Les valeurs de gap correspondent aux clés du token S.

Border-radius et ombres​

R.sm   =  8px          SH.xs  =  ombre subtile
R.md   = 10px          SH.sm  =  ombre carte
R.lg   = 12px          SH.md  =  ombre bouton hover
R.xl   = 16px          SH.lg  =  ombre dropdown / modal
R['2xl'] = 20px        SH.xl  =  ombre cinétique (éléments flottants)
R.full = 9999px        SH.tooltip = ombre fine pour tooltips

Composants UI partagés​

Au-delà des primitives, les apps mutualisent plusieurs composants visuels via packages/ui/src/components/shared/ et components/ui/ (importés via @app/ui) :

  • Logo — logotype textuel, supporte un mode onDark pour les fonds sombres
  • TopHeader + BottomNav — navigation des espaces utilisateur (fixe en haut + flottante en bas)
  • UserSpaceLayout — wrapper qui assemble TopHeader + <main> scrollable + BottomNav
  • PageContainer — limite la largeur de contenu à 1280 px pour éviter les pages "qui touchent les bords" sur grand écran
  • ProtectedRoute — guard de routage par rôle

Pour la convention d'usage de ces composants côté code, voir le guide Conventions de code.