F FAPAM Ferme Agro Pastorale le Mérite — Design System
Auto-test… Version 1.0 16 juillet 2026
Fondations · Tokens

01Fondations

Les couleurs nationales du Togo relues pour un usage B2B : vert agricole (confiance), or poussin (l'excellence, le poussin d'un jour) et rouge souveraineté (accent parcimonieux). Neutres chauds — jamais de gris froid.

Couleurs

Cliquez un échantillon pour copier son code Hex. Direction C (vert · or · rouge) adoptée parmi trois explorations.

Typographie

Archivo · display · titres · figures-clés · wordmark · 600–900

Souveraineté avicole

Le poussin d'un jour, fierté du Togo

Aa600 Aa700 Aa800 Aa900
IBM Plex Sans · body · UI · formulaires · bilingue FR/EN · 400–600

FAPAM élève des parentaux de souche pour produire des poussins d'un jour, vendus aux éleveurs et abattoirs du Togo.

FAPAM breeds parent stock to supply day-old chicks to local farmers and processors — reducing imports and building poultry sovereignty.

Qualité · Hygiène · Fierté locale · Excellence · Développement durable — 0123456789

IBM PLEX MONO · DATA / RÉFÉRENCES

LOT  FAP-2026-W03-A   SOUCHE Cobb 500

CMD  #TG-004821     QTÉ 12 500 poussins

CAP  350 000 / semaine   STATUT CONFIRMÉ

Échelle typographique

display-xl · 60Poussin d'un jour
h1 · 36Ferme le Mérite
h2 · 28Nos parentaux
h4 · 18Prise de commande
body · 16Texte courant lisible en FR/EN.
overline · 11Souveraineté avicole

Espacement — grille 4 px

1·4
2·8
3·12
4·16
6·24
8·32
12·48
16·64

Rayons — sobres, industriels

xs·2
sm·4
md·6
lg·10
pill

Élévation — ombres chaudes

xs
sm
md
lg
Protéger la marque

03Règles

Garder la marque lisible et crédible : contraste, intégrité, ton. Sérieux et industriel malgré le poussin — jamais mièvre.

Do & Don't

À faire

  • Négatif du logo sur --green-900 / --green-950.
  • Réserver la zone d'exclusion (≈ hauteur du « F »).
  • Or (--gold-500) en accent : CTA, chiffres-clés, filets.
  • Filet tricolore vert→or→rouge sur bords de cartes / haut de section.
  • Chiffres avec séparateur d'espace en FR (350 000), virgule en EN.
  • Casse phrase pour titres & boutons ; MAJUSCULES pour kickers mono courts.

À éviter

  • Déformer, étirer ou incliner le logo.
  • Poser le logo sur un fond saturé (or/rouge plein) sans contraste.
  • Gris froids : les neutres restent chauds (ink #12140E).
  • Emoji — jamais. Seuls le décoratif et le glyphe WhatsApp.
  • Rouge en grande surface : accent souveraineté parcimonieux.
  • Coins trop arrondis / ombres noires vitreuses : rendu mou.
Signatures. « Le poussin d'un jour, la fierté d'un pays. » · « Notre souche, notre souveraineté. » · « L'excellence, dès le premier jour. » — voir aussi la voix collective (vous), FR d'abord, EN en miroir.
Livrables

04Applications

Chaque livrable est rendu en direct, fidèle à l'original — cartes de visite recto/verso et posts réseaux sociaux 1080×1080.

Cartes de visite — équipe & propositions recto


      

Posts réseaux sociaux — 4 propositions 1080×1080


      
Bibliothèque · React

05Composants

Rendus en vrai React (React.createElement, sans Babel), interactifs, avec leur code source réel dépliable. Namespace : window.FAPAMDesignSystem.

Code source des composants

Source réel de chaque composant, chargé à l'exécution depuis des blocs <script type="text/plain">.

ChickMark.jsx

Logo.jsx

Monogram.jsx

Crest.jsx

Button.jsx

Badge.jsx

Card.jsx

Input.jsx

LanguageToggle.jsx

StatFigure.jsx

Page d'exemple

06Storefront

La page d'accueil bilingue (vitrine · boutique · prise de commande) rendue en React live dans un mini-viewport défilable. Basculez FR/EN, survolez les boutons, validez le formulaire.

fapam.tg — Ferme Agro Pastorale le Mérite

      

      
Dans cette page unique autonome, le panneau d'édition « Tweaks » et le slot d'image glisser-déposer de l'app d'origine sont remplacés par un placeholder statique (ils dépendent d'un hôte d'édition). Le reste est fidèle au fichier ui_kits/site-web/site.jsx.
Fabrication

07Production

Contraintes de fabrication propres au projet — impression papeterie, signalétique, packaging poussins, et substitutions à valider.

Impression & couleur

  • Primaire vert #1B5E3F — équivalents à valider : CMJN ≈ 78/33/78/24, Pantone ≈ 7734 C.
  • Or poussin #E6A417 — CMJN ≈ 8/36/95/0, Pantone ≈ 1235 C.
  • Rouge souveraineté #B8362B — accent, jamais aplat dominant.
  • Fond papeterie : ivoire --paper #F7F4EC ou blanc.
  • Filet tricolore : conserver l'ordre vert → or → rouge, 60% sur l'or.

Supports & matières

  • Carte de visite : 85×54 mm, coins vifs, ≥ 300 g, recto vert principal.
  • Écusson : usage sceaux / certificats / packaging — version filaire pour gravure & tampon.
  • Monogramme : favicon 16 px, app icon, marquage œufs/caisses.
  • Négatif obligatoire sur emballages sombres (vert 900).
  • Broderie / gravure : privilégier le monogramme ou la silhouette minimale (monotone).
Substitutions à acter. Fonts Archivo / IBM Plex (Google Fonts, licence ouverte) — ici auto-hébergées en base64 dans ce fichier ; aucune photo n'est livrée (prévoir photographie ferme / poussins réelle) ; icônes UI futures : Lucide (trait 1,5–2 px). Le poussin, l'écusson et le wordmark sont des propositions issues d'un brief écrit — à choisir et affiner.
Export · sans serveur

08Fichiers

Téléchargements générés à la volée via Blob — aucun serveur requis. Marques, symboles et tokens en SVG/CSS autonomes, prêts à l'emploi.

Marques — logo, monogramme, écusson

SVG vectoriels autonomes (couleurs de marque en dur, aucune dépendance). Le texte du wordmark utilise Archivo ; à vectoriser pour un usage sans police.

FAPAM

logo-positif.svg

Wordmark principal (poussin + FAPAM + descripteur) sur fond clair.

FAPAM

logo-negatif.svg

Wordmark en négatif — pour fonds sombres (vert 900/950, encre).

F

monogramme.svg

Tuile « F » + poussin — favicon, app icon, marquage caisses/œufs.

ecusson-plein.svg

Emblème plein (vert + or) — sceaux, packaging, certificats.

ecusson-filaire.svg

Emblème filaire — gravure, tampon, marquage à chaud.

Symboles & tokens

chick-geometric.svg

Marque primaire — poussin géométrique, couleurs de marque.

chick-rounded.svg

Traitement illustré / rond, en réserve.

chick-minimal.svg

Silhouette monotone (currentColor) — favicon, petites tailles.

fapam-tokens.css

Tous les tokens (couleurs, typo, spacing, effets) + alias sémantiques, dans :root.

Astuce : « Imprimer → Enregistrer en PDF » produit une version propre (nav masquée, code déplié, blocs non coupés).