# Interface : charte, composants, audit

La charte d'une instance tient en **quatre couleurs et deux polices** ; les échelles de nuances, les variantes accessibles et les jetons CSS en sont calculés. Un `#ffffff` écrit en dur dans un composant casserait silencieusement une instance dont la charte n'est pas blanche : c'est arrivé, et c'est pourquoi `tokens.css` est la source unique des valeurs visuelles.

---

## 📑 Sommaire de la section

<FeatureGrid cols={2}>
  <FeatureCard
    icon="🎨"
    title="Design system"
    description="La charte pilote tout, les jetons CSS, le catalogue de composants Storybook, la visualisation du tableau de bord interne, et comment écrire une story."
    href="/interface/design-system"
  />
  <FeatureCard
    icon="🔬"
    title="Audit UX / UI"
    description="État de l'interface au 26 octobre 2026, défauts par gravité, suites données, et ce que l'on changerait dans l'ordre."
    href="/interface/audit-ux-ui"
  />
</FeatureGrid>

---

## 🎨 De la charte au pixel

<Mermaid
  title="Comment quatre couleurs deviennent un thème complet"
  chart={`flowchart LR
  BRAND["brand.colors<br/>primary · accent · ink · surface<br/>brand.fonts : body · heading"]
  SCALE["colorScale()<br/>10 nuances par couleur :<br/>6 éclaircies, l'exacte, 3 assombries"]
  MANTINE["Thème Mantine<br/>src/theme/index.ts<br/>primaryShade, polices, rayons"]
  TOKENS["tokens.css<br/>neutres, traits, rayons, mesure de lecture,<br/>--surface écrasée par l'instance"]
  COMP["Composants<br/>src/components, Mantine<br/>aucune couleur en dur"]
  SB["Storybook<br/>catalogue, charte par instance,<br/>contrôle d'accessibilité"]
  BRAND --> SCALE --> MANTINE --> COMP
  BRAND --> TOKENS --> COMP
  COMP --> SB`}
/>

---

## ✅ Ce qui a été repris depuis l'audit

| Constat du 26 octobre                                   | Suite donnée                                                                   |
| ------------------------------------------------------- | ------------------------------------------------------------------------------ |
| `?q=` écrit dans l'URL mais jamais relu                 | Relu au chargement, recherche portée dans l'en-tête et l'accueil               |
| 60 projets atteignables sur 3 647, aucun filtre         | Filtres de liste, projets paginés par financeur                                |
| Résultats de recherche arrêtés à 30                     | Résultats paginés, état « zéro résultat » utile                                |
| Pas de lien d'évitement, navigation sans `aria-current` | Corrigé ; 0 violation axe (WCAG 2.1 AA) sur 25 gabarits, fr et en              |
| Recherche à 14/20 sur les requêtes de référence         | **18/20** sur les deux instances, après deux comportements de Pagefind compris |

Le détail mesuré est dans le [journal](/projet/journal) et dans [Couverture](/donnees/couverture).