Texte long
La prose sur la trame : intertitres, listes, liens, et les pages légales.
La prose
Une colonne de lecture de 64 caractères, des intertitres à taille de lecture, des listes au carré vert, des liens soulignés. Pour le corps d’une fiche, une page légale, le dispositif du Crédit Impôt Innovation.
- Emploi
- Un texte qui se lit de haut en bas : le corps d’une page d’offre, une page légale, une explication.
- Moment
- Quand il y a plus de trois paragraphes à la suite, ou un intertitre.
- Jamais
- Pour une phrase sous une tête de section (c’est .tr-corps), ni pour une note (c’est .tr-note).
Ce sur quoi vous pouvez compter.
Une seule personne à appeler
Votre chef de projet vous suit du premier échange au suivi. Vous n’avez rien à coordonner.
Un délai annoncé d’avance, et tenu
Vous connaissez le délai de mise en ligne avant qu’on commence. Vous pouvez caler votre lancement ou votre saison dessus.
Un devis écrit, et pas de facture surprise
Le devis dit ce qui est compris et ce qui ne l’est pas. Si le projet change en route, on chiffre l’écart avant de s’y mettre.
Construit avec l’IA, dès la première ligne.
Chez une entreprise d’interventions, les demandes arrivent par mail. L’assistant les lit, retrouve le client dans son logiciel métier, puis prépare la fiche d’intervention et le devis. Rien ne s’enregistre sans qu’une personne ait validé.
- 5 ans, à Nantes et à Paris
- Autour de quinze personnes
- Un mois de suivi offert après la mise en ligne
<Prose>
<h2>{V3.engagements.titre}</h2>
<h3>{V3.engagements.liste[0].titre}</h3>
<p>{V3.engagements.liste[0].texte}</p>
<h2>{V3.ia.titre}</h2>
<p>{V3.ia.corpsAnonyme}</p>
<ul>{V3.ouverture.faits.map((f) => <li>{f}</li>)}</ul>
</Prose>| Classe | Zone | Valeur |
|---|---|---|
| .tr-prose | la colonne | 64ch au plus, padding-inline clamp(20px, 3vw, 48px) ; data-reveal posé par le composant |
| .tr-prose h2 | l’intertitre | Outfit, clamp(24px, 2.4vw, 34px) / 1.12, -.025em, 1.5em au-dessus (0 en tête de colonne) |
| .tr-prose h3 | le sous-titre | clamp(19px, 1.5vw, 22px), 1.3em au-dessus |
| .tr-prose p | le paragraphe | ink-2, interligne 1.65, .9em au-dessus |
| .tr-prose ul, ol | la liste | retrait 1.3em, ink-2, interligne 1.6, .35em entre deux points |
| .tr-prose ul li::marker | la puce | un carré ■ vert (--grinn) à .7em |
| .tr-prose a | le lien | encre, souligné 1 px vert profond, décalé de .22em ; 2 px au survol |
| .tr-prose strong | le gras | prévu en 600 ; la règle d’écriture l’interdit dans un paragraphe |
La note
Le paragraphe sous la grille des offres, sur le Crédit Impôt Innovation : une note, en petit, avec un lien souligné. Elle a quitté l’accueil le 12 octobre et reste sur la page Offres ; les pages Crédit Impôt Innovation, Carrières et les pages d’offre posent leurs notes du même dessin.
L’IA, l’application mobile et le logiciel métier peuvent entrer dans le Crédit Impôt Innovation. Le site vitrine et la boutique standard n’y entrent pas. Comment ça marche
<p class="tr-note" data-reveal>{V3.offres.cii} <a class="lk" href="/credit-impot-innovation/">{V3.offres.ciiLien}</a></p>| Classe | Zone | Valeur |
|---|---|---|
| .tr-note | la note | 28 px au-dessus, padding-inline clamp(20px, 3vw, 48px), 14,5 px (--t-small) / 1.55, ink-2, 72ch au plus |
| .tr-note .lk | le lien | en ligne, graisse du texte, encre, souligné 1 px vert profond décalé de .22em ; le trait animé de .lk est retiré |
Le corps
La phrase qui suit le chapô d’une tête de section, ou, dans le point de contact, celle qui accompagne l’agenda. Plus étroite que la prose, en ink-2.
En trente minutes, on sait si on peut vous aider, et comment. Si ce n’est pas pour nous, on vous dit vers qui aller.
{corps && <p class="tr-corps">{corps}</p>}| Classe | Zone | Valeur |
|---|---|---|
| .tr-corps | le corps | 18 px au-dessus, 58ch au plus, ink-2, interligne 1.6 ; dans une Tete, après le chapô |
| .tr-tete--centre .tr-corps | dans une tête centrée | centré par ses marges |
| .tr-joindre__agenda .tr-corps | dans la porte de l’agenda | sans marge, 44ch au plus ; le bouton se cale en bas de la cellule |
| .tr-corps--centre | le corps qui ferme | centré, clamp(28px, 3vw, 40px) au-dessus, 52ch au plus, padding-inline clamp(20px, 3vw, 48px) hors largeur ; défini, inemployé depuis le 12 octobre : la phrase sous l’équipe (V3.equipe.corps) a quitté l’accueil |
Ce qu’un paragraphe ne fait pas
Les règles d’écriture du référentiel sémantique v3, et ce que le vérificateur (scripts/verifier.mjs) contrôle déjà sur les pages construites.
| Règle | D’où elle vient | Qui la tient |
|---|---|---|
| Pas de gras dans un paragraphe | référentiel v3, le registre : le gras reste aux titres et aux montants | la relecture ; contrôle à ajouter au vérificateur |
| Pas de titre de plus de huit mots | référentiel v3, contrôles à ajouter | la relecture ; contrôle à ajouter au vérificateur |
| Pas de tiret cadratin | le vérificateur bloque le cadratin dans le texte visible ; le demi-cadratin reste à ajouter | le vérificateur |
| Pas de points de suspension | référentiel v3, contrôles à ajouter | la relecture ; contrôle à ajouter au vérificateur |
| Pas de prix dans un titre h1 à h3 | le vérificateur : un prix s’affiche, il n’argumente jamais | le vérificateur |
| Pas d’argent sur un bouton | le vérificateur : ni montant, ni devis, ni prix, ni tarif dans un .btn | le vérificateur |
| Le vocabulaire banni | BANNI dans marque.ts, treize expressions ; le référentiel en ajoute pour les noms d’offre | le vérificateur, sauf sur les pages Écarté et Précédent du design system |
En trente minutes, on sait si on peut vous aider, et comment. Si ce n’est pas pour nous, on vous dit vers qui aller.
En trente minutes, on sait si on peut vous aider, et comment. Si ce n’est pas pour nous, on vous dit vers qui aller.
RègleUn texte long se lit dans une colonne de 64 caractères, sans gras ni tiret : le titre dit, le paragraphe explique.