Bibliothèque de composants
Hubvisory AI Diagnostic — Référence visuelle

Composant : _docs.html

Design Tokens — Couleurs, typographie, espacements

Utilisé partout · Définit l'identité visuelle de chaque diagnostic

Palette de couleurs

Couleurs principales

--primary

#003366

--accent

#E30613

--primary-soft

--accent-soft

--ink

--muted

--muted-soft

--surface

--bg

--bg-alt

--border

Échelle de chaleur (heat scale) — scores de 1 à 5

Couleurs de risque

Rouge

Orange

Vert

Typographie

H1 · Display

Titre principal de la page

H2 · Display

Titre de section

Subtitle

Sous-titre accentué

H3 · Card

Titre de carte ou panneau

Body

Texte courant descriptif, paragraphe de contenu standard.

Caption

Texte secondaire, sous-titre de carte, légende

Eyebrow

Label de section

Stat 42

Composant : _docs.html

UI Primitives — Cartes, pills, boutons, stats

Briques de base réutilisables dans toutes les vues

Variantes de cartes

Contenu de la carte standard

Standard

Carte cliquable (survol)

Hover

Carte compacte en grille

Compacte

Carte teintée (quick wins)

Fond coloré

Pills & Badges

Pill neutre Pill primary Pill accent Bon (Vert) Attention (Orange) Critique (Rouge) RGPD

Blocs statistiques

Label du stat
42
Score de confiance
3.0/5

Shadow IA (géant)

15%

12 Cas d'usage (CTA géant)

Boutons

Patterns de titres de section

Label de section (eyebrow)

Titre principal (h1 display)

Sous-titre accentué

Titre de vue (h2 display)

Utilisé en tête des vues Charte, Gouvernance, etc.

Titre de carte avec icône

Sous-titre de carte

Composant : registre ICONS (JS)

Icônes — Bibliothèque SVG Lucide-style

Utilisé partout · Appel via icon(name, size, color)

Composants : gauge.html, radar.html, bars.html, scatter-confidence.html, heatmap.html, data-health.html

Graphiques — Toutes les visualisations disponibles

Dashboard · Données : globalMetrics, axesRadar, frequencyUsage, adoptionDuree, stackByMetier, heatmapMatrix, dataGovernance

Jauge de maturité (SVG)

gauge.html · Score de maturité globale sur 5 · CLIENT_DATA.globalMetrics.maturiteGlobale

Radar 6 axes (Chart.js)

radar.html · Actuel vs Cible · CLIENT_DATA.axesRadar

Score actuel
Cible 2027

bars.html — Vue granulaire avec onglets par métier

Fréquence d'utilisation

% du panel — fréquence déclarée

Durée d'adoption

Depuis première utilisation déclarée

Scatter / Bulles — Outils vs Confiance (Chart.js)

scatter-confidence.html · CLIENT_DATA.stackByMetier + perimetre

Heatmap — Table colorimétrique (HTML/CSS)

heatmap.html · CLIENT_DATA.heatmapMatrix

Métier Usage Confiance
1
5

Anneau de qualité (SVG)

data-health.html · CLIENT_DATA.dataGovernance.scoreExploitation

Score d'exploitation des données

Composants : hero.html, cta-banner.html, risks.html, roadmap.html, navigation.html, footer.html

Sections Dashboard — Blocs composés de la vue principale

Vue Dashboard · Données : branding, perimetre, globalMetrics, risques, roadmap

hero.html — Section héro

Périmètre de l'audit

Audit de maturité IA

Sous-titre de la mission

Ce rapport présente les résultats de l'audit de maturité IA mené auprès des équipes. Il identifie les cas d'usage prioritaires, évalue la maturité actuelle et propose une feuille de route opérationnelle.

Métiers audités

gauge.html + hero.html — Score & Shadow IA panel

Maturité IA globale

Shadow IA détectée

RGPD Shadow IT

cta-banner.html — Bandeau d'appel à l'action

12

Cas d'usage identifiés

Dont 5 quick wins identifiés — prêts à être déployés.

risks.html — Inventaire des risques

Inventaire des risques

roadmap.html — Feuille de route en 3 phases

Feuille de route

footer.html — Pied de page

hubvisory

CLI-IA-2026 — T1 2026

© 2026 Hubvisory — Confidentiel

Composant : solutions-grid.html (NOUVEAU)

Grille de solutions avec filtres par typologie

Dashboard global · Données : solutionsTransverses, methodologie.typologiesExplications

Solutions transverses

Catalogue des solutions identifiées

Solutions immédiatement activables, toutes équipes confondues

~7 h/sem · panel complet
TYPOLOGIE — nature de la valeur
COMPLEXITÉ — effort d'implémentation

Composant : catalogue-votac.html + usecase-modal.html

Catalogue VOTAC — cartes orientées texte, filtres produit + phase, modale

Variante divergée (client clovis) · Données : produits, catalogueSolutions, methodologie.packages

Catalogue

Catalogue des solutions identifiées

Fonctionnalités évaluées et scorées VOTAC, filtrables par produit et par phase

usecase-modal.html — clic sur une solution associée → modale solution, avec retour

Composant : cartographie-processus.html (NOUVEAU)

Cartographie des processus — Avant / Après IA

Dashboard ou Charte · Données : cartographieProcessus

Transformation

Cartographie des processus

De l'existant siloté vers un parcours IA intégré

Avant

Irritants

IA
Après

Bénéfices

Composant : espace-partenaire.html (NOUVEAU)

Espace Partenaire — Équipe projet Hubvisory

Bas du Dashboard global + en-tête index · Données : espacePartenaire, hubvisoryContext

Espace Partenaire · Hubvisory

Consultants en charge

Hubvisory · hubvisory.com LinkedIn

Composants : gouvernance.html, data-health.html, process-mapping.html

Gouvernance & Données — Vue Charte

Vue Charte · Données : gouvernanceApprofondie, dataGovernance, processMapping

gouvernance.html — Grille 3 colonnes

Risques opérationnels

Défis organisationnels

Besoins de formation

data-health.html — Santé des données

Sources de données

Score d'exploitation des données

Axes d'amélioration

process-mapping.html — Processus actuel vs cible

Processus actuel

Processus cible

Composants : metier-header.html, metier-top3.html, metier-quickwins.html, metier-usecases.html

Vues Métier — Composants des espaces par département

Vue Métier · Données : perimetre, useCasesList, promptsBanque

metier-header.html — En-tête d'espace métier

Département A

5 personnes auditées

metier-top3.html — Top 3 cas d'usage classés

metier-quickwins.html — Grille quick wins

metier-usecases.html — Cartes cas d'usage détaillées

Prompt bank — Bloc de code prompt personnalisé

Banque de prompts

Prompt personnalisé · Département A

Tu es [rôle] chez {{client}}. À partir de [source de données], [action attendue]. Format de sortie : [format]. Contraintes : [contraintes].

Données :
{{coller les données}}

Composants : methodology.html, glossary.html

Contenu & Référence — Méthodologie, glossaire

Vue Charte · Données : methodologie, glossaire

methodology.html — Guide méthodologique avec onglets

glossary.html — Glossaire avec recherche et accordéon

Glossaire IA