La charte OWAN,
relevée sur son funnel

Le positionnement, tel qu'il ressort des textes

Énoncé de positionnement officiel : à définir. Le funnel ne nomme ni concurrent ni différence revendiquée.

Ce qui manque au système de logo

• Version blanche ou négativeà définir

  Indispensable dès qu'un fond sombre apparaît (démonstration ci-dessus).

• Version monochromeà définir
• Symbole seul (le cube)à définir

  Il n'existe qu'à l'intérieur du logo complet.

• Fichier vectorielà définir

  Le seul fichier est une image PNG de 720 px de large.

• Favicon et icône d'applicationà définir

  Le funnel n'en a pas : /favicon.ico renvoie une erreur 404.

• Zone de protectionà définir
• Taille minimaleà définir

  La plus petite taille vue est 58 px de haut, sur mobile.

• Usages interditsà définir

  Seul constat : la version couleur ne tient pas sur fond sombre.

Les cinq couleurs de base

Déclarées sous le commentaire « palette projet » de owan.css. Cliquez une valeur pour la copier.

• --dark#0E1322RGB 14 19 34Encre : tous les textes, le trait d'étape actif, le mot du logo. Déclarée deux fois, --dark et --ink.
• --accent#542DF3RGB 84 45 243Primaire : bouton principal, focus, bouton secondaire, badge Email, variables.
• --success#9AD567RGB 154 213 103Réussite, en teintes seulement : badge sécurité, tuile d'icône, case verte.
• --warning#FFC05FRGB 255 192 95Attention, en teintes seulement : badge SMS, case et pastilles ambre.
• --danger#F86251RGB 248 98 81Erreur : bordure et halo des champs, fond et bord du message d'erreur.

Les dérivés déclarés

Les huit autres variables de :root. Les gris sont l'encre rendue transparente : leur rendu dépend du fond.

Les couleurs écrites en dur

Présentes dans les règles de owan.css et des pages, sans variable. Fonds, dégradé du bouton, textes et icônes d'état, et une couleur tierce.

Les teintes

Une couleur de base avec de la transparence, toujours posée sur blanc dans le funnel. C'est ainsi que vivent le vert, l'ambre et le rose.

D'autres transparences servent seulement dans les ombres (encre 5 à 25 %, accent 40 à 62 %, noir 18 et 22 %, blanc 25 à 70 %). Elles sont listées au chapitre 6.

Les dégradés

Contrastes WCAG

Paires réellement rendues dans le funnel, transparences composées sur leur vrai fond. Le verdict tient compte de la taille réelle : sous 24 px, il faut 4,5:1 pour le niveau AA ; à partir de 24 px, 3:1 suffit. 14 paires sur 20 passent le niveau AA à leur taille réelle. Les 6 échecs : les gris --muted et --muted-2 aux tailles où ils servent, et le texte blanc du bouton « ✓ Enregistré ».

Les graisses

• 400 RegularConnectez votre boîte e-mail
• 500 MediumValider et continuer
• 600 SemiBoldEmail de bienvenue
• 700 BoldÉtape 1 / 6
• 800 ExtraBold, importée, non utiliséeConnecter mon Telegram

400 : titres, libellés, nom d'étape. 500 : saisie, boutons, badges, messages. 600 : titre d'un message type, bouton Enregistrer, mot en gras d'un sous-titre. 700 : numéro d'étape, titres de section en capitales, badges de 10 px.

L'échelle des tailles

Douze tailles déclarées, de 10 à 30 px (la plus grande varie de 24 à 30 px selon l'écran), chacune liée à un élément précis. Aucune échelle n'est déclarée : c'est la liste de ce qui existe, avec un texte réel à la taille réelle.

« normal » : aucun interligne n'est fixé, le navigateur applique celui de la police.

Chasse fixe

Aucune police à chasse fixe n'est déclarée. Les variables comme [entreprise] s'affichent dans la police par défaut du navigateur, qui change d'un appareil à l'autre. Police à chasse fixe : à définir

Boutons

Champs

Cartes et encarts

Étapes du formulaire

Six étapes, une par page. En tête de chaque carte : la pastille « Étape n / 6 » et le nom de l'étape. Au-dessus : six traits, noirs pour les étapes faites, le trait courant traversé d'un éclat toutes les 5 secondes.

Messages d'erreur et de réussite

Mouvement

Espacements

Toutes les valeurs écrites en marges, écarts et positions, à l'échelle 1:1, avec leur nombre d'emplois. Tous les entiers de 1 à 18 px y sont. Échelle d'espacement : à définir

Rayons

Plus l'objet est grand, plus son rayon l'est. Deux rayons sont déclarés en variables (--radius 10 px, --radius-lg 30 px), les autres sont écrits en dur.

Ombres

Des ombres longues et décalées vers le bas, teintées de l'encre ou du violet, jamais de noir pur à l'extérieur. Le bouton principal ajoute un relief intérieur.

Grille

Grille à plusieurs colonnes pour d'autres supports : à définir

1. Vouvoyer, toujours

   À faireConnectez votre boîte e-mail grâce au bouton ci-dessous.Vos informations sont 100% sécurisées
   À ne pas faireConnecte ta boîte mail.

2. Un bouton parle à la première personne : Connecter, puis mon, ma ou mes

   À faireConnecter mon TrelloConnecter ma boîte e-mailConnecter mes plateformesJe n'ai pas de CRM Trello
   À ne pas faireAutoriser l'accès OAuthCliquez ici

3. Le bouton annonce la suite

   À faireContinuer : personnaliser mes messagesDernière étape : connecter TelegramValider et continuer
   À ne pas faireSuivant

4. Chaque écran confirme ce qui vient d'être fait

   À faireInformations validéesBoîte mail connectée !Inscription terminée !Titres des étapes 3, 4 et 6, sous une coche verte.
   À ne pas faireÉtape 3 : e-mail

5. Rassurer au moment sensible, avec un fait concret

   À faireConnexion sécurisée via Google. Nous ne voyons jamais votre mot de passe.Vous cliquez « Autoriser », c'est tout — rien à copier-coller.
   À ne pas faireVos données sont protégées conformément à la réglementation en vigueur.

6. Dire ce qu'OWAN fait, et pour quel résultat

   À faireOwan créera automatiquement vos cartes leads et suivra vos chantiers dans votre tableau Trello.OWAN vous prévient sur Telegram à chaque nouveau lead, devis ou relance.
   À ne pas faireIntégration Trello disponible.

7. Une erreur dit quoi faire, en peu de mots

   À faireLa connexion n'a pas abouti. Réessayez.Il manque votre nom complet, votre banque.
   À ne pas faireErreur 500Une erreur inattendue s'est produite.

8. L'attente tient en un ou deux mots, suivis de points de suspension

   À faireUn instant…Enregistrement…⏳ En attente de votre message sur Telegram…
   À ne pas faireChargement en cours, veuillez patienter quelques instants

9. Un emoji, rarement, et la feuille 🌿 comme signe

   À faireDernière étape 🌿Merci 🌿 Votre Telegram est relié.C'est enregistré 🎉
   À ne pas faire🚀🔥 Bravo !!! 🎉🎉

10. Une personne derrière l'assistant

    À faireSamy vous recontacte très vite pour activer votre assistant OWAN.
    À ne pas faireUn conseiller prendra contact avec vous.

À trancher

Le funnel hésite sur plusieurs points d'écriture. Aucun n'est tranché dans ses textes.

• Le nomà définir

  OWAN (11 fois), Owan (9 fois), owan (logo).

• E-mail, email ou mailà définir

  « Votre boîte e-mail », « Boîte mail connectée ! », « Email de connexion Unipro », « emails & SMS ».

• Espace avant %à définir

  « 100% sécurisées » et « 50% » dans le funnel, mais « 100 % gratuit » et « 50 % » dans l'email de bienvenue.

• Apostropheà définir

  Apostrophe droite (') partout, alors que les guillemets sont typographiques (« »).

• Mots anglaisà définir

  « lead », « CRM » et « Email » cohabitent avec « relance » et « devis ». La liste des pays du téléphone est en anglais.

• Variablesà définir

  Crochets [entreprise] presque partout, accolades {date} et {heure} dans l'email de date d'intervention.

Les messages types

L'étape 5 montre les 14 messages qu'OWAN enverra au nom de l'entreprise. Leur voix n'est pas celle du funnel : c'est l'entreprise qui parle à ses clients, avec « nous » et une signature.

Icônes

Trait seul, sans remplissage, bouts et angles arrondis, couleur héritée du texte. Sept tracés sont identiques à ceux de la bibliothèque Heroicons (version 2, style « outline »), le chevron est celui de Lucide, l'avion et le cercle de validation sont dessinés à part.

• Bouclier cochéHeroicons, trait 1,8Badge sécurité, 18 px
• EnveloppeHeroicons, trait 1,7Champ email, 20 px
• CadenasHeroicons, trait 1,7 ou 1,8Mot de passe 20 px, case verrouillée 15 px
• ŒilHeroicons, trait 1,7Afficher le mot de passe, 20 px
• Œil barréHeroicons, trait 1,7Masquer le mot de passe, 20 px
• Flèche droiteHeroicons, trait 2,2Boutons, 18 px
• CocheHeroicons, trait 2,6Pastille cochée, 14 px
• Chevron basLucide, trait 2Carte de message, 22 px
• Avion TelegramTracé propre, trait 1,8, #229ED9Tuile de l'étape 6, 40 px
• Cercle de validationTracé propre, deux vertsTuile des étapes 2 à 4, 40 px

Grille 24 × 24, épaisseurs de 1,7 à 2,6 selon la taille d'affichage. Bibliothèque d'icônes officielle : à définir

Emojis

• 🌿Signature : fin de phrase à l'étape 6, dans presque tous les messages types
• 🎉Réussite : « C'est enregistré 🎉 », email de bienvenue
• ⏳Attente Telegram
• ✓« ✓ Enregistré »
• ⚠️« ⚠️ Réessayer »
• ✅ 👉 💬 💰 ✨ 😊Messages types seulement : listes, lien, avis, argent, devis, relance

Images

Les deux fichiers sont à côté de cette page. Les couleurs transparentes passent en hexadécimal à 8 chiffres dans le JSON (#0E13228F pour l'encre à 56 %), la valeur CSS d'origine reste dans $extensions.

tokens.css

/* OWAN — design tokens relevés sur https://onboarding.owan.fr (26/09/2026).
   Source : /static/owan.css + styles et SVG en ligne des pages. Rien d'inventé ;
   ce qui n'existe pas dans le funnel est marqué « à définir » dans le brandbook.
   Police chargée par le funnel :
   @import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap'); */

:root{

  /* ── Couleurs de base, déclarées dans :root de owan.css (« palette projet ») ── */
  --owan-dark: #0E1322;                                 /* Encre. :root --dark (identique à --ink). */
  --owan-accent: #542DF3;                               /* Primaire : bouton, focus, liens d'action. :root --accent. */
  --owan-success: #9AD567;                              /* Succès. Jamais utilisé plein : seulement en teintes (rgba). :root --success. */
  --owan-warning: #FFC05F;                              /* Alerte. Jamais utilisé plein : seulement en teintes (rgba). :root --warning. */
  --owan-danger: #F86251;                               /* Erreur : bordure des champs en erreur. :root --danger. */

  /* ── Dérivés déclarés dans :root de owan.css ── */
  --owan-ink: #0E1322;                                  /* Texte principal. :root --ink. */
  --owan-muted: rgba(14,19,34,.56);                     /* Texte secondaire : libellés, sous-titres. Rendu #787B83 sur blanc. :root --muted. */
  --owan-muted-2: rgba(14,19,34,.42);                   /* Texte tertiaire : notes, icônes, libellé flottant. Rendu #9A9CA2 sur blanc. :root --muted-2. */
  --owan-line: rgba(14,19,34,.06);                      /* Bordure des champs au repos. :root --line. */
  --owan-focus: rgba(84,45,243,.30);                    /* Bordure au focus (recherche pays). :root --focus. */
  --owan-focus-ring: rgba(84,45,243,.12);               /* Anneau de focus des champs. :root --focus-ring. */
  --owan-card: #FFFFFF;                                 /* Fond des cartes. :root --card. */
  --owan-unipro: #F5F7FB;                               /* Fond de l'encart Unipro. :root --unipro. */

  /* ── Fonds écrits en dur dans les règles ── */
  --owan-bg-top: #EFF2F8;                               /* Haut du fond de page (dégradé vers blanc). body. */
  --owan-white: #FFFFFF;                                /* Blanc : bas du fond, champs, puces, listes. body, .field input, .puce. */
  --owan-ghost-hover: #FAF9FF;                          /* Fond du bouton secondaire au survol. .cta-ghost:hover. */

  /* ── Bouton principal ── */
  --owan-cta-top: #6B47F7;                              /* Haut du dégradé du bouton principal. .cta. */
  --owan-cta-bottom: #4A27DC;                           /* Bas du dégradé du bouton principal. .cta. */

  /* ── Couleurs d'état écrites en dur ── */
  --owan-success-ink: #4D7A27;                          /* Texte vert : badge sécurité, badge par défaut, case verte. .secure, .tpl-badge, .t-vert. */
  --owan-success-icon: #6AAB36;                         /* Icône verte : bouclier, cercle de validation. .secure svg, .check-ring circle, .t-vert. */
  --owan-success-strong: #5D9A32;                       /* Coche de validation, bouton « ✓ Enregistré ». .check-trait, .tpl-save.saved. */
  --owan-danger-ink: #C23B2D;                           /* Texte des messages d'erreur. .erreur-box. */
  --owan-warning-ink: #8A6212;                          /* Texte ambre : badge SMS, pastille ambre. .tpl-badge.sms, .t-ambre. */
  --owan-warning-icon: #C8891A;                         /* Icône ambre (page /paiements). .t-ambre --teinte. */
  --owan-social-ink: #BE185D;                           /* Texte du badge « Réseaux ». .tpl-badge.social. */

  /* ── Couleur tierce ── */
  --owan-telegram: #229ED9;                             /* Avion Telegram de l'étape 6 (couleur de Telegram, pas d'OWAN). */

  /* ── Teintes (couleur de base + transparence) ── */
  --owan-success-tile-from: rgba(154,213,103,.28);      /* Tuile d'icône, début du dégradé. .icone. */
  --owan-success-tile-to: rgba(154,213,103,.12);        /* Tuile d'icône, fin du dégradé. .icone. */
  --owan-success-tint: rgba(154,213,103,.16);           /* Fond du badge sécurité et de la case verte. .secure, .t-vert --fond. */
  --owan-success-badge: rgba(154,213,103,.18);          /* Fond du badge de catégorie par défaut. .tpl-badge. */
  --owan-success-tile-border: rgba(154,213,103,.37);    /* Bordure de la tuile d'icône. .icone. */
  --owan-success-line: rgba(154,213,103,.45);           /* Bordure de la case verte. .t-vert --trait. */
  --owan-danger-tint: rgba(248,98,81,.10);              /* Fond d'erreur et halo du champ en erreur. .erreur-box, .field input.err. */
  --owan-danger-line: rgba(248,98,81,.30);              /* Bordure du message d'erreur. .erreur-box. */
  --owan-warning-tint: rgba(255,192,95,.18);            /* Fond du badge SMS et de la pastille ambre. .tpl-badge.sms, .t-ambre --fond. */
  --owan-warning-line: rgba(255,192,95,.55);            /* Bordure ambre. .t-ambre --trait. */
  --owan-accent-07: rgba(84,45,243,.07);                /* Fond de la case bleue et de la pastille cochée. .t-bleu --fond, .puce.on. */
  --owan-accent-08: rgba(84,45,243,.08);                /* Surlignage de liste, fond des variables. .iti__highlight, .banque-liste li:hover, .tpl-vars code. */
  --owan-accent-10: rgba(84,45,243,.1);                 /* Fond du badge « Email ». .tpl-badge.email. */
  --owan-accent-22: rgba(84,45,243,.22);                /* Bordure du bouton secondaire. .cta-ghost. */
  --owan-accent-24: rgba(84,45,243,.24);                /* Bordure de pastille au survol. .puce:hover. */
  --owan-accent-28: rgba(84,45,243,.28);                /* Bordure de la case bleue. .t-bleu --trait. */
  --owan-social-tint: rgba(219,39,119,.12);             /* Fond du badge « Réseaux ». .tpl-badge.social. */
  --owan-ink-035: rgba(14,19,34,.035);                  /* Fond d'une case verrouillée sans teinte. .verrou. */
  --owan-ink-045: rgba(14,19,34,.045);                  /* Fond de la pastille « Étape 1 / 6 ». .step-pill. */
  --owan-ink-05: rgba(14,19,34,.05);                    /* Fond du bouton œil au survol. .eye:hover. */
  --owan-ink-18: rgba(14,19,34,.18);                    /* Trait de progression inactif. .bar. */
  --owan-white-90: rgba(255,255,255,.9);                /* Reflet : liseré haut de carte, éclat du trait courant. .card, .bar.current::after. */

  /* ── Dégradés ── */
  --owan-grad-signature: linear-gradient(var(--owan-grad-angle, 45deg), #8978F9 0%, #8282FC 8%, #838AF9 16%, #8B93FA 25%, #AE7EF9 33%, #CD69F5 42%, #D264F6 50%, #F87C42 58%, #F88B45 66%, #F99C4E 75%, #FBB05C 83%, #FCC16C 92%, #FFDDA4 100%); /* Mot en dégradé des titres (.grad), « répliqué depuis Gradient-square.webp, sans grain ». Angle 45deg qui tourne de 360° en 18 s. */
  --owan-grad-cta: linear-gradient(180deg, #6B47F7 0%, #542DF3 52%, #4A27DC 100%); /* Bouton principal. .cta. */
  --owan-grad-page: linear-gradient(180deg, #EFF2F8 0%, #FFFFFF 58%); /* Fond de page, attaché à la fenêtre. body. */
  --owan-grad-tile: linear-gradient(160deg, rgba(154,213,103,.28), rgba(154,213,103,.12)); /* Tuile d'icône verte. .icone. */

  /* ── Typographie ── */
  --owan-font: 'Rethink Sans', system-ui, -apple-system, Segoe UI, sans-serif; /* Google Fonts, variable 400 à 800 + italique 500. :root --font. */
  --owan-font-weight-regular: 400;                      /* Titres, libellés, nom d'étape. */
  --owan-font-weight-medium: 500;                       /* Saisie, boutons, badges, messages. */
  --owan-font-weight-semibold: 600;                     /* Titre d'un message type, bouton Enregistrer, mot en gras du sous-titre. */
  --owan-font-weight-bold: 700;                         /* Numéro d'étape, titres de section en capitales, badges 10 px. */
  --owan-font-weight-extrabold: 800;                    /* Importée par la feuille de style, utilisée nulle part. */
  --owan-font-size-24: 24px;                            /* Titre d'accueil, titre de remerciement. .hero h1, .merci h2. */
  --owan-font-size-15: 15px;                            /* Saisie, libellés, boutons, sous-titres. .field input, .cta, .scene .sous. */
  --owan-font-size-14-5: 14.5px;                        /* Nom de l'étape, intro des messages. .step-name, .tpl-intro. */
  --owan-font-size-14: 14px;                            /* Listes déroulantes, case verrouillée, champs des messages. .iti__country-list, .verrou, .tpl-body input. */
  --owan-font-size-13-5: 13.5px;                        /* Message d'erreur, pastilles, bouton Enregistrer. .erreur-box, .puce, .tpl-save. */
  --owan-font-size-13: 13px;                            /* Pastille d'étape, badge sécurité. .step-pill, .secure. */
  --owan-font-size-12-5: 12.5px;                        /* Notes, description d'un message type. .scene .note, .tpl-head .d. */
  --owan-font-size-12: 12px;                            /* Titres de section en capitales, libellés de champ. .sect-titre, .tpl-cat, .tpl-label. */
  --owan-font-size-11-5: 11.5px;                        /* Liste des variables. .tpl-vars. */
  --owan-font-size-11: 11px;                            /* Variable [entreprise]. .tpl-vars code. */
  --owan-font-size-10: 10px;                            /* Badge Email / SMS / Réseaux. .tpl-badge. */
  --owan-font-size-title: clamp(24px, 6vw, 30px);       /* Titre de scène fluide, de 24 à 30 px. .scene h1. */
  --owan-line-height-title-scene: 1.16;                 /* .scene h1 */
  --owan-line-height-title-hero: 1.18;                  /* .hero h1 */
  --owan-line-height-title-merci: 1.2;                  /* .merci h2 */
  --owan-line-height-tight: 1.4;                        /* .tpl-head .d */
  --owan-line-height-base: 1.5;                         /* .erreur-box, .tpl-intro, textarea, .tpl-vars */
  --owan-line-height-note: 1.55;                        /* .scene .note */
  --owan-line-height-body: 1.6;                         /* .scene .sous, .merci p */
  --owan-tracking-title: -0.012em;                      /* Titres. .hero h1, .scene h1. */
  --owan-tracking-caps: 0.14em;                         /* Titres de section en capitales. .sect-titre, .tpl-cat. */

  /* ── Rayons (du plus petit au plus grand) ── */
  --owan-radius-4: 4px;                                 /* Variable [entreprise]. .tpl-vars code */
  --owan-radius-5: 5px;                                 /* Fond du libellé flottant. .field label */
  --owan-radius-8: 8px;                                 /* Pastille d'étape. .step-pill */
  --owan-radius-9: 9px;                                 /* Bouton œil, recherche et lignes de liste. .eye, .iti-search, .iti__country */
  --owan-radius-10: 10px;                               /* Champs, bouton Enregistrer. :root --radius */
  --owan-radius-11: 11px;                               /* Badge sécurité. .secure */
  --owan-radius-12: 12px;                               /* Message d'erreur. .erreur-box */
  --owan-radius-14: 14px;                               /* Listes déroulantes. .iti__country-list, .banque-liste */
  --owan-radius-15: 15px;                               /* Boutons principal et secondaire. .cta */
  --owan-radius-16: 16px;                               /* Carte de message type. .tpl-card */
  --owan-radius-18: 18px;                               /* Encart Unipro et son onglet. .unipro, .unipro-badge */
  --owan-radius-20: 20px;                               /* Badge de catégorie. .tpl-badge */
  --owan-radius-22: 22px;                               /* Tuile d'icône. .icone */
  --owan-radius-30: 30px;                               /* Carte principale. :root --radius-lg */
  --owan-radius-pill: 99px;                             /* Traits de progression, pastilles de choix. .bar, .puce */

  /* ── Espacements et gabarit (aucune échelle déclarée dans le funnel : valeurs des composants) ── */
  --owan-wrap-max: 464px;                               /* Largeur de colonne des étapes. .wrap */
  --owan-wrap-max-paiements: 600px;                     /* Colonne de /paiements. .wrap-paie */
  --owan-wrap-max-templates: 640px;                     /* Colonne de l'étape 5. .tpl-wrap */
  --owan-wrap-padding-top: 29px;                        /* .wrap */
  --owan-wrap-padding-top-desktop: 46px;                /* .wrap à partir de 700 px */
  --owan-wrap-padding-x: 18px;                          /* .wrap */
  --owan-wrap-padding-bottom: 72px;                     /* .wrap */
  --owan-card-padding-y: 22px;                          /* .card */
  --owan-card-padding-x: 20px;                          /* .card */
  --owan-block-gap: 22px;                               /* Écart entre blocs : badge sécurité, encart Unipro, traits, sections. .secure, .unipro, .bars, .sect */
  --owan-field-gap: 13px;                               /* Écart entre deux champs. .field */
  --owan-row-gap: 11px;                                 /* Écart entre deux colonnes de champs. .row, .ligne */
  --owan-input-padding-y: 10px;                         /* .field input */
  --owan-input-padding-x: 16px;                         /* .field input */
  --owan-input-icon-offset: 46px;                       /* Retrait du texte quand le champ a une icône. .field-icon input */
  --owan-cta-padding-y: 17px;                           /* .cta */
  --owan-cta-padding-x: 22px;                           /* .cta */
  --owan-cta-gap: 9px;                                  /* Texte / flèche. .cta */
  --owan-cta-stack-gap: 10px;                           /* Bouton secondaire sous le principal. .cta-ghost */
  --owan-bars-width: 118px;                             /* .bars */
  --owan-bars-gap: 5px;                                 /* .bars */
  --owan-bar-height: 3px;                               /* .bar */
  --owan-tile-size: 74px;                               /* .icone */
  --owan-tile-size-mobile: 63px;                        /* .icone sous 700 px */
  --owan-logo-height: 64px;                             /* .brand .logo */
  --owan-logo-height-mobile: 58px;                      /* .brand .logo sous 700 px */

  /* ── Épaisseurs de bordure ── */
  --owan-border-control: 1.5px;                         /* Champs, pastilles, cases, bouton secondaire. */
  --owan-border-hairline: 1px;                          /* Message d'erreur, tuile, carte de message, listes. */

  /* ── Ombres et anneaux ── */
  --owan-shadow-card: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -28px rgba(14,19,34,.16), 0 8px 24px -16px rgba(14,19,34,.05); /* .card */
  --owan-shadow-cta: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 6px rgba(0,0,0,.18), 0 10px 22px -8px rgba(84,45,243,.55), 0 3px 8px -4px rgba(84,45,243,.5); /* .cta */
  --owan-shadow-cta-hover: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 6px rgba(0,0,0,.18), 0 14px 30px -8px rgba(84,45,243,.62), 0 3px 8px -4px rgba(84,45,243,.5); /* .cta:hover */
  --owan-shadow-cta-active: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.22), 0 6px 14px -8px rgba(84,45,243,.5); /* .cta:active */
  --owan-shadow-ghost: 0 4px 14px -8px rgba(84,45,243,.4); /* .cta-ghost */
  --owan-shadow-ghost-hover: 0 6px 18px -8px rgba(84,45,243,.5); /* .cta-ghost:hover */
  --owan-shadow-tile: 0 12px 26px -14px rgba(154,213,103,.7), inset 0 1px 0 rgba(255,255,255,.7); /* .icone */
  --owan-shadow-dropdown: 0 16px 40px -10px rgba(14,19,34,.25); /* .iti__country-list, .banque-liste */
  --owan-shadow-message-card: 0 18px 40px -30px rgba(14,19,34,.18); /* .tpl-card */
  --owan-shadow-ring-focus: 0 0 0 2px rgba(84,45,243,.12); /* Champ au focus. .field input:focus */
  --owan-shadow-ring-error: 0 0 0 4px rgba(248,98,81,.10); /* Champ en erreur. .field input.err */
  --owan-shadow-ring-chip: 0 0 0 1.5px rgba(84,45,243,.30); /* Pastille cochée, teinte par défaut. .puce.on */

  /* ── Mouvement ── */
  --owan-duration-enter: 550ms;                         /* Entrée du logo, du titre, de la carte, du bouton ; pop de la coche. rise, pop */
  --owan-duration-draw: 500ms;                          /* Tracé de la coche. draw */
  --owan-duration-open: 300ms;                          /* Ouverture d'un message type. .tpl-card.open .tpl-body */
  --owan-duration-hover: 200ms;                         /* Ombre du bouton, flèche, chevron. .cta, .tpl-chevron */
  --owan-duration-field: 180ms;                         /* Bordure et anneau des champs. .field input */
  --owan-duration-label: 160ms;                         /* Montée du libellé flottant. .field label */
  --owan-duration-quick: 150ms;                         /* Œil, pastilles, bouton Enregistrer. .eye, .puce, .tpl-save */
  --owan-duration-press: 140ms;                         /* Enfoncement du bouton. .cta:active */
  --owan-duration-shine: 5000ms;                        /* Éclat qui traverse le trait de l'étape courante. barShine */
  --owan-duration-grad-spin: 18000ms;                   /* Rotation du dégradé du mot mis en valeur. gradSpin */
  --owan-ease-rise: cubic-bezier(.2,.7,.2,1);           /* Entrées (rise). */
  --owan-ease-pop: cubic-bezier(.3,1.6,.4,1);           /* Rebond de la tuile de validation (pop). */

  /* ── Points de rupture (pour mémoire : une variable CSS ne marche pas dans @media) ── */
  --owan-breakpoint-sm: 420px;                          /* (max-width:420px) : libellé long de /paiements rétréci */
  --owan-breakpoint-md: 620px;                          /* (min-width:620px) : /paiements passe sur deux colonnes */
  --owan-breakpoint-lg: 700px;                          /* (max-width:700px) / (min-width:700px) : mobile / bureau */
}

tokens.json, extrait

{
  "color": {
    "base": {
      "accent": {
        "$value": "#542DF3",
        "$type": "color",
        "$description": "Primaire : bouton, focus, liens d'action. :root --accent.",
        "$extensions": {
          "fr.owan": {
            "css": "--owan-accent",
            "value": "#542DF3"
          }
        }
      }
    },
    "derived": {
      "muted": {
        "$value": "#0E13228F",
        "$type": "color",
        "$description": "Texte secondaire : libellés, sous-titres. Rendu #787B83 sur blanc. :root --muted.",
        "$extensions": {
          "fr.owan": {
            "css": "--owan-muted",
            "value": "rgba(14,19,34,.56)"
          }
        }
      }
    }
  },
  "shadow": {
    "card": {
      "$value": [
        {
          "color": "#FFFFFFE6",
          "offsetX": "0px",
          "offsetY": "1px",
          "blur": "0px",
          "spread": "0px",
          "inset": true
        },
        {
          "color": "#0E132229",
          "offsetX": "0px",
          "offsetY": "30px",
          "blur": "60px",
          "spread": "-28px",
          "inset": false
        },
        {
          "color": "#0E13220D",
          "offsetX": "0px",
          "offsetY": "8px",
          "blur": "24px",
          "spread": "-16px",
          "inset": false
        }
      ],
      "$type": "shadow",
      "$description": ".card",
      "$extensions": {
        "fr.owan": {
          "css": "--owan-shadow-card",
          "value": "inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -28px rgba(14,19,34,.16), 0 8px 24px -16px rgba(14,19,34,.05)"
        }
      }
    }
  }
}