Design system

Structure visuelle IHR

Guide de reference pour les couleurs, composants, typographie, sections et regles d'espacement du site IHR.

Couleurs

Palette principale orientee confiance, urgence medicale et lisibilite.

Primary Green#63c333
Dark Green#2d5e10
Soft Gray#f3f6ef
Base White#ffffff
Text Dark#20291b

Typographie

Heading font

Montserrat 600-700

Body font

Inter regular for paragraphs, forms, and extended reading.

Boutons

Use `btn-primary` for donations, `btn-outline` for navigation support, `btn-soft` on dark backgrounds.

Cartes

Value Card

Mission block

Used for values and concise textual evidence.

Project Card

Field intervention

Includes country, intervention type, CTA.

Option Card

Donation method

Used on donate page with trust details.

Icones

MED AID AI WA

Icons appear inside circular green soft backgrounds for visual consistency.

Layouts de section

  • Hero: image + emotional headline + dual CTA.
  • Content blocks: `grid-2`, `grid-3`, `grid-4` responsive.
  • Credibility blocks: `highlight-box` and `callout` for trust messages.
  • Action persistence: fixed donate button + mobile sticky donate.

Regles d'espacement

Spacing scale based on rem units for consistency:

Space-4
1rem
Space-6
1.5rem
Space-10
2.5rem
Space-16
4rem

Default section rhythm uses `space-16`; compact cards use `space-5` or `space-6`.

Faire un don Faire un don maintenant
Assistant IHR

Chatbot placeholder.