Design System · Fondations

Le catalogue vivant du design system Feve

Chaque élément ci-dessous est un composant réel du site — mêmes classes, mêmes tokens. On change un token, tout le site suit.

24 familles1 source de véritétokens → 108 pages

Fondations

couleurs · typo · espacements

Fondations

Couleurs, tailles, espacements et rayons vivent dans les variables globales. On change un token, tout le site suit.

Couleurs

Le token primary bascule selon l'espace (Investisseur par défaut, Installation, Transmission) ; le reste de la palette est constant.

brand

#004757 · espace Investisseur

primary

#004757 → #ffeb83 → #bddfd3 · selon l'espace

primary-hover

#2b7383 · change par espace

accent

#ffeb83 · espace Installation

accent-soft

#fff4bb · survol jaune

transmission

#bddfd3 · espace Transmission

cream

#edebe7

muted

#f6f6f7

background

#ffffff

border

#e6e4e0

muted-foreground

#414141 · texte secondaire

foreground

#1d1d1d

Typographie

Display : Mazius italique (titres, grands chiffres). Corps : Open Sauce Sans. Échelle Tailwind, valeurs mobiles automatiques.

text-sm · 14px

Fermes En Vie — foncière solidaire

text-base · 16px

Fermes En Vie — foncière solidaire

text-2xl · 24px

Fermes En Vie

text-4xl · 36 / mob 30

Fermes En Vie

text-5xl · 48 / mob 36

Fermes En Vie

text-6xl · 60 / mob 40

Fermes En Vie

Espacements

Échelle space-1 (4px) → space-20 (80px), câblée aux gaps et paddings.

gap-4 · 16px

gap-8 · 32px

gap-12 · 48px

Rayon : token unique radius = 8px, appliqué aux cartes, boutons, images et vidéos. Pills : 9999px.

Éléments

6 atomes
Icônesui-icon · Lucide

16px par défaut, is-lg = 24px, trait currentColor. + une vingtaine d'icônes Lucide dans ui/icons (maison, épingle, feuille, poignée de main…).

Badgeui-badge

Foncière solidaire

Installation

Transmission

Brand

Chips · filtresui-chip
WebinairePodcastTransmission
Souligné éditorialui-underline

Titre souligné accent

Titre souligné mint

Composants

vrais composants natifs
Content CardContentCard
Info CardInfoCard

Un modèle gagnant-gagnant

FEVE achète la ferme et la loue en bail rural de long terme à des agriculteurs sélectionnés pour leur projet agroécologique.

En savoir plus

TestimonialTestimonial · Invest + Secondary

Grâce à FEVE, j'ai pu m'installer sur une ferme que je n'aurais jamais pu financer seule. Un vrai projet de vie.

M
Marie Dupont
Maraîchère installée en 2023

Grâce à FEVE, j'ai pu m'installer sur une ferme que je n'aurais jamais pu financer seule. Un vrai projet de vie.

M
Marie Dupont
Maraîchère installée en 2023
Process StepsProcessSteps
1

Déposez votre projet

Vous nous partagez votre projet d'installation agricole en quelques minutes.

2

Étude du projet

Nos équipes étudient la viabilité économique et agronomique de la ferme.

3

Financement citoyen

La ferme est financée par la communauté d'investisseurs solidaires FEVE.

4

Installation

Vous vous installez en bail rural et démarrez votre activité agroécologique.

FAQFaqItem

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Comment fonctionne l'investissement chez FEVE ?

Vous investissez dans une foncière solidaire qui achète des fermes et les loue à des agriculteurs en bail rural environnemental de long terme.

Bullet Listui-list

  • Labellisée ESUS et Finansol, agréée par l’AMF

  • Accessible dès 500 €, sans frais d’entrée

Bullet List · texteui-list-item is-bulleted

  • Présentation de FEVE

  • Présentation de La Grange

  • Questions / réponses

Tabsui-tabs-list

Rapports d’activité

Rapports d’impact

Documents

Chaque semestre, un rapport d’activité fait le point sur les fermes financées : jalons atteints, chiffres clés et prochaines étapes.

Stats BannerStatsBanner
+120

fermes financées

8 000

hectares en agroécologie

15 000

citoyens investisseurs

Sections

vrais composants natifs
HeroHero
Hero v2Hero v2 · 7 variantes (+ Split/Accent) · image / vidéo / slot · checklist · note · 3 actions · hooks JS

Donnez vie à votre projet agricole

FEVE finance les terres et bâtiments pour vous permettre de vous installer dans de bonnes conditions.

Tester mon éligibilitéDécouvrir le financement
Ferme agroécologique financée par FEVE

Une ferme accompagnée par FEVE

Voyez concrètement l’impact de votre épargne

Découvrez en vidéo comment l’épargne citoyenne finance une nouvelle génération de fermes agroécologiques.

Investir avec FEVE

Comprendre FEVE en 1 minute

https://player.vimeo.com/video/887594080?dnt=1
Découvrez FEVE en vidéo

Rendre la terre agricole accessible à celles et ceux qui la cultivent

Un Hero éditorial peut fonctionner sans média et sans action, sans conserver de colonne vide.

Le hero complet : checklist, note et lien

<ul><li>Variante Split / Accent — fond accent-soft, CTA repassé en teal</li><li>Checklist richText à coches Lucide (marqueur en currentColor)</li><li>Trois actions indépendantes : CTA, bouton secondaire, lien</li></ul>
CTA principalBouton secondaireLien complémentaire indépendant (hook JS possible)
La note s'affiche sous les actions — mention légale, astérisque, délai…
https://player.vimeo.com/video/978202951?title=0&byline=0&portrait=0
Vidéo portrait 9:16 — toujours vérifier le ratio natif
Section HeaderSectionHeader

Les dernières fèves installées

Découvrez les fermes financées par FEVE partout en France.

CTA BannerCtaBanner

Prêt à donner du sens à votre épargne ?

Rejoignez les 15 000 citoyens qui financent l'installation de la nouvelle génération agricole.

Découvrir l'investissement
Logo Stripui-logo-strip
Videoui-video
Aperçu vidéo Feve (format vertical)
▶
Zigzagui-zigzag
Ferme agroécologique financée par Feve

Alternance automatique

Le composant inverse image et texte une ligne sur deux, sans classe supplémentaire.

Proseui-prose

Titre de niveau 2

Le style Prose met en forme le contenu riche du CMS : titres, paragraphes, listes et citations, tous dérivés des tokens.

Une citation éditoriale en Mazius italique.

Un intertitre h3 pour structurer l'article

Un paragraphe avec du texte en gras et un lien inline vers une page — les liens non classés prennent le teal de marque et se soulignent au survol.

  • Une liste à puces héritée du rich text CMS
  • Chaque item garde le rythme vertical de la prose
  • Et les puces reprennent la couleur du texte
  1. Les listes numérotées sont stylisées aussi
  2. Avec la même indentation
  3. Et les mêmes espacements

Un h4 de fin de hiérarchie

Sous un h4, le paragraphe garde son interlignage — et une image insérée dans l'article prend toute la largeur de la colonne avec un rayon de 8 px :

Une ferme financée par FEVE
FEVE

-

Mis à jour le

1/1/2026

Titre de l'article

Description de l'article

Illustration de l'article
Media FrameMediaFrame · lpr-media-row / lpr-media-content
Une ferme financée par FEVE

📝 Je vérifie mon éligibilité

Je remplis le formulaire et si je valide les premières conditions, j'échange avec l'équipe FEVE lors d'un rendez-vous de 30 minutes.

📤 J'envoie mon dossier à FEVE

Si mon projet répond aux critères et à la charte agroécologique de FEVE, j'envoie un dossier plus détaillé et chiffré.

🏡 Je visite la ferme

J'organise une visite avec un membre de l'équipe FEVE et la personne cédante, pour présenter la ferme et partager les infos clés.

📊 Mon dossier est étudié en comité

J'envoie mon prévisionnel économique et FEVE approfondit l'étude pour la présenter au comité d'investissement des foncières.

Technique

invisibles
Composants invisiblesgroup : chrome

  • FaqEnhancer — anime l'accordéon FAQ (à poser sur toute page qui a une FAQ)

  • ProseStyles — met en forme les articles / rich text (classe ui-prose)

  • NavbarEnhancer — animations du menu (déjà intégré à la navbar)

  • LpStylesBridge — aligne les boutons des sections LP collées sur le DS

  • LpMetricsHook — injecte les chiffres clés en direct depuis l'API

  • DialogDownloadGuide — la modale de téléchargement du guide investisseur

La navbar et le footer sont déjà au design system. Cette page de catalogue n'affiche pas le chrome du site : il se vérifie sur n'importe quelle autre page.

Design System Feve — catalogue v2. Le menu, le footer et les sections de contenu spécifiques ne figurent pas : ce sont des instances, pas des composants de catalogue.