Contextes d'utilisationUsage Contexts

Le système distingue deux modes éditoriaux : Mode Produit pour les pages qui permettent d'agir, et Mode Marketing pour les pages qui communiquent une vision. The system defines two editorial modes: Product Mode for pages that enable action, and Marketing Mode for pages that communicate a vision.

Comparaison des modesMode comparison

DimensionDimension	Mode Produit (SaaS)Product Mode (SaaS)	Mode Marketing (Narratif)Marketing Mode (Narrative)
ObjectifGoal	Permettre d'agirEnable action	Communiquer une visionCommunicate a vision
LecteurReader	Utilisateur qui travailleUser working	Visiteur qui évalueVisitor evaluating
Espacement sectionsSection spacing	`semantic.space.layout.section` (48px)	`semantic.marketing.space.section-breathing` (96px)
Typographie maxMax typography	`typography.heading.1` (40px)	`marketing.typography.display` (60px)
Mise en pageLayout	Grille régulièreRegular grid	Asymétrie contrôléeControlled asymmetry
Attribut HTMLHTML attribute	absentabsent	`data-context="marketing"`

Arbre de décisionDecision tree

QuestionQuestion	RéponseAnswer	ModeMode
La page convainc ou onboarde un visiteur ?Does the page convince or onboard a visitor?	OuiYes	Marketing
La page documente un composant ou un token ?Does the page document a component or token?	OuiYes	Produit
Doute ?Unsure?	——	Produit (défautdefault)

Mapping des pagesPage mapping

PagePage	ModeMode	JustificationRationale
`index.html`	Marketing	Présente la vision, onboardePresents the vision, onboards
`get-started.html`	Marketing	Convainc et guide l'adoptionConvinces and guides adoption
`agents/index.html`	Marketing	Explique le système agentiqueExplains the agentic system
`foundations/*`	ProduitProduct	Documentation des fondationsFoundation documentation
`components/*`	ProduitProduct	Contrats de composantsComponent contracts
`decisions/*`	ProduitProduct	Archive des ADRsADR archive

Tokens MarketingMarketing tokens

Ces tokens sont réservés au Mode Marketing. Ne pas utiliser dans les composants ou pages Produit. These tokens are reserved for Marketing Mode. Do not use in components or Product pages.

Token CSS	DescriptionDescription	ValeurValue
`--agtc-semantic-marketing-typography-display-size`	Titre d'accroche — hero marketing (60px)Display headline — marketing hero (60px)	`3.75rem`
`--agtc-semantic-marketing-typography-display-weight`	Graisse du titre displayDisplay title weight	`700`
`--agtc-semantic-marketing-typography-display-line-height`	Interligne display (ratio)Display line height (ratio)	`1.0`
`--agtc-semantic-marketing-typography-eyebrow-size`	Étiquette eyebrow (12px)Eyebrow label (12px)	`0.75rem`
`--agtc-semantic-marketing-typography-eyebrow-weight`	Graisse eyebrowEyebrow weight	`700`
`--agtc-semantic-marketing-space-section-breathing`	Respiration entre sections (96px)Section breathing room (96px)	`96px`
`--agtc-semantic-marketing-space-hero-gap`	Espace vertical hero (120px)Hero vertical gap (120px)	`120px`

Implémentation CSSCSS implementation

/* Activation du Mode Marketing */
[data-context="marketing"] .hero-eyebrow {
  font-size: var(--agtc-semantic-marketing-typography-eyebrow-size);   /* 12px */
  font-weight: var(--agtc-semantic-marketing-typography-eyebrow-weight);
  letter-spacing: .12em;
  text-transform: uppercase;
}
[data-context="marketing"] .hero-title {
  font-size: var(--agtc-semantic-marketing-typography-display-size);   /* 60px */
  font-weight: var(--agtc-semantic-marketing-typography-display-weight);
  line-height: var(--agtc-semantic-marketing-typography-display-line-height);
}
[data-context="marketing"] .marketing-section {
  padding-block: var(--agtc-semantic-marketing-space-section-breathing); /* 96px */
}
[data-context="marketing"] .marketing-hero {
  padding-block: var(--agtc-semantic-marketing-space-hero-gap); /* 120px */
}

DOs et DON'TsDOs and DON'Ts

À faire (Mode Marketing)Do (Marketing Mode)

Utiliser semantic.marketing.* pour la typographie et l'espacement heroUse semantic.marketing.* for hero typography and spacing
Déclarer data-context="marketing" sur <body>Declare data-context="marketing" on <body>
Headlines = assertions, pas des teasers : "Design tokens that work."Headlines = statements, not teasers: "Design tokens that work."
Hero image = UI réelle ou artefact réel (ou texte seul)Hero image = real UI or real artifact (or text-only)

À éviterDon't

Appliquer data-context="marketing" à une page de documentationApply data-context="marketing" to a documentation page
Utiliser des valeurs en dur (96px, 120px) — toujours via les tokensUse hard-coded values (96px, 120px) — always via tokens
Plus d'un gradient par page, gradient sur les boutons, glassmorphismMore than one gradient per page, gradient on buttons, glassmorphism
Buzzwords : "revolutionize", "seamless", "game-changer", "unlock"Buzzwords: "revolutionize", "seamless", "game-changer", "unlock"

Voir aussi :See also: ADR-057