Portail strategique et routage
[00]Explorer l'ecosystemeShell actif. Sprint 1 validation.Ouvrir la route shell →
[01]HDN StudioBuild produit, tech, IA et automatisationstudio.hdngroup.org[02]ADN StudioClarification de marque, narration et conversionadn.hdngroup.org[03]HDN GraphicsProduction visuelle et supportsgraphics.hdngroup.org[04]HDN TrainingFormation, bootcamps et adoptiontraining.hdngroup.org
design.hdngroup.org

HDN Execution System

Surface de validation du langage HDN 2026. On expose un systeme d execution, des repères de navigation et des composants shell partagés sans glisser vers un rendu portfolio client.

Execution systemLegacy-safeNo final public copyNo CRM routingReview surface
Signal

Le logo HDN Group doit vivre comme un composant natif, pas comme un PNG local colle sur un shell.

Signal

Chaque bloc du design system doit avoir une cadence differente selon sa fonction: orientation, preuve, build, training.

Signal

Le langage cockpit reste utile, mais il ne doit pas produire cinq panneaux clones avec une couleur differente.

Execution node preview

HDN Group

Portail strategique et routage

/ecosysteme/methode/contact
RolePortail strategique et routage
Domainhdngroup.org
StateShell valid / contenu verrouille
Demander un diagnostic HDNExplorer l'ecosysteme
Brand architecture

HDN Group doit ancrer l'ecosysteme

On ne montre plus juste une grille de cartes. On montre une tete de systeme, un relais entre marques et une hierarchie visuelle plus credible.

HDN Group signature

Un portail qui orchestre, pas une agence qui accumule.

Le lockup HDN Group devient ici une piece de systeme: il porte la tension orange, la lecture institutionnelle et la promesse d'orientation entre les poles.

hdngroup.org

HDN Group

Portail strategique et routage

studio.hdngroup.org

HDN Studio

Build produit, tech, IA et automatisation

adn.hdngroup.org

ADN Studio

Clarification de marque, narration et conversion

graphics.hdngroup.org

HDN Graphics

Production visuelle et supports

training.hdngroup.org

HDN Training

Formation, bootcamps et adoption

Cadence rules

Une base commune, des rythmes differents

01

HDN Group pilote la scene avec une signature dense, un role d'orientation et une composition plus institutionnelle.

02

HDN Studio tire vers des matrices techniques, ADN Studio vers des plans narratifs, HDN Graphics vers des frames plus demonstratives.

03

Le design system montre la discipline commune sans ecraser les specificites de chaque marque.

Colors
Black#0b0b0c
Gray900#0f141a
Gray800#161d26
Gray700#1b1d22
Gray600#202126
Gray400#9eaab8
Gray200#cfc6b9
White#ffffff
Ivory#f8f4ed
Orange Base#ff6a1a
Orange Bright#ff8542
Typography
TitleHDNfontsTitle / Bebas Neue
CityHDNcity / Gotham
DisplayHDNdisplay / SF Pro Display
Spacing
Xs0.5rem
Sm0.75rem
Md1rem
Lg1.5rem
Xl2rem
Xxl3rem
Xxxl4.5rem
Radius
Sm0.75rem
Md1rem
Lg1.5rem
Pill999px
Breakpoints
Mobile390
Tablet768
Desktop1200
Legacy rebuild

HDN Training creatives & sales

Le premier dossier heritage integre nourrit maintenant une vraie famille de composants pour ads creatives et page de vente HDN Training.

Dedicated review page

Ouvrir la surface HDN Training

Tu peux juger la traduction du legacy en composants modernes, en formats story, sales hero, event badge et module card.

Voir HDN Training Ads
Shell gallery

Composants shell en contexte

On visualise ici le mega menu, les cartes placeholder et les stubs de formulaires sans brancher de logique metier.

Placeholder routes
Route placeholder

/ecosysteme

Route shell visible. Final content remains pending approval.

Route placeholder

/methode

Route shell visible. Final content remains pending approval.

Route placeholder

/contact

Route shell visible. Final content remains pending approval.

Form behavior

Les actions restent neutres, les surfaces restent claires

Le shell doit montrer une capacite de capture sans simuler un funnel final. On documente donc des stubs lisibles, pas des parcours pretendument termines.

Social icon system

Icônes social media

Set social media ajoute au design system avec un badge 191 par 191, fond noir, accent radial orange et glyphes vectoriels scalables.

SocialIconBadge
Facebook
Facebook
Instagram
Instagram
YouTube
YouTube
TikTok
TikTok

Critere de precision

  • Le logo doit exister comme systeme typographique et symbolique
  • Les grilles ne doivent pas se repeter sans raison
  • Chaque composant doit porter un usage, pas juste un style
  • Les variations de marque doivent rester lisibles au premier coup d'oeil
Form stub [ST-01]

Capture d'intention shell

Structure technique uniquement. Aucun routage CRM ou logique métier définitive n'est activée dans Sprint 1. CTA cible: Demander un diagnostic HDN.

Source of Truth validation required.
Control center

Specs detaillees des composants

Pour la revue de controle, on a ajoute une page dediee qui documente le role, le statut et les garde-fous de chaque composant shell.

Deep dive

Ouvrir la bibliotheque de specs

Tu peux maintenant valider composant par composant ce qui est actif, ce qui reste en stub, et ce qui est strictement bloque avant Sprint 2.

Voir les component specs
Gate reminder

Ce que ce site montre, et ce qu'il ne montre pas

Visible maintenant

  • Tokens de base
  • Navigation inter-sites
  • Header, mega menu, footer
  • CTA shell et formulaires stubs
  • Variantes de theme par marque

Hors perimetre

  • Copy publique finale
  • Cas clients et preuves
  • Pricing et offres publiees
  • CRM et routage leads definitif
  • Legacy brut copie-colle