# AURA Esport : design system & contrat IA

Source canonique : https://aura-esport.fr/design-system/

Version : 1.0. Date : 27 octobre 2026. Langue : français. Statut : documentation publique normalisée à partir d'une maquette Figma AURA Esport et de la landing existante.

## Hiérarchie des sources

1. Logos PNG officiels du dossier AURA Esport.
2. Maquette Figma AURA Esport observée en août 2026. Les liens internes ne sont pas publiés.
3. Landing statique du 27 octobre 2026 : état implémenté.
4. Normalisations proposées ci-dessous : contrats de production à faire évoluer si besoin.

**Statuts obligatoires** : `observed` (observé), `normalized` (normalisé), `recommended` (recommandé), `example` (démonstration fictive), `planned` (non confirmé comme déployé). Une donnée de maquette ne vaut jamais une donnée réelle.

## Couleurs

- Navy `#040C48` : institution, texte clair, surface sombre.
- Bleu `#000D70` : structure, surface secondaire.
- Orange `#E53500` : action et accent. Le texte blanc sur orange peut être sous le contraste AA de 4,5:1 à petite taille. Prévoir une correction validée.
- Canvas `#F6F6F6`, blanc `#FFFFFF`, nuit `#010227`.
- Contours `#B4B6C8` (clair), `#373D6D` (foncé). Le contour clair n'est pas une couleur de texte.
- Couleurs de catégories par usage sémantique uniquement, pas pour remplacer la palette de marque : blog: #0099E5, guide: #AC00E5, whitepaper: #E27107, map: #80BC00, logistics: #00D09C, official: #E5006B, video: #6354EA, staff: #F930B6, press: #D1B608.

## Typographie

Une seule famille : Public Sans. Police variable `assets/public-sans-latin-variable.woff2`, licence OFL jointe. Échelle Figma observée : hero 40px/900, H2 34px/900, blocs 22-24px/700, labels 16-18px/700, corps 16-18px/400, métadonnées 12-14px/500. Garder une hiérarchie adaptable à l'écran.

## Géométrie, espacement et responsive

- Canvas de référence Figma : 1728px, zone de contenu 1378px, gouttières de référence 175px. Ne jamais figer cette grille en CSS.
- Espacements normalisés : 5, 10, 15, 20, 24, 32, 40, 60, 80px.
- Rayons : contrôles 8px, cartes 20px.
- Vertical des sections : souvent 60px en maquette. La landing actuelle utilise parfois 80px.
- Responsive proposé, pas un fait Figma : mobile jusqu'à 719px, tablette 720-1179px, desktop à partir de 1180px.
- Tester 375, 768, 1440 et 1728px, mais aussi zoom 200%.

## Logos et iconographie

- Manifeste : https://aura-esport.fr/brand-manifest.json
- PNG officiels + SVG exploités sur le site, ne pas fabriquer de nouveau logo à partir de texte.
- Familles observées : métrique 34px/`#B4B6C8`, accent 34px/`#E53500`, engagement 34px/blanc sur fond sombre, navigation 24px/blanc sur fond bleu.
- Toutes les familles observées dans Figma ne sont pas encore exportées dans ce ZIP. Les icônes disponibles sur la landing restent la source des actifs effectivement déployés.

## Composants et disponibilité

- `site-header` : implemented, source `landing`. landmark navigation, logo accessible, responsive menu, visible focus, light/dark variants.
- `site-footer` : implemented, source `landing`. identity, footer navigation, legal information as available.
- `button` : implemented, source `landing_and_figma`. primary, secondary, text.
- `board-card` : implemented, source `landing`. role, name, verified professional contact, accessible social links.
- `future-tabs` : implemented, source `landing`. ARIA tablist, keyboard navigation, panels accessible without JavaScript.
- `faq` : implemented, source `landing_and_figma`. question visible, answer readable without JavaScript.
- `form-field` : implemented, source `questionnaire`. label persistently visible, explicit error, keyboard support, server validation.
- `stat-card` : planned, source `figma`. traceable value, period and perimeter, explicit source, never mock numbers as actual.
- `actor-card` : planned, source `figma`. structure source, contact permission, validated public fields.
- `event-card` : planned, source `figma`. event source, date, place, publisher, link.
- `partner-cartouche` : planned, source `figma`. confirmed partnership status, use-of-logo approval, approved display location.
- `resource-card` : planned, source `figma`. category, title, source, date.
- `map-card` : planned, source `figma`. source, location, validation status.
- `form-steps` : planned, source `figma`. progression, accessible field groups, server state and error management.

Chaque interaction applicable documente `default`, `hover`, `focus-visible`, `active`, `disabled`, `loading`, `success`, `error`. Un composant décrit dans la maquette n'est pas un module fonctionnel déployé.

## Thèmes et accessibilité

- Défaut clair, sombre en option, ne jamais inverser mécaniquement une page avec `filter`.
- WCAG 2.2 niveau AA comme objectif de mise en œuvre. Cibles tactiles et contrôles à 44px minimum.
- Focus visible. Sémantique HTML. Navigation au clavier, `aria` lorsque nécessaire. Respect de `prefers-reduced-motion`.
- Un label visible est obligatoire pour les champs. Pas de faux boutons ni de contenu inaccessible sans JavaScript.
- Les logos possèdent un texte alternatif utile hors décor pur. Tester le contraste de chaque contexte, ne pas supposer l'orange sur blanc compatible pour tout texte.

## Règles de composition

À faire : sections respirantes, Public Sans, CTA orange ponctuel, cartes bordées, composant réutilisé, format mobile, contenus sourcés, distinctions statut de source.

À éviter : esthétique néon, couleurs inventées, grosses surfaces orange, ombres excessives, faux indicateurs de résultats, données de partenaires non confirmés, images tierces sans droit d'utilisation.

## Contrat de production pour les IA

1. Read design-system.json, brand-manifest.json, and the official assets before generating a component.
2. Classify each requirement as observed, normalized, recommended, example, or planned.
3. Use Public Sans, palette and semantic roles. No new visual token without explicit justification.
4. Use existing logo SVG or PNG without reconstructing the brand.
5. Prefer existing implemented components over re-invented markup.
6. Generate semantic HTML with keyboard navigation and responsive light/dark variants.
7. Provide all interaction states, validation, missing-data and long-content cases.
8. Verify at 375, 768, 1440, and 1728px as well as keyboard and 200% zoom.
9. Explain deviations and unresolved source-of-truth questions, including permission to publish.
10. Never invent actor records, subsidies, partners or statistical results.

## Ce que la documentation ne doit pas prétendre

- Un composant de l'inventaire Figma n'est pas nécessairement développé.
- Aucune statistique de maquette ne doit devenir un chiffre réel d'AURA Esport.
- Un contact dans l'écosystème ne vaut pas un soutien ou partenariat.
- Le conseil d'administration public de cette version comporte trois personnes : Romain Caso, Stéphan Euthine et Matthias Meriguet. Les autres fiches préparatoires ne doivent pas être publiées.
- Aucune validation de marque tierce, institutionnelle ou de la Région n'est impliquée par ce document.

## Fichiers machine-readable

- https://aura-esport.fr/design-system.json : contrat structuré complet.
- https://aura-esport.fr/assets/aura-tokens.css : tokens CSS normalisés (fichier de référence, non substitution automatique au CSS de production).
- https://aura-esport.fr/brand-manifest.json : catalogue et provenance des logos.
- https://aura-esport.fr/charte-graphique.md : charte éditable.
- https://aura-esport.fr/llms.txt : index des ressources publiques.
- https://aura-esport.fr/AGENTS.md : instructions de développement et garde-fous pour les agents de code.