Feature Sections

architecture-diagram

stable Sur waimia · 2 Contenu inline (instance)

Expliquer un concept

Diagramme d'architecture signature : N canaux d'entrée vers un système central et M sorties, avec boucle d'amélioration continue.

Ouvrir dans le builder

Instances sur le site

Global 0 instance en page composable

Composé inline inline · non éditable ici

src/pages/en/index.astro
src/pages/index.astro

Aperçu

Comment l'utiliser

Intention

Expliquer un concept

Rôle de page

Corps

Modèle de contenu

Contenu inline (instance)

Contrat de slots

Champ	Nature	Type	Requis	Bilingue	Bornes / valeurs
`background`	Présentation	`enum`	Non	·	paper · paper-2 · paper-3 · ink
`layout`	Présentation	`enum`	Non	·	stacked · split
`proportion`	Présentation	`enum`	Non	·	1-1 · 1-2 · 2-1 · 2-3 · 3-2
`density`	Présentation	`enum`	Non	·	compact · base · ample
`contentAlign`	Présentation	`enum`	Non	·	start · center · end
`placement`	Présentation	`object`	Non	·	·
`fig_num`	Contenu	`text`	Oui	·	·
`fig_title`	Contenu	`text`	Oui	fr / en	·
`spec`	Contenu	`text`	Oui	fr / en	·
`h2`	Contenu	`text`	Oui	fr / en	·
`inputs`	Contenu	`array`	Oui	fr / en	2..8
`input_examples`	Contenu	`array`	Non	fr / en	·
`outputs`	Contenu	`array`	Oui	fr / en	2..6
`system_label`	Contenu	`text`	Oui	·	·
`system_kicker`	Contenu	`text`	Oui	·	·
`system_subtitle`	Contenu	`text`	Oui	·	·
`show_loop`	Contenu	`bool`	Non	·	·
`loop_label`	Contenu	`text`	Oui	fr / en	·
`caption`	Contenu	`text`	Oui	fr / en	·

Déclinaisons · 23

Combinaisons nommées « variante × palette × densité » appliquées à ce composant, prévisualisées en rendu isolé. 10 curées, 13 générées. Échantillon des 12 premières générées (sur 13) ; toutes accessibles en rendu isolé.

Diagramme archi · papier
curée
architecture-diagram--paper
Diagramme archi · papier 2
curée
architecture-diagram--paper-2
Diagramme archi · papier 3
curée
architecture-diagram--paper-3
Diagramme archi · encre
curée
architecture-diagram--ink
Diagramme archi · split · en-tête gauche · schéma dominant 2/3
curée
architecture-diagram--split-2-3
Diagramme archi · split · colonnes égales
curée
architecture-diagram--split-1-1
Diagramme archi · split · en-tête dominant 2/1
curée
architecture-diagram--split-2-1
Diagramme archi · split · encre · ample
curée
architecture-diagram--split-ink-ample
Diagramme archi · empilé · en-tête centré
curée
architecture-diagram--stacked-center
Diagramme archi · atomique · en-tête aligné à droite
curée
architecture-diagram--atomic-header-end
architecture-diagram · équilibré
générée
architecture-diagram--1-1
architecture-diagram · média dominant · média à gauche
générée
architecture-diagram--1-2-left
architecture-diagram · média dominant · média à droite
générée
architecture-diagram--1-2-right
architecture-diagram · texte dominant · média à gauche
générée
architecture-diagram--2-1-left
architecture-diagram · texte dominant · média à droite
générée
architecture-diagram--2-1-right
architecture-diagram · média large · média à gauche
générée
architecture-diagram--2-3-left
architecture-diagram · média large · média à droite
générée
architecture-diagram--2-3-right
architecture-diagram · texte large · média à gauche
générée
architecture-diagram--3-2-left
architecture-diagram · texte large · média à droite
générée
architecture-diagram--3-2-right
architecture-diagram · média très large · média à gauche
générée
architecture-diagram--1-3-left
architecture-diagram · média très large · média à droite
générée
architecture-diagram--1-3-right
architecture-diagram · texte très large · média à gauche
générée
architecture-diagram--3-1-left

Comparer les déclinaisons · 22

Chaque déclinaison, résumée par son écart d'axes face à la démo par défaut du type : seuls les axes qui changent une valeur sont listés. Ouvre-la dans le builder pour l'assembler dans une page.

Diagramme archi · papier
curée
architecture-diagram--paper
background:paper
Ouvrir dans le builder
Diagramme archi · papier 2
curée
architecture-diagram--paper-2
background:paper-2
Ouvrir dans le builder
Diagramme archi · papier 3
curée
architecture-diagram--paper-3
background:paper-3
Ouvrir dans le builder
Diagramme archi · encre
curée
architecture-diagram--ink
background:ink
Ouvrir dans le builder
Diagramme archi · split · en-tête gauche · schéma dominant 2/3
curée
architecture-diagram--split-2-3
layout:splitproportion:2-3
Ouvrir dans le builder
Diagramme archi · split · colonnes égales
curée
architecture-diagram--split-1-1
layout:splitproportion:1-1
Ouvrir dans le builder
Diagramme archi · split · en-tête dominant 2/1
curée
architecture-diagram--split-2-1
layout:splitproportion:2-1
Ouvrir dans le builder
Diagramme archi · split · encre · ample
curée
architecture-diagram--split-ink-ample
layout:splitbackground:inkdensity:ample
Ouvrir dans le builder
Diagramme archi · empilé · en-tête centré
curée
architecture-diagram--stacked-center
layout:stackedcontentAlign:center
Ouvrir dans le builder
Diagramme archi · atomique · en-tête aligné à droite
curée
architecture-diagram--atomic-header-end
placement
Ouvrir dans le builder
architecture-diagram · équilibré
générée
architecture-diagram--1-1
proportion:1-1
Ouvrir dans le builder
architecture-diagram · média dominant · média à gauche
générée
architecture-diagram--1-2-left
proportion:1-2mediaSide:left
Ouvrir dans le builder
architecture-diagram · média dominant · média à droite
générée
architecture-diagram--1-2-right
proportion:1-2mediaSide:right
Ouvrir dans le builder
architecture-diagram · texte dominant · média à gauche
générée
architecture-diagram--2-1-left
proportion:2-1mediaSide:left
Ouvrir dans le builder
architecture-diagram · texte dominant · média à droite
générée
architecture-diagram--2-1-right
proportion:2-1mediaSide:right
Ouvrir dans le builder
architecture-diagram · média large · média à gauche
générée
architecture-diagram--2-3-left
proportion:2-3mediaSide:left
Ouvrir dans le builder
architecture-diagram · média large · média à droite
générée
architecture-diagram--2-3-right
proportion:2-3mediaSide:right
Ouvrir dans le builder
architecture-diagram · texte large · média à gauche
générée
architecture-diagram--3-2-left
proportion:3-2mediaSide:left
Ouvrir dans le builder
architecture-diagram · texte large · média à droite
générée
architecture-diagram--3-2-right
proportion:3-2mediaSide:right
Ouvrir dans le builder
architecture-diagram · média très large · média à gauche
générée
architecture-diagram--1-3-left
proportion:1-3mediaSide:left
Ouvrir dans le builder
architecture-diagram · média très large · média à droite
générée
architecture-diagram--1-3-right
proportion:1-3mediaSide:right
Ouvrir dans le builder
architecture-diagram · texte très large · média à gauche
générée
architecture-diagram--3-1-left
proportion:3-1mediaSide:left
Ouvrir dans le builder

Sections liées

Même famille

about-story-split stable

Récit fondateur en deux colonnes : texte narratif de mission à gauche, timeline de jalons datés à droite. Raconte l’histoire de la marque sans verbiage.

split-media About Sections Illustration au traitListeFrise chronologique +3 17 décl.

asymmetric-services stable

Services en rangées asymétriques (AsymmetricServiceRow) qui alternent gauche/droite : numéro display, nom, body et flèche, signature de /manifesto Acte II.

split-media Manifesto Sections Apparition au scrollDéfilement1 colonne 15 décl.

case-split stable

Cas client en split dark/light 50/50 : récit du cas à gauche (titre, body, CTA) et résultats chiffrés à droite.

split-media Testimonial Sections Apparition au scrollSurvolDéfilement +4 13 décl.

cta-split-visual stable

Bandeau CTA asymetrique 2 colonnes : texte kicker/titre/body/boutons a gauche, visuel SVG decoratif a droite. Distinct des CTA centres.

split-media CTA Sections Apparition au scrollDéfilementIllustration au trait +4 17 décl.

feature-split-media stable

Une feature majeure exposée en deux colonnes : texte et points clés d’un côté, mockup ou capture de l’autre. Le champ reversed permet d’alterner les côtés au fil de la page.

split-media Feature Sections Apparition au scrollDéfilementImage +6 25 décl.

feature-zigzag stable

Lignes alternées visuel/texte (gauche-droite, droite-gauche) pour presenter les fonctionnalites cles d'une offre avec un rythme editorial fort.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +6 25 décl.

Même catégorie

bento-grid stable

Mosaique bento asymetrique de 5 cellules (1 grande 2x2 + 4 petites) pour valoriser les capacites cles avec une mise en page moderne.

bento Feature Sections IcônesCartesListe +1 26 décl.

challenges-grid stable

Grille 2x2 de défis ou pain-points : numéro en coin, icône, titre et texte par carte, border-left accent et élévation au survol. Pose le problème avant la solution sur une landing.

card-grid Feature Sections SurvolIllustration au traitIcônes +4 16 décl.

coming-soon-pills stable

Bande teaser fond paper-2 avec kicker, H2 et liste de pills pour éléments à venir.

list Feature Sections ListeBadge1 colonne 16 décl.

commitments-grid stable

Grille hairline de 2 à 6 engagements ou garanties, titre display et corps sans, extrait de la page Méthode.

card-grid Feature Sections Zoom au survolApparition au scrollSurvol +8 17 décl.

decision-list stable

Arbre de décision : en-tête kicker et titre display à gauche, liste ordonnée numérotée d items à droite, hairlines fines.

list Feature Sections Apparition au scrollDéfilementListe +1 17 décl.

deliverables-grid stable

Grille de livrables tangibles avec cards numérotées et tag format/durée, extraite des pages offre et détail.

card-grid Feature Sections Apparition au scrollSurvolDéfilement +4 29 décl.

Similaires

definition-extract stable

Bloc GEO « format extractible » : kicker mono, gros statement serif avec le terme défini en accent, rangée de pills, puis un bandeau de specs mono. Sobre, fond paper, pensé pour la citation par les moteurs génératifs.

prose Editorial Sections Apparition au scrollDéfilementBadge +3 21 décl.

editorial-dingbat-rule stable

Séparateur ornemental éditorial composant l'atome Dingbat (fleuron, asterisme, fin d'article, règle) : transition entre chapitres avec légendes optionnelles au-dessus et en dessous.

prose Editorial Sections Centré 19 décl.

pain-severity-list stable

Liste éditoriale de pain-points sur fond ink, classés par sévérité : chaque item porte un label severity vertical (mono) et un glyphe (◆▲●○), un titre serif, une description, et une ligne mono « → correctif ». Séparateurs hairline, reveal-stagger.

prose Feature Sections Apparition au scrollDéfilementListe +2 21 décl.

department-stack stable

Stack outils en table éditoriale : en-tête eyebrow et titre display, aside Callout, EditorialTable catégorie/outil/rôle.

table Comparison Sections Apparition au scrollDéfilementTableau +3 13 décl.

rich-text stable

Section de corps riche : un corps Markdown bilingue rendu en HTML au build avec les styles prose du design system. Edition de corps editorial in-context sans backend (le Markdown vit dans le document de page, versionne avec le code). Titres, listes, liens, gras/italique ; mesure de ligne bornee ; variante ink lisible.

prose Editorial Sections Apparition au scrollSurvolListe +1 15 décl.

tech-positioning-split stable

Prise de position technologique en split 50/50 : kicker, titre display, aside, statement manifesto et facts mono clé/valeur.

split-media Feature Sections Apparition au scrollDéfilementIllustration au trait +2 15 décl.

Code

Données de la section (à placer dans sections[])

{
  "type": "architecture-diagram",
  "fig_num": "FIG II · 2.5",
  "fig_title_fr": "L'architecture du système",
  "fig_title_en": "System architecture",
  "spec_fr": "CANAUX · SYSTÈME · ACTIONS",
  "spec_en": "CHANNELS · SYSTEM · ACTIONS",
  "h2_fr": "Une seule <i>architecture</i>.<br/>Six entrées, quatre sorties, mille décisions.",
  "h2_en": "One <i>architecture</i>.<br/>Six inputs, four outputs, a thousand decisions.",
  "inputs_fr": [
    "Ads",
    "Contenu",
    "Site",
    "CRM",
    "Analytics",
    "Marque"
  ],
  "inputs_en": [
    "Ads",
    "Content",
    "Site",
    "CRM",
    "Analytics",
    "Brand"
  ],
  "outputs_fr": [
    "Actions",
    "Supports",
    "Reporting",
    "Pipeline"
  ],
  "outputs_en": [
    "Actions",
    "Assets",
    "Reports",
    "Pipeline"
  ],
  "system_label": "Waimia",
  "system_kicker": "AI SYSTEM",
  "system_subtitle": "multi-agent",
  "show_loop": true,
  "loop_label_fr": "BOUCLE D'AMÉLIORATION CONTINUE",
  "loop_label_en": "CONTINUOUS IMPROVEMENT LOOP",
  "caption_fr": "Six canaux entrent. Quatre familles d'<i>actions</i> sortent. Au milieu, un système multi-agents qui mesure, apprend et réinjecte, sans relance manuelle.",
  "caption_en": "Six channels in. Four families of <i>actions</i> out. In between, a multi-agent system that measures, learns and reinjects, without manual chasing."
}

Pour un agent / MCP

Détail machine de cette section (intention, rôle, contrat de slots, sections liées).

/library/section/architecture-diagram.json

Chemin du détail machine

/library/section/architecture-diagram.json