Olaqin Univers v2 — Livrable design

Tree top-down avec connecteurs SVG, sidebar de vues sauvegardées, toolbar zoom/mode, drawer profil 420px, minimap. Multi-position (user_id non-unique) supporté nativement avec badge label. Lead = anneau doré, Responsable = gold border.

Tree · drawer · minimapOuvrir →

Org · liste

Vue liste filtrée

Sidebar filtres composables (pôle / service / équipe / site / contrat / statut), tableau dense, export CSV. Multi-position visible sur les lignes concernées.

Annuaire admin · CSVOuvrir →

Org · pôle

Zoom sur un pôle

Vue contextuelle d'un pôle métier (ex: Technologies). Breadcrumb retour, header avec nom du responsable, sous-services dépliés (IT, Exploitation, Hardware).

Drill-down · breadcrumbOuvrir →

Org · mobile

Vue mobile (<768px)

Accordéon pôle → service → équipe (le tree horizontal serait inutilisable). Member chips, bottom sheet 84vh pour le profil, contact rapide.

Accordion · bottom sheetOuvrir →

Org · admin

Éditeur kanban (admin+)

Colonnes par pôle, sections par service, drag & drop pour réorganiser. Multi-position via ⌥+drag. Badge orange « non sync AAD » sur divergences Azure AD.

Drag&drop · sync AADOuvrir →

Org · composants

Bibliothèque composants

Cartes utilisateur (6 variantes : standard, dir, sm, me, resp, multi-pos), nœuds structurels (pôle/service/équipe), drawer, minimap, kanban card, connecteurs SVG.

orga.css partagéOuvrir →

Vie collaborative

6 nouvelles surfaces pour Univers · mai 2026

Search · ⌘K

Recherche globale ⌘K

Spotlight Olaqin · résultats catégorisés (personnes, pages, modules, documents, actions), navigation ↑↓⏎, raccourcis clavier.

Full-text · 142 docsOuvrir →

Notifications

Centre de notifications

Cloche + drawer latéral · tabs (Tout / Non lues / Mentions / Système), regroupement par jour, actions inline (valider, silence, ack).

Temps réel · WebSocketOuvrir →

Calendrier

Calendrier du Pôle

Vue mois pleine + mini-month + agenda à venir. 6 catégories (Produit, RH, IT, Comm, Externe, Personnel), événements all-day et créneaux.

Mois / Sem / Jour / AgendaOuvrir →

Annuaire

Annuaire visuel

92 collab · 29 pôles · 3 sites · 47 compétences indexées. Filtres pôle / site / compétences (nouveau). Modale détail avec hiérarchie et organigramme.

Filtres composésOuvrir →

Communauté

Espace communauté

Anniversaires, arrivées, ancienneté, accomplissements collectifs. Badges (common → legendary), feed de célébrations avec réactions, leaderboard volontaire.

Volontaire · non comparatifOuvrir →

Kiosque · 4K

Mode présentation

Carousel plein écran pour les écrans de salle de pause : bienvenue, anniv, événements à venir, KPIs, save the date. Boucle 9 s par slide + ticker bas.

Fullscreen · 5 slides · 60s/cycleOuvrir →

Outils d'enquête

4 vues pour explorer, comparer, embarquer

Outil · tour

Tour guidé d'Univers

8 étapes annotées sur fond noir avec spots animés. Pour onboarder les nouveaux arrivants en 5 minutes — hero, hubs, profil, NDF, FAQ, Gideon.

Interactif · ←/→Ouvrir →

Outil · mobile

Vues mobiles iOS

8 iPhones côte à côte avec le vrai Univers embarqué en iframe scalé. Pour voir les écrans en condition réelle de mobilité — accueil, hub, profil, NDF, login, Atlantis, Stellair, offline.

8 frames · iframes vivantsOuvrir →

Outil · storybook

Storybook complet

48 stories : boutons (6 variantes × 3 tailles × 4 états), badges, avatars, alertes, cartes, inputs, tuiles, navigation. Chaque story avec sa classe utilitaire en clair.

48 stories isoléesOuvrir →

Outil · schémas

Schémas Payload

6 collections détaillées (themes, pages, components, email-templates, media, projects) — champs, types, contraintes, relations. Diagramme global d'interactions.

6 collections · 59 champsOuvrir →

Les déclinaisons white-label

même design system · charte déclinée par projet

Projet · Atlantis

Atlantis · monitoring dark

Centre d'opérations dark theme : strip de statut services, bannière d'alerte critique, charge système 24 h en bar-chart, flux d'alertes Prometheus, grille d'instances avec métriques CPU/RAM/Disk. Habillage charbon + accent violet électrique.

Dark theme · Prometheus / GrafanaOuvrir →

Projet · Stellair

Stellair Évaluations · produit

Site produit white-label avec palette vert clinique (EHPAD / soins gériatriques) : hero éditorial + 3 cartes flottantes, trust strip, features, aperçu produit, témoignage médecin coordonnateur, pricing 3 tiers, CTA.

Vert clinique · site produitOuvrir →

L'admin Payload, habillé Olaqin

— pour que l'éditeur ne sache pas que c'est Payload derrière

07 · CMS · admin

Studio · habillage Payload

Sidebar charbon style /admin Univers, vues custom pour les 6 collections (themes, pages, components, e-mails, projets, médiathèque), éditeur Lexical stylé Olaqin. Vue Thèmes : les changements de tokens à gauche se répercutent en direct sur l'aperçu de droite. Médiathèque : drag & drop, métadonnées éditables, traçabilité « utilisé dans 8 endroits ».

7 vues · live preview · 1 fichierOuvrir →

Les états annexes

3 états critiques du parcours utilisateur

État · login

Connexion · SSO

Split-screen avec form + SSO M365 / Google. Côté visuel : mot du président et chiffres clés.

Auth · souverainOuvrir →

État · onboarding

Première connexion

Wizard 5 étapes (e-mail, mot de passe, profil, 2FA, préférences). Rail charbon à gauche avec progression, formulaire centré à droite. Sauvegarde auto.

Wizard · 5 étapesOuvrir →

État · 404

Page introuvable · 404

Chiffre géant en gradient, recherche intégrée, suggestions vers les pôles. URL exposée en mono pour l'IT.

État · 404Ouvrir →

État · 403

Accès refusé · 403

Code en gradient corail, mention des rôles requis vs rôle actuel, lien direct vers Claire pour demander un accès.

État · droitsOuvrir →

État · offline

Mode hors-ligne

Fond charbon, statut service worker, file d'attente de sync auto, pages encore accessibles depuis le cache.

Offline-firstOuvrir →

État · maintenance

Maintenance planifiée

Fullscreen charbon, icône engrenage animée, compte à rebours h/m/s, barre de progression, déroulé du déploiement.

Compte à rebours · 6 étapesOuvrir →

Phase G · extensions max juin 2026

17 surfaces additionnelles · équipes, admin, formations, fiches, détails, public, technique

Équipe Tech

Pôle Tech complet · 26 personnes

6 sous-équipes : IT, Exploitation, QA, Hardware, Sécurité, DEVEXP. Métriques DORA Élite. 4 OKRs Q2.

26 collab · 7 leads→

Équipe Finance

Pôle Finance · 13 personnes

5 services (ADV produit, ADV services, Compta, Contrôle, Facturation 4axes). Clôture J+5.

5 services · 5 leads→

Équipe Comm

Sous-équipe Communication · 2 personnes

Sarah SEMO + Cassy. La Lettre Olaqin, presse, événementiel. NPS 8,4/10.

23 éditions Lettre→

Équipe Data

Pôle Data · 4 personnes

Snowflake + Airflow + dbt + ML. 14 To pseudonymisés. Pierre LAGARDE lead.

4 collab · RGPD art. 9→

Admin IT

Admin IT · Josué SMADJA

4 KPIs (uptime 99,3 %, 12 tickets, 4 demandes accès, MTTR 38min). Santé Tier 1 + Gideon stats.

RBAC scope it→

Admin Finance

Admin Finance · Cédric EBEN

NDF à valider, clôture J+5 (6 étapes), top encours clients, DSO 48j cible 45.

RBAC scope finance→

Admin Tech

Admin Tech · Franz TRIERWEILER

DORA Elite (4,2 deploys/j, MTTR 38min, CFR 4,2 %), releases planifiées, 6 recrutements actifs.

RBAC scope tech→

Form. ANSSI

Formation Conformité ANSSI 2026

3h30 · SecNumCloud · PSSI Olaqin · recommandée tous pôles. Yassine SAMAKI.

3h30 · 4,6/5→

Form. Crypto

Cryptographie appliquée · 14h

2 jours intensifs · bcrypt, JWT, AES, RSA, ECC. Cas Sesam-Vitale + red team final.

14h · 4,9/5→

Form. SV niv2

Sécurité Sesam-Vitale niveau 2 · 21h

3 jours avancé · PKI, cryptographie CPS, simulations red team. Niveau 1 obligatoire.

21h · obligatoire DPO + Sécu→

Fiche alt.

Fiche Astan DIANKA · alternance

BTS SIO · 20/24 mois · 2 tuteurs (Josué tech + Sabah RH). CDI envisagé.

Variante alt.→

Fiche presta.

Fiche Cyril FANON · Olaqin Partner

Architecte Logiciel · prestation forfait · 38 mois cumulés · référent Matthieu LEROMAIN.

Variante presta.→

Fiche multi

Fiche Nicolas AMY · multi-position

2 postes simultanés : Hardware/SAV 50 % + Support B2C 50 %. Modèle BDD user_id non-unique.

Variante 2 POSTES→

Notif. détail

Notification détail · mention

Mathilde COLONDON mentionne Josué. Thread + reply box + contexte + actions rapides.

Page dédiée→

Studio · thème

Édition détaillée · Atlantis Dark v8

Couleurs + typo + layout + composants. Preview Atlantis live. Tokens publiés. Historique 4 versions.

Comm only→

Galerie média

Photo détail · pot équipe Tech

Viewer dark plein écran, pers. identifiées, métadonnées EXIF, actions, RGPD.

Mode immersif→

Démarche RH

Demande attestation employeur

Wizard 5 étapes · type, destinataire, infos, aperçu live, envoi Sabah. Délai 6h moy.

Préview live→

Investisseurs

Comptes annuels publics · transparence

CA 9,2 M€, résultat 1,1 M€, compte de résultat 2025, gouvernance, cap table 100 % FR.

Public · PDF certifié CAC→

A11Y

Déclaration accessibilité · RGAA 4.1 AA

92 % conforme · 50 critères audités · plan de remédiation · référent Yassine SAMAKI.

RGAA · WCAG 2.1 AA→

Finalisation juin 2026

10 surfaces additionnelles · détails de workflow, public, sécurité, admin par pôle

NDF · validation

NDF détail · vue validateur

Workflow 5 étapes, vue Cédric EBEN (manager), justificatifs OCR, décomposition montants, timeline + Gideon AI, action validation/correction/rejet.

NDF-0438 · 287,40 €Ouvrir →

KB · article

Article KB détail · politique télétravail v2

Layout 3 colonnes tree+article+TOC, callouts (info/warn), blockquote, vote utilité, versioning, articles liés.

Auteur Sabah · v2 brouillonOuvrir →

Onboarding 30j

Parcours onboarding 30 jours · vue Mathilde

Hero progression J11/30, 4 jalons (J0/J7/J30/J90), tâches par semaine avec checkmarks, mentor (Matthieu) + tuteur tech (Gabriel), entretiens jalons, conseils.

37 % · 18/49 tâches · 2 mentorsOuvrir →

Reset MdP

Nouveau mot de passe

Page split (form + 4 garanties sécurité). Token expiré 28 min, meter de force visuel, 6 critères checkés, comparaison HaveIBeenPwned.

bcrypt cost 12 · audit RGPDOuvrir →

2FA enrollment

Activation double authentification

Stepper 5 étapes, QR code visuel + clé secrète, code 6 chiffres avec timer 30s, 10 codes de secours imprim/copier/PDF, banner ISO 27001.

Authy · obligatoire ANSOuvrir →

olaqin.fr

Site corporate olaqin.fr (grand public)

Hero + trust strip + 3 produits (Stellair, lecteurs, 4Axes) + chiffres clés sur fond noir + histoire + CTA carrières + footer brandé. Navigation publique.

Site public · 240+ clients trustésOuvrir →

Carrières

Page carrières · 17 postes ouverts

Hero stats, filtres (CDI/Alt/Remote/pôle), 12 cartes job détaillées avec fourchette salaire + dispo, 6 perks (impact, taille humaine, souverain, TT, formation, salaires), process 5 étapes (~14 j).

14 CDI · 3 alternancesOuvrir →

Press kit

Press kit · espace presse

6 logos (3 variantes × 3 fonds), palette 10 couleurs charte, 3 pitches (court/moyen/long), 6 faits clés vérifiés, contact Sarah SEMO.

ZIP 38 Mo · brand kit officielOuvrir →

Équipe Commercial

Équipe Commercial & Mkt · 20 personnes

Pipeline Q2 5 colonnes (842→14), composition 6 sous-équipes (Direction, Mkt Offres, Mkt Digital, Sales BizDev, Sales Santé Lib., Sales Structures, EC + Comm), OKRs Q2.

20 collab · 4 leads · 4,2 M€ pipeOuvrir →

Admin Hub Commercial

Admin par pôle · Jean-Marie DUNAND

RBAC scope hub-commercial. 4 KPIs (pipe 4,2 M€, deals 14/18, cycle 87j, NPS 9,1). Funnel pipe avec bars, top deals (Korian, AP-HP, DomusVi), activité équipe 7j, objectif Q2 78 %.

RBAC scope hub-commercialOuvrir →

Extensions juin 2026

7 surfaces additionnelles · Stellair, formations, admin par pôle, audit log

Stellair · espace client

Stellair Évaluations · espace client EHPAD

Vue médecin coordonnateur (Dr. Vivier · EHPAD Les Tilleuls). 86 résidents, 12 évaluations à finaliser, KPIs GIR/santo, activité équipe, rapports automatiques ARS, conformité HDS/ISO/RGPD.

Vert clinique · EHPAD Les TilleulsOuvrir →

Tour v2 · 12 étapes

Tour guidé v2 · enrichi

12 étapes (vs 8 v1) avec iframe live de chaque surface, viewer central avec annotations, grille des étapes, navigation clavier, sticky controls.

iframe live · ~12 minOuvrir →

Équipe RH

Équipe Hub RH · Sabah + Laetitia

2 personnes, 96 collaborateurs accompagnés. KPIs Q2 (turnover 2,4 %, NPS 9,1/10), 3 chantiers (recrutement, télétravail v2, onboarding 30j v2), rituels.

2 membres · +12 recrut. 2025Ouvrir →

RGPD code

Formation RGPD pour développeurs

7h en 1 journée, distanciel Zoom, formatrice Yassine SAMAKI (DPO). 5 principes appliqués + 2 ateliers code (droit à l'oubli, portabilité). 128 formés · 4,7/5.

7h · 4,7/5 · 128 formésOuvrir →

Studio · audit log

Audit log temps réel · RGPD + ISO 27001

Live WebSocket. 5 KPIs (actions/24h, utilisateurs actifs, tentatives bloquées, 2FA, latence). Table 15 lignes récentes avec statuts (OK/Warn/Bloqué), console mono raw, top actions 7j, 3 alertes ouvertes, rétention 3+7 ans.

2 184 actions/jour · WORMOuvrir →

Admin Hub RH

Admin par pôle · vue Sabah IKHLEF

Périmètre limité au Hub RH (banner explicite). 4 KPIs, inbox 12 actions, 6 recrutements actifs, articles Hub RH, chart évolution effectif 12 mois, anniv./entrants/alertes.

RBAC scope hub-rhOuvrir →

Mobile v2

Vues mobiles · v2 (17 iPhones)

Ajout de 9 nouvelles surfaces (mes-documents, galerie, fiche, équipe, événement, i18n, newsletter, congés, tickets) dans la grille mobile. iframes scalés, status bar, dynamic island.

17 frames · iframes liveOuvrir →

Studio contrôle complet (RBAC)

6 rôles · matrice détaillée · charte vivante · audit log

Studio · rôles & permissions

Rôles & permissions · RBAC

6 rôles définis (Super Admin, Admin IT, Admin Comm, Admin Hub métier, Contributeur, Lecteur) avec matrice détaillée de 22 actions · 5 sections (Contenu, Branding, E-mails, Utilisateurs, Hub métier). Sync Azure AD via SCIM. Audit log temps réel. Qui a quel rôle visible directement.

RBAC · 96 collaborateurs · 6 rôlesOuvrir →

Studio · charte

Branding & thèmes · accès Comm

Espace Sarah SEMO + équipe Communication. Éditeur palette/typo/logos en direct, mini-préview Univers/Atlantis/Stellair/FABRIC/e-mail, 5 thèmes white-label, tokens CSS publiés, historique modifs.

Live preview · 5 thèmesOuvrir →

Surfaces complémentaires juin 2026

9 surfaces additionnelles · vie d'équipe, modules, magazine interne

Annuaire v2

Annuaire complet · 92 collaborateurs

Refonte avec génération JS-driven des 92 cartes BDD. Filtres affiliation (Olaqin, alternants, Olaqin Partner, 4Axes Partner, Lead) + pôle. Vue grille ou groupée par pôle. Photos réelles quand fournies, avatars dégradé sinon.

92 cartes · 15 leads · 5 alt. · 10 presta.Ouvrir →

Fiche collab.

Fiche collaborateur · détail

Hero gradient + identité floating. Identité, hiérarchie (manager/me/reports), compétences avec niveaux, activité timeline 30j, badges, disponibilité live, périmètre.

Lien depuis annuaireOuvrir →

Équipe

Présentation d'équipe · DEVEXP

Mission, composition par sous-équipes (4 sections), OKRs Q2 avec progression, stack & outils, rituels & cadence, métriques DORA en sticky side.

10 membres · 3 sous-équipesOuvrir →

Événement

Séminaire Annecy 2026 · fiche événement

Hero plein écran, info row 5 cases, programme 3 jours détaillé, orateurs, logistique (transport, hébergement, restauration), CTA « Finaliser mon inscription » avec sondage.

84/96 confirmés · 3 joursOuvrir →

La Lettre Olaqin · n°23

Newsletter interne mensuelle

Format magazine : édito de Laurent MAÎTRE, highlight du mois, faits marquants, portrait, chiffres, anniversaires, citation, agenda. Archives des 6 éditions précédentes. Brandé logo Olaqin + bandeau dégradé charte.

Édition mensuelle · 23 publiéesOuvrir →

Portrait

Portrait du mois · Agnès CHASSIER

Format magazine 4/5 hero + quote, interview Q&A 5 questions, pull quote, side box identité, lecture/podcast/hors bureau, archives 23 portraits.

Magazine · 3 min de lectureOuvrir →

Congés

Module congés · self-service

3 soldes (CP, RTT, récup'), mini-calendrier 3 mois cliquable, wizard 5 étapes pour poser une demande, mes 6 demandes YTD, vue équipe sem. prochaine, j. fériés.

Wizard · calendrier · équipeOuvrir →

Tickets IT

Mes tickets IT · liste

Liste 7 tickets YTD, filtres affilié + catégorie (Log/Mat/Acc/Net/Séc), priorités P1-P4 colorées, SLA visible. Gideon · assistant IA proposé avant ouverture.

12 tickets · MTTR 2h34Ouvrir →

Ticket détail

Vue détail · ticket IT-2438

Description + repro + impact, attach. (photo/log/vidéo), timeline Gideon AI + Nicolas, com box, side : SLA bar live (Atlantis), KB associée (3 articles), liens rapides.

SLA bar · Gideon AIOuvrir →

Académie

Détail formation · Sécurité Sesam-Vitale

Hero + carte enrolment, public, objectifs péda, programme 9 chapitres avec progression, formateur Yassine SAMAKI, 4 avis stagiaires, prochaines sessions, formations liées.

14h · 4,8/5 · 142 formésOuvrir →

Compléments mai 2026

5 surfaces additionnelles · self-service RH, médias, i18n, B2B

RH · self-service

Mes documents

Fiches de paie, contrats, attestations, IFU — téléchargeables 24/7. Demande d'attestation sur-mesure en 1 clic vers Sabah IKHLEF. Cloud souverain, 10 ans de conservation.

47 docs · 6 catégoriesOuvrir →

Médias internes

Galerie

Mosaïque type Apple Photos : souvenir épinglé séminaire Annecy, sections par mois, 36 albums thématiques. Curation Pôle Communication. 3 432 médias.

3 248 photos · 184 vidéosOuvrir →

B2B · contacts

Annuaire externe

Partenaires, clients institutionnels (CNAM, AP-HP, Korian, IONOS), distributeurs et fournisseurs. Référent Olaqin sur chaque carte. Maintenu par Pôle Commercial + Direction.

42 organisations · 148 contactsOuvrir →

Système · multi-langue

Multi-langue (i18n)

Picker 5 langues (FR/EN actif, DE/ES/IT soon), comparaison FR↔EN côte-à-côte, console admin des 847 clés, ICU MessageFormat, glossaire éditorial (Olaqin, Pôle, NDF…).

847 clés · 96 % EN traduitOuvrir →

État · opt-in push

Activer les notifications

Page d'opt-in Web Push : 3 cas d'usage (mentions, sécurité, événements), maquette navigateur avec prompt natif Chrome + preview toast OS. RGPD-friendly.

Modale centrée · Web Push APIOuvrir →

Le Tweaks panel

— directement embarqué dans la home

Embarqué dans home.html

Changer la palette primaire en un clic

Ouvrez la home Univers, puis activez Tweaks depuis la barre d'outils de Claude Design. Un panneau apparaît en bas à droite : 6 palettes prédéfinies (Olaqin violet, Atlantis bleu, Stellair vert, Communication corail, Rose, Direction noir), bascule clair/sombre, slider radius global. Modifications persistées dans le fichier.

Ouvrir la home → Voir aussi Studio · Thèmes

// Vanilla JS · pas de React

window.parent.postMessage({
type: '__edit_mode_set_keys',
edits: { palette: 'atlantis' }
}, '*');

Les valeurs sont sauvegardées dans le fichier via le marqueur EDITMODE-BEGIN.