kami-landing

Que fait kami-landing ?

Produire un document d'une seule page dans le système de design kami (紙 / 纸). L'esthétique emprunte à l'imprimé éditorial, aux livres blancs techniques et à la correspondance dactylographiée ancienne — l'objectif est du bon contenu sur du bon papier, pas une interface d'application moderne.

Source de vérité du système de design : design-systems/kami/DESIGN.md. Lisez-la avant de livrer. Les tokens, les règles typographiques, les « dix invariants » et les couleurs interdites s'y trouvent.

Ce que vous obtenez

Un seul fichier HTML autonome contenant :

• Toile parchemin chaleureuse (#f5f4ed) — jamais #ffffff.
• Accent chromatique unique — bleu-encre (#1B365D), utilisé sur le numéro de section, le mot d'accentuation du titre, la règle gauche du manifeste et les valeurs métriques. Ailleurs, le bleu-encre doit couvrir ≤ 5 % de la surface du document.
• Serif à un seul poids (500) pour la hiérarchie — Charter (EN), TsangerJinKai02 / Source Han Serif (CN), ou YuMincho (JA), sélectionné par le paramètre language. Aucun italique nulle part.
• Rythme typographique serré — hauteurs de ligne 1,10–1,55, espacement des lettres selon la langue (0 pour EN, 0,35px pour CN, 0,02em pour JA).
• Empilements numériques en font-variant-numeric: tabular-nums pour que les colonnes de métriques et les chiffres de pagination soient proprement alignés.
• Profondeur via des anneaux de 1px + ombres légères (0 4px 24px rgba(0,0,0,0.05)). Pas d'ombres portées dures, pas de néomorphisme, pas de flous avec backdrop-filter.
• Remplissages de tags en hexadécimal solide (ex. #E4ECF5), jamais rgba() — les moteurs de rendu d'impression sur-peignent les tags alpha.
• Responsive à 1280 / 980 / 768 / 560.

Structure de la page

1. Ligne d'en-tête — sélecteur de langue · édition · version (12px sans majuscules)
2. Héros         — titre d'affichage (96–106px serif 500), sous-titre (21px),
                   trois jetons de héros (teinte parchemin)
3. Manifeste     — paragraphe d'accroche en serif 400, 20px, 1,65 LH, avec
                   règle gauche bleu-encre et pied de signature
4. Ligne de métriques — 3 à 6 cellules : valeur (24px serif 500 bleu-encre, tabular-nums),
                         étiquette (12px serif 500 olive)
5. Chapitres     — numérotés (`01`, `02`, …) bleu-encre serif 500 14px,
                   titre de section 28–32px, corps 14–15px
6. Pied de page  — mot d'accroche (serif 500 méga), licence · année · contact,
                   index du site en trois colonnes en 12px serif 500

Contrat de workflow

1. Recueillir le brief de marque

Utilisez AskQuestion (ou équivalent) pour collecter le brief de marque par morceaux. Ne déversez pas toute la liste d'entrée sur l'utilisateur ; demandez en deux séquences :

1. Série identité — nom, tagline, lieu, édition / version, URL principale, langue dominante.
2. Série contenu — paragraphe de manifeste + signature, 3-6 tuiles métriques, 3-5 entrées de chapitre (titre + accroche + corps).

2. Choisir la pile linguistique

Le paramètre language contrôle la pile --serif définie sur :root. Choisissez en fonction de la langue dominante du manifeste et du corps du chapitre :

language	--serif	Notes
en	Charter, Georgia, Palatino, Times New Roman, serif	défaut
zh-CN	TsangerJinKai02, Source Han Serif SC, Songti SC, Georgia	espacement des lettres 0,35px sur le corps
ja	YuMincho, Hiragino Mincho ProN, Source Han Serif JP	aussi remplacer --olive par #4d4c48 (les contours de YuMincho sont plus fins)

Le contenu multilingue en ligne est accepté — la chaîne de remplacement par glyphe du navigateur le gère. N'enchaînez pas les trois familles dans une seule déclaration font-family ; cela dilue le caractère.

3. Écrire index.html

Produisez un seul fichier avec tout le CSS en ligne. Miroir de la structure de example.html et utilisez uniquement les tokens de design-systems/kami/DESIGN.md. N'inventez pas de nouvelles couleurs, poids ou familles de polices.

Primitives de composants que l'agent peut intégrer (tous définis dans le bloc <style> de l'exemple) :

• .eyebrow, .label — surlignages sans-serif
• .metric — paire verticale valeur + étiquette
• .section-num + .section-title + .section-lede
• .tag.standard, .tag.brush — tags en hexadécimal solide (un seul brush max par page)
• .quote — citation serif 500 avec règle gauche
• ul.dash — puces tiret en bleu-encre
• .code — bloc de code fond ivoire, bordure 1px
• .footer-kicker — mot serif 500 méga

Étiquetez chaque élément modifiable avec data-od-id="<slug-unique>" pour que le mode commentaire de l'application hôte puisse le cibler.

4. Auto-vérification avant livraison

• Le fond de la page est parchemin (#f5f4ed), jamais #ffffff.
• Le bleu-encre (#1B365D) couvre ≤ 5 % de la surface visible — comptez les numéros de section, la règle du manifeste, les valeurs métriques, le mot d'accentuation du titre. Total ≤ 5 %.
• Tous les gris sont chauds (R ≈ G > B). Pas de slate-*, pas de #f3f4f6.
• Le poids serif reste à 500 — pas de font-weight: 700 ou 900 sur du texte serif.
• Pas de font-style: italic nulle part. L'emphase utilise la couleur bleu-encre ou un .tag à la place.
• Tous les empilements numériques (valeurs métriques, pagination, dates, chiffres financiers) portent font-variant-numeric: tabular-nums.
• Tous les remplissages de tags sont en hexadécimal solide (ex. #E4ECF5), jamais rgba().
• Ombres : au plus un anneau de 1px ou une ombre légère 0 4px 24px rgba(0,0,0,0.05). Pas d'ombres portées dures.
• Titre ≤ 6 mots à la taille d'affichage ; CJK ≤ 8 caractères.
• À 768px et 560px, la mise en page se réduit à une colonne sans défilement horizontal.

Fichiers de cette compétence

design-templates/kami-landing/
├── SKILL.md                 # ce contrat
├── README.md                # démarrage rapide humain
└── example.html             # rendu canonique SplatStudio

Limites

• N'inventez pas de nouvelles couleurs ou polices. La palette kami est fixe ; si un brief exige une couleur de marque, repoussez ou rendez la couleur de marque comme un seul accent .tag.brush.
• N'introduisez pas de seconde couleur d'accent. Choisissez bleu-encre ou rien.
• Ne mélangez pas les trois piles de polices dans une seule déclaration ; choisissez la langue dominante, remplacez --serif sur :root, et laissez le navigateur résoudre par remplacement par glyphe le contenu multilingue en ligne.
• N'utilisez pas rgba() pour les remplissages de tags — les moteurs de rendu d'impression sur-peignent les tags alpha. Utilisez l'hexadécimal solide prémélangé du tableau dans design-systems/kami/DESIGN.md §2.
• N'ajoutez pas de JavaScript pour l'animation. La page est du papier, pas une application — le mouvement appartient au défilement du lecteur.

Voir aussi

• design-systems/kami/DESIGN.md — le cahier des charges complet des tokens.
• design-templates/kami-deck/ — compétence sœur qui produit un diaporama dans le même langage kami.
• Amont : tw93/kami — compétence Claude originale (MIT) que le système de design adapte.