InfraPro

Interne

UI Playground

Le point d'entrée des visualisations de choix : les maquettes et comparaisons ci-dessous, puis tous les tokens et primitives du design. Page interne, non indexée.

Visualisations de choix

Le point de départ pour comparer les options de design sur du contenu réel.

Diagramme réseau « Sur site » — variantes Raffinage du schéma réseau du home : sous-libellés sous chaque rayon, « Appareils » (couvre ordinateurs + mobiles), et trois pistes — coins enrichis, éventail, et éventail + pastille (glyphe nœud dans le moyeu). Libellés placeholder (Erwann). « La vraie différence » — preuve plutôt qu’image Variante A retenue : la parole de client prend la place du rendu en verre, dans la mise en page actuelle — et la carte devient un carrousel des quatre témoignages réels (flèches, pastilles, swipe, clavier). La warmth vient de la preuve, pas d’une image d’ambiance générée. Bande de respiration — image humaine mi-page Une vraie personne au calme (Adobe Stock licenciée, de dos, pause café vue verte) en bande cinématique, pour casser le long passage clair du milieu. Traitement cohérent du site. Deux versions : image seule (recommandée) vs image + une ligne (copie à valider par Erwann). Imagerie — quatre images Firefly Les images Firefly de Guillaume (aurore, horizon, verre, strates — licence Creative Cloud, sans personnes), en bande cinématique avec le traitement cohérent, original brut en regard. Les rendus SVG du 12/06 restent en repli plus bas (dont brume, sans équivalent Firefly). Graphiques — exploration « à la Atera » + famille « ligne claire » Diagramme isométrique des trois piliers, palette élargie pour l’illustration, variation AI Readiness, motifs (horizon / arches / strates) — et la famille « ligne claire » (fourche · ligne · parcours · niveaux, §09). Le fil + la fourche sont promus sur le home (2026-06-12) ; le reste attend sa page. Accueil — maquette complète La home entière : design Aurore, hero deux colonnes, palette par section, dark mode, et une copie de démonstration (chiffres & citation à sourcer). Accents de couleur — Aurore, dark mode & palette Maquette home (hero deux colonnes), sélecteur de thème clair/sombre/auto, et la palette graphique (14 éléments). Fonds de home — comparaison Les directions de fond du hero, jugées sur le vrai contenu.

Couleurs

Surfaces & lignes

--surface-base#FBFCFC
--surface-raised#FFFFFF
--surface-muted#F2F5F5
--hairline#E2E7E6

Encre / texte

--ink-primary#0F1514
--ink-secondary#5A6463
--ink-tertiary#8A9290

Accent (teal) — la seule couleur, employée avec parcimonie

--accent#006378
--accent-hover#004F60
--accent-wash#E6F1F5

Moment sombre

Moment sombre

Une pause dans le parcours.

Surface teal foncé, halos teal, glow au curseur. Aucune texture.

Bouton on-dark
--dark-surface#004A5C
--dark-ink#F4F7F6
--dark-ink-soft#A8B2B0
--dark-glowrgba(47,164,169,.18)
--dark-glow-softrgba(0,99,120,.16)

Typographie

Échelle — Geist. Chiffres alignés (lining) dans les titres : Microsoft 365 · 360 · 2026

--fs-displayclamp 44→84 Display / hero — Microsoft 365 · 360 · 2026
--fs-h144px H1 — Microsoft 365 · 360 · 2026
--fs-h230px H2 — Microsoft 365 · 360 · 2026
--fs-h321px H3 / lede — Microsoft 365 · 360 · 2026
--fs-body17px Body — Microsoft 365 · 360 · 2026
--fs-small15px Small / UI — Microsoft 365 · 360 · 2026

Graisses

Regular · 400 Premium, restrained, confident.
Medium · 500 Premium, restrained, confident.
Semibold · 600 Premium, restrained, confident.

Espacement & rayon

Base 8px

4
8
12
16
24
32
48
64
96

Rayon — --radius 10px

Primitives

Ouverture — eyebrow → display → lede

Eyebrow

Un titre confiant.

La ligne de soutien, en encre secondaire.

Boutons — accent (survol = inversion) & on-dark

Bouton accent ↤ survolez pour voir l'inversion

Cartes — grille d'offres (l'orpheline est centrée en 2 colonnes)

Cloud

Vos comptes et vos données protégés, où que votre équipe travaille.

En savoir plus

360

Microsoft 365 géré, appareils compris.

En savoir plus

Sur site

Votre infrastructure sur site, gérée comme il faut.

En savoir plus

Fil d'Ariane

Pastille info (comparateur) — survol/clic

Identités et accès protégés Vos comptes restent inviolables même si un mot de passe fuite : connexion vérifiée, accès encadrés.