COOP-CA AMIFOND

Core Banking System · PC-EMF · Django

DEVELOPMENT

Design System

Tokens, composants et utilitaires CSS d'AMIFOND

KIT VISUEL — COOP-CA AMIFOND

Primary #1a5276
Secondary #d4ac0d
Success
Danger
Warning
Info
TITRE (HEADLINE)
Aa
800 · clamp(1.75rem, 4vw, 2.75rem)
CORPS (BODY)
Aa
400 · 1rem · line-height 1.6
LIBELLÉ (LABEL)
Aa
500 · 0.875rem · text-muted
BOUTONS
Principal
Sec.
Inversé
Outline
RECHERCHE
Rechercher…
PROGRESSION
NAVIGATION
BADGES
Essentiel Stable Avancé Neutre
ACTIONS ICÔNES
OMBRES & RAYONS

Couleurs

Couleurs principales
Primary --primary-color · #1a5276
Primary Light --primary-light · #eef3f7
Secondary --secondary-color · #d4ac0d
Secondary Light --secondary-light · #fcf6d6
Accent Vert --accent-color · #117a65
Black --black · #000000
Couleurs fonctionnelles
Success --success-color · #27ae60
Danger --danger-color · #c0392b
Warning --warning-color · #f39c12
Info --info-color · #2980b9
Couleurs de surface & texte
Body BG --body-bg · #f8f9fa
Body Color --body-color · #333333
Text Muted --text-muted · #6e7191
Border --border-color · #e0e0e0
Card BG --card-bg · #ffffff
Footer BG --footer-bg · #0d2c40

Typographie

Headings

Heading 1 — 2.5rem

Heading 2 — 2rem

Heading 3 — 1.75rem

Heading 4 — 1.5rem

Heading 5 — 1.25rem
Heading 6 — 1rem

Corps de texte & utilitaires

Texte standard — font-size: 16px, line-height: 1.6, color: --body-color

Texte atténué — .text-muted

Texte primaire — .text-primary

Texte secondaire — .text-secondary

Texte blanc — .text-white

code inline — police système monospace

Boutons

Variantes remplies

btn-primary btn-secondary btn-white btn-black

Variantes outline

btn-outline-primary btn-outline-secondary btn-outline-black

Tailles

btn-lg Default btn-sm

Cards

card-header

Contenu dans .card-body — padding standard --spacing-lg.

Header + Footer

Corps de la card avec du contenu.

card-footer — fond --primary-light

Card avec actions

Texte descriptif de la card.

Badges

Essentiel .badge-primary
Avancé .badge-warning
Intermédiaire .badge-neutral
Stable .badge-success
GET HTTP GET
POST HTTP POST
PATCH HTTP PATCH
DELETE HTTP DELETE

Alertes

Succès : Opération effectuée avec succès. .alert-success
Erreur : Une erreur est survenue. .alert-danger
Attention : Vérifiez les informations saisies. .alert-warning
Information : Une mise à jour est disponible. .alert-info

Formulaires

Champs de saisie

Ombres

--shadow-sm
--shadow-md
--shadow-lg
--shadow-glow

Espacements

--spacing-xs 0.25rem
--spacing-sm 0.5rem
--spacing-md 1rem
--spacing-lg 1.5rem
--spacing-xl 2rem
--spacing-xxl 3rem

Border Radius

--border-radius-sm 0.25rem
--border-radius-md 0.5rem
--border-radius-lg 1rem
999px (pill) tags · badges

Utilitaires

Alignement texte

text-left
text-center
text-right

Backgrounds

.bg-primary
.bg-secondary
.bg-white
.bg-black

Marges (mb / mt)

mb-1 → --spacing-xs (0.25rem)
mb-2 → --spacing-sm (0.5rem)
mb-3 → --spacing-md (1rem)
mb-4 → --spacing-lg (1.5rem)
mb-5 → --spacing-xl (2rem)
Idem pour mt-* (margin-top)

Layout utilitaires

.cards-grid → 3 col. desktop, 2 tablette, 1 mobile
.layout-sidebar → 1fr + 320px sidebar
.breadcrumb → fil d'Ariane
.module-item → ligne module cliquable
.changelog-entry → entrée bord coloré
.code-block → bloc code sombre