# DSBJ - Design Système du Bénin > Le Design Système du Bénin (DSBJ) est le système de design officiel de la République du Bénin. Il fournit 53 composants HTML/CSS/JS réutilisables, accessibles (WCAG 2.1 AA), avec le préfixe CSS `bj-` et les variables CSS `--bj-*`. Package npm : `@flrxnt/dsbj`. Informations clés : - Package npm : `@flrxnt/dsbj` (ES module + UMD + CSS) - Préfixe CSS : `bj-` (ex: `bj-btn`, `bj-card`, `bj-header`) - Variables CSS : `--bj-*` (ex: `--bj-color-vert-benin-main-491`, `--bj-spacing-4v`) - Thème sombre : attribut `data-bj-theme="dark"` sur `` - Polices : Open Sans (corps) + Spectral (titres éditoriaux) - Icônes : Remix Icon (`ri-*`) - Grille : 12 colonnes (`bj-grid-row`, `bj-col-*`, `bj-col-md-*`, `bj-col-lg-*`) - Accessibilité : WCAG 2.1 AA, navigation clavier, ARIA, focus-visible, skip links - Build : ~78 Ko CSS, ~7 Ko JS ES, ~6 Ko JS UMD ## Installation - [Guide d'installation](https://dsbj.site/docs/premiers-pas/installation.html): npm install @flrxnt/dsbj, CDN unpkg, import SCSS - [Guide d'utilisation](https://dsbj.site/docs/premiers-pas/utilisation.html): Structure de page HTML, thèmes, initialisation JS ## Fondamentaux - [Principes](https://dsbj.site/docs/fondamentaux/principes.html): Principes de conception du DSBJ - [Couleurs - Palette](https://dsbj.site/docs/fondamentaux/couleurs-palette.html): Palette officielle, tokens couleur --bj-color-* - [Couleurs - Utilisation](https://dsbj.site/docs/fondamentaux/couleurs-utilisation.html): Sémantique des couleurs, action, texte, fond - [Typographie](https://dsbj.site/docs/fondamentaux/typographie.html): Open Sans, Spectral, échelle typographique --bj-fs-* - [Espacement](https://dsbj.site/docs/fondamentaux/espacement.html): Tokens --bj-spacing-*, classes utilitaires bj-m-* bj-p-* - [Grille](https://dsbj.site/docs/fondamentaux/grille.html): Grille 12 colonnes responsive bj-grid-row, bj-col-* - [Ombres et élévation](https://dsbj.site/docs/fondamentaux/ombres-elevation.html): Tokens --bj-shadow-* - [Icônes](https://dsbj.site/docs/fondamentaux/icones.html): Remix Icon, usage avec aria-hidden="true" - [Médias](https://dsbj.site/docs/fondamentaux/medias.html): Ratios d'images, vidéos responsive - [Classes utilitaires](https://dsbj.site/docs/fondamentaux/classes-utilitaires.html): Utilitaires espacement, couleur, texte, flexbox, affichage ## Composants - Navigation - [Header](https://dsbj.site/docs/composants/header.html): bj-header, bj-header__body, bj-header__brand, bj-header__nav, role="banner", aria-expanded - [Footer](https://dsbj.site/docs/composants/footer.html): bj-footer, bj-footer__top, bj-footer__bottom, role="contentinfo" - [Navigation](https://dsbj.site/docs/composants/navigation.html): bj-nav, bj-nav__list, bj-nav__link - [Breadcrumb](https://dsbj.site/docs/composants/breadcrumb.html): bj-breadcrumb, bj-breadcrumb__list, aria-current="page" - [Sidemenu](https://dsbj.site/docs/composants/sidemenu.html): bj-sidemenu, bj-sidemenu__list, bj-sidemenu__btn - [Skiplink](https://dsbj.site/docs/composants/skiplink.html): bj-skiplinks, bj-skiplinks__link, lien d'évitement - [Pagination](https://dsbj.site/docs/composants/pagination.html): bj-pagination, bj-pagination__link--active - [Sommaire](https://dsbj.site/docs/composants/summary.html): bj-summary, bj-summary__list, ancres de page ## Composants - Base - [Logo](https://dsbj.site/docs/composants/logo.html): bj-logo, bj-logo--lg, bj-logo--xl, bj-logo__motto - [Bouton](https://dsbj.site/docs/composants/button.html): bj-btn, bj-btn--secondary, bj-btn--tertiary, bj-btn--sm, bj-btn--lg, bj-btn--icon, bj-btn-group - [Lien](https://dsbj.site/docs/composants/link.html): bj-link, bj-link--sm, bj-link--lg, bj-link--icon-right - [Badge](https://dsbj.site/docs/composants/badge.html): bj-badge, bj-badge--info, bj-badge--success, bj-badge--warning, bj-badge--error - [Tag](https://dsbj.site/docs/composants/tag.html): bj-tag, bj-tag--action, bj-tag--dismiss, bj-tags - [Avatar](https://dsbj.site/docs/composants/avatar.html): bj-avatar, bj-avatar--sm/lg/xl, bj-avatar__img, bj-avatar__initials, bj-avatar__status, bj-avatar-group ## Composants - Formulaires - [Champ de saisie](https://dsbj.site/docs/composants/input.html): bj-input-group, bj-label, bj-input, bj-hint, bj-message--error - [Liste déroulante](https://dsbj.site/docs/composants/select.html): bj-select-group, bj-select - [Case à cocher](https://dsbj.site/docs/composants/checkbox.html): bj-checkbox-group, bj-checkbox, bj-checkbox__label - [Bouton radio](https://dsbj.site/docs/composants/radio.html): bj-radio-group, bj-radio, bj-radio__label - [Interrupteur](https://dsbj.site/docs/composants/toggle.html): bj-toggle, bj-toggle__input, bj-toggle__label - [Téléversement](https://dsbj.site/docs/composants/upload.html): bj-upload-group, bj-upload - [Recherche](https://dsbj.site/docs/composants/search.html): bj-search, bj-search__input, bj-search__btn - [Sélecteur de date](https://dsbj.site/docs/composants/datepicker.html): bj-datepicker, bj-datepicker__input, bj-datepicker__calendar - [Combobox](https://dsbj.site/docs/composants/combobox.html): bj-combobox, bj-combobox__input, bj-combobox__listbox, role="combobox", aria-autocomplete="list" - [Éditeur riche](https://dsbj.site/docs/composants/rich-editor.html): bj-rich-editor, bj-rich-editor__toolbar, bj-rich-editor__content, role="textbox" ## Composants - Contenu - [Alerte](https://dsbj.site/docs/composants/alert.html): bj-alert, bj-alert--info/success/warning/error, bj-alert__title, role="alert" - [Bandeau](https://dsbj.site/docs/composants/notice.html): bj-notice, bj-notice--info/warning/alert - [Mise en avant](https://dsbj.site/docs/composants/callout.html): bj-callout, bj-callout__title, bj-callout--green/yellow/red - [Mise en exergue](https://dsbj.site/docs/composants/highlight.html): bj-highlight, bj-highlight--sm, bj-highlight--lg - [Citation](https://dsbj.site/docs/composants/quote.html): bj-quote, bj-quote__text, bj-quote__author - [Carte](https://dsbj.site/docs/composants/card.html): bj-card, bj-card__img, bj-card__body, bj-card__title, bj-card--horizontal, bj-cards - [Tuile](https://dsbj.site/docs/composants/tile.html): bj-tile, bj-tile__icon, bj-tile__title, bj-tile--horizontal - [Tableau](https://dsbj.site/docs/composants/table.html): bj-table-wrapper, bj-table, bj-table--bordered, bj-table--striped - [Contenu éditorial](https://dsbj.site/docs/composants/content.html): bj-content, typographie pour articles - [Skeleton](https://dsbj.site/docs/composants/skeleton.html): bj-skeleton, bj-skeleton--text/heading/circle/rect, bj-skeleton-group, aria-busy="true" - [Bannière](https://dsbj.site/docs/composants/banner.html): bj-banner, bj-banner__img, bj-banner__body, bj-banner__title, bj-banner--sm/lg/center/right/light/dark/plain ## Composants - Interactifs - [Accordéon](https://dsbj.site/docs/composants/accordion.html): bj-accordion, bj-accordion__btn, data-bj-accordion-btn, aria-expanded, aria-controls - [Onglet](https://dsbj.site/docs/composants/tab.html): data-bj-tabs, bj-tabs__list, bj-tabs__tab, role="tablist", role="tab", role="tabpanel" - [Modale](https://dsbj.site/docs/composants/modal.html): bj-modal, role="dialog", aria-modal="true", data-bj-modal-open, data-bj-modal-close - [Infobulle](https://dsbj.site/docs/composants/tooltip.html): bj-tooltip, bj-tooltip__content - [Indicateur d'étapes](https://dsbj.site/docs/composants/stepper.html): bj-stepper, bj-stepper__steps, bj-stepper--vertical - [Notification toast](https://dsbj.site/docs/composants/toast.html): bj-toast-container, bj-toast, bj-toast--info/success/warning/error - [Menu déroulant](https://dsbj.site/docs/composants/dropdown.html): bj-dropdown, bj-dropdown__trigger, bj-dropdown__menu, bj-dropdown__item - [Bandeau défilant](https://dsbj.site/docs/composants/marquee.html): bj-marquee, bj-marquee__track, bj-marquee__pause, aria-live - [Galerie d'images](https://dsbj.site/docs/composants/gallery.html): bj-gallery, bj-gallery__item, bj-gallery--cols-2/cols-4 - [Arborescence](https://dsbj.site/docs/composants/treeview.html): bj-tree, bj-tree__item, bj-tree__branch, bj-tree__toggle, role="tree", role="treeitem" - [Bulle de chat](https://dsbj.site/docs/composants/chat-bubble.html): bj-chat-bubble, bj-chat-bubble--sent, bj-chat-bubble--received, role="listitem" - [Tiroir](https://dsbj.site/docs/composants/drawer.html): bj-drawer, bj-drawer__panel, bj-drawer--right, role="dialog", aria-modal, data-bj-drawer-open ## Composants - Réglementaire - [Consentement](https://dsbj.site/docs/composants/consent.html): bj-consent-banner, bj-consent-manager, bandeau cookies RGPD ## Composants - Dashboard - [Dashboard Sidebar](https://dsbj.site/docs/composants/dashboard-sidebar.html): bj-dashboard-sidebar, bj-dashboard-sidebar--compact, bj-dashboard-sidebar__brand, bj-dashboard-sidebar__link, aria-current="page" - [Chart Bar](https://dsbj.site/docs/composants/chart.html): bj-chart, bj-chart-bar, bj-chart-bar--horizontal, bj-chart-bar__col, bj-chart-bar__bar - [Chart Line](https://dsbj.site/docs/composants/chart.html): bj-chart-line, bj-chart-line__path, bj-chart-line__area, bj-chart-line__dot - [Chart Pie](https://dsbj.site/docs/composants/chart.html): bj-chart-pie, bj-chart-pie--donut, bj-chart-pie__slice, bj-chart-pie__center - [Chart](https://dsbj.site/docs/composants/chart.html): bj-chart, bj-chart__header, bj-chart__title, bj-chart__body, bj-chart__legend ## Modèles de pages - [Page d'accueil](https://dsbj.site/docs/modeles/page-accueil.html): Template complet de page d'accueil gouvernementale - [Page article](https://dsbj.site/docs/modeles/page-article.html): Template de page de contenu éditorial - [Page formulaire](https://dsbj.site/docs/modeles/page-formulaire.html): Template de page avec formulaire multi-étapes ## Optional - [Utiliser le DSBJ avec l'IA](https://dsbj.site/docs/premiers-pas/ia.html): Règles Cursor, serveur MCP, prompts exemples pour coder avec l'IA - [Classes utilitaires](https://dsbj.site/docs/fondamentaux/classes-utilitaires.html): Détail complet des utilitaires CSS