Livrable 01

Charte graphique & design system

Cette page présente l'intégralité du système visuel de Nadeya : palette, typographie, espacement et composants d'interface. Elle sert de support de validation avec le client et de référence pour toute l'équipe. Chaque élément affiché ici est le composant réel utilisé dans le site, pas une capture.

Les entrées de menu de l'en-tête et du pied de page sont fournies en propriétés par la page. Seules les pages déjà construites y figurent aujourd'hui.

Palette

Couleurs exprimées en OKLCH, un espace où deux teintes de même luminance paraissent réellement aussi claires l'une que l'autre. Toutes les valeurs sont dans le gamut sRGB : aucun écrêtage par le navigateur.

Primaire — vert profond

Couleur de marque. Agriculture, croissance, vert du drapeau camerounais. Boutons principaux, liens, états actifs.

  • 50

    #F0F9F3

  • 100

    #DDF2E3

  • 200

    #BDE6CA

  • 300

    #95D3A9

  • 400

    #67B685

  • 500

    #429865

  • 600

    #2A784C

  • 700

    #1D5D39

  • 800

    #16472B

  • 900

    #113721

  • 950

    #051D0F

Accent — or chaud

Jaune du drapeau, prospérité, commerce. Appels à l'action secondaires, badge « Vérifié », mises en avant. Jamais pour une erreur.

  • 50

    #FFF8ED

  • 100

    #FFEFD2

  • 200

    #FEDFA3

  • 300

    #F9CD72

  • 400

    #F1BC43

  • 500

    #E0A709

  • 600

    #B98705

  • 700

    #946908

  • 800

    #7A5402

  • 900

    #614103

  • 950

    #382302

Neutres chauds

Gris légèrement beiges, jamais bleutés : ils s'accordent aux photographies de produits agricoles et artisanaux.

  • 50

    #FBFAF8

  • 100

    #F6F4F1

  • 200

    #EAE7E2

  • 300

    #D8D4CE

  • 400

    #B0AAA4

  • 500

    #8B867F

  • 600

    #6C6760

  • 700

    #544F4A

  • 800

    #3B3732

  • 900

    #26221E

  • 950

    #13100D

Couleurs d'état

Quatre états, chacun distinct des deux couleurs de marque. Le rouge d'erreur est volontairement très éloigné de l'or de l'accent.

Succès

6.22:1

Alerte

5.04:1

Erreur

6.85:1

Information

6.91:1

Jetons sémantiques

Un composant ne cite jamais « vert 700 » mais « brand ». C'est ce qui permet au mode sombre d'exister sans modifier une seule ligne de composant.

Basculez votre système en mode sombre : toute la page suit, sans rechargement.

  • --color-brand7.84 · 7.24
  • --color-gold8.52 · 8.52
  • --color-surface— · —
  • --color-surface-raised— · —
  • --color-surface-sunken— · —
  • --color-text15.14 · 17.27
  • --color-text-muted5.37 · 8.24
  • --color-border-strong3.46 · 5.25
  • --color-success6.22 · 10.08
  • --color-warning5.04 · 9.74
  • --color-danger6.85 · 8.77
  • --color-info6.91 · 9.03

Typographie

Deux familles auto-hébergées au build par next/font. Aucune requête vers un serveur de polices tiers n'est émise à l'exécution.

Titres — Plus Jakarta Sans

Aa Bb Cc — Éé Àà Çç 0123

Du caractère sans excès : le « a » à double étage et les terminaisons franches donnent une voix aux titres tout en restant lisibles en petit.

Texte — Inter

Le poivre blanc de Penja bénéficie d'une indication géographique protégée depuis 2013.

Dessinée pour l'écran. Hauteur d'x élevée, ouvertures larges, diacritiques françaises complètes.

Échelle typographique

  • 2xs11pxNadeya
  • xs12pxNadeya
  • sm14pxNadeya
  • base16pxNadeya
  • lg18pxNadeya
  • xl22pxNadeya
  • 2xl24pxNadeya
  • 3xl30pxNadeya
  • 4xl36pxNadeya
  • 5xl44pxNadeya

Espacement

Rythme de 4 pixels. Quatre familles d'usage : micro (4-8) à l'intérieur d'un badge, composant (12-16) dans une carte, bloc (24-32) entre deux cartes, section (64-96) entre deux sections de page.

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1248px
  • 1664px
  • 2496px

Rayons

Des formes douces mais jamais rondes : le B2B doit rester sérieux. 8 pixels est la valeur par défaut des champs et des boutons.

  • xs

    4px

  • sm

    6px

  • md

    8px

  • lg

    12px

  • xl

    16px

  • 2xl

    24px

  • full

    ∞

Élévations

Ombres teintées du neutre chaud. Une ombre grise pure se remarque immédiatement sur un fond beige.

  • xs

  • sm

  • md

  • lg

  • xl

Mouvement

Trois durées seulement. Au-delà de 400 ms, une interface de travail devient pénible.

  • --duration-instant

    80 ms

  • --duration-fast

    140 ms

  • --duration-base

    220 ms

  • --duration-slow

    360 ms

Toutes les animations sont neutralisées si le système déclare « réduire les animations ».

Boutons

Une seule action principale par écran. Le vert porte l'action prioritaire, l'or les appels secondaires.

Primaire · Secondaire · Accent · Discret · Lien

Tailles

États

Badges

Un badge qualifie une entité, il ne remplace jamais un bouton. La couleur n'est jamais le seul porteur de sens : le libellé et la coche le doublent.

NouveauEn stockVérifiéStock faible

Cartes

Support unitaire du catalogue : une fiche produit, une société, un événement.

Poivre blanc de Penja

Coopérative agricole du Moungo

Vérifié

Poivre blanc IGP, récolte manuelle, séchage naturel. Conditionnement de 500 g à 25 kg. Disponible à l'export.

38 avis

À partir de 12 500 FCFA / kg

Squelettes de chargement

Champs de formulaire

Chaque champ est associé à son étiquette, ses aides et ses erreurs. Hauteur de 44 pixels : la cible tactile minimale recommandée.

Choisissez la filière principale de votre activité.

Composants de composition

Assemblages récurrents des pages du catalogue.

Produits à la une

Une sélection de produits camerounais prêts à l'export, mise à jour chaque semaine.

Tout voir

Fil d'Ariane

Note

38 avis7 avisaucun avis

Aucun fournisseur pour ces critères

Élargissez la zone géographique ou retirez un filtre pour afficher davantage de résultats.

Réinitialiser les filtres

Accessibilité

Les points suivants sont vérifiés sur l'ensemble du système, dans les deux thèmes.

  • Contrastes WCAG AA calculés, pas estimés : 4,5:1 pour le texte courant, 3:1 pour le texte large et les éléments d'interface.
  • Focus clavier visible partout, dessiné en contour pour rester perceptible en mode contraste forcé de Windows.
  • Cibles tactiles d'au moins 44 pixels sur écran tactile.
  • Animations neutralisées si le système demande de réduire les mouvements.
  • Structure HTML sémantique, attributs ARIA uniquement là où le HTML ne suffit pas, et jamais la couleur comme seul porteur d'information.