kennedys0/taste-style-swiss-editorial

Utilisez cette compétence uniquement après qu'un utilisateur a explicitement choisi ou qu'une configuration de projet confirmée le spécifie. Pour les nouvelles demandes UI non expliquées, utilisez un sélecteur de style tel que au lieu de décider du goût de l'utilisateur ici. Les directives de marque, d'accessibilité et les préférences utilisateur existantes priment sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer à coder l'UI avant la sélection du style.

Pack de style : Suisse / Éditorial

ID : swiss-editorial
Signature : Hiérarchie typographique rigoureuse basée sur une grille, contraste d'échelle marqué, filets structurels, index numérotés et espace négatif intentionnel.

Ceci est un pack de style, pas un défaut obligatoire. Ne le chargez qu'après une sélection explicite ou un style de projet applicable confirmé. Les instructions du projet peuvent remplacer les choix individuels. Préservez l'accessibilité, l'utilité et les contraintes de marque. Les polices sont des suggestions, pas des dépendances obligatoires. Une page simple avec du texte noir sans-serif ne se qualifie pas comme Suisse Éditorial.

Bonnes correspondances / compromis

• Fonctionne bien pour : Agences de design haut de gamme, publications architecturales, portfolios éditoriaux, magazines culturels, rapports annuels et récits de produits de luxe.
• Soyez prudent avec : Outils opérationnels transactionnels rapides où l'affichage typographique massif ralentit la saisie de données répétitive.
• Directions de référence :
  • Style international zurichois classique : Fond blanc papier net (#FFFFFF ou #F7F7F7), typographie noire jais (#111111), filets de séparation structurels de 1px, index numérotés (01, 02), et une seule touche de rouge suisse (#E3000F).
  • Klein bleu éditorial moderne : Toile monochrome ultra-propre avec du bleu International Klein (#002FA7) comme accent focal de haute précision sur la navigation et les actions principales.

Contrôle de fidélité suisse éditorial — obligatoire

Avant de déclarer une page swiss-editorial comme terminée, la fenêtre d'affichage initiale doit se lire visiblement comme un travail éditorial typographique rigoureux et aligné sur une grille. Si un utilisateur a choisi ce style, une page minimale générique manquant de contraste d'échelle dramatique et de règles structurelles est un ÉCHEC.

Une implémentation swiss-editorial réussie démontre tous les éléments suivants :

1. Contraste d'échelle typographique extrême : Un contraste décisif et sans compromis entre les titres grotesk massifs (48px–72px desktop / 32px–44px mobile, crénage serré) et le corps de texte discipliné (16px, hauteur de ligne 1.55), avec des étiquettes de section en majuscules crénées (letter-spacing: 0.08em).
2. Filets horizontaux structurels : Les sections de contenu, les limites de colonnes et les en-têtes de métadonnées sont délimités par des filets nets de 1px solides (border-top: 1px solid #111111), établissant des étagères visuelles claires.
3. Hiérarchie de section numérotée : Numérotation d'index éditoriale distincte (01, 02, 03) placée au-dessus ou à côté des blocs d'articles principaux, créant des ancres visuelles scannables.
4. Alignement rigoureux sur une grille multi-colonnes : La mise en page est strictement conforme à une grille desktop de 12 colonnes avec de larges gouttières et marges asymétriques. Le contenu ne flotte jamais librement sans ancrage de grille.
5. Base monochrome + 1 accent de signal à fort impact : La mise en page reste strictement monochrome (noir, blanc cassé, gris papier) avec exactement un accent de signal délibéré (Rouge Suisse #E3000F ou Bleu Klein #002FA7) appliqué avec parcimonie aux liens actifs, aux balises d'index ou aux appels à l'action principaux.

Test de la première fenêtre : Dans une capture d'écran desktop, identifiez l'échelle massive du titre, les filets de séparation structurels de 1px, les marqueurs de section numérotés et la grille asymétrique délibérée sans lire le titre de la page. Si cela ressemble à un modèle de blog standard, augmentez l'échelle de la typographie et les règles de grille.

Exception typographique suisse éditoriale explicite — l'échelle dramatique est requise

Remplacement spécifique à Swiss-editorial : La mise en garde universelle contre le bâclé concernant les tailles de police excessives ou les espaces vides NE DOIT PAS être interprétée comme une interdiction des grands titres d'affichage (48px–72px) ou des espaces blancs généreux ici. Dans la typographie suisse (Josef Müller-Brockmann, Max Bill), l'espace négatif actif et le contraste d'échelle audacieux sont les principaux matériaux structurels, remplaçant les graphiques décoratifs ou les ombres.

• Traitements typographiques autorisés : Échelle d'affichage massive (jusqu'à 72px), typographie d'index numérotée, bordures structurelles en cheveux, métadonnées en majuscules crénées et liens à accent unique à fort impact.
• Limite anti-bâclé : Ne collez pas de citations en relief flottantes aléatoires sans contexte éditorial, de faux numéros de publication ou de titres surdimensionnés qui évincent le contenu lisible réel.
• Interprétation anti-bâclé : Évaluez les mises en page suisses par la discipline de la grille, le rythme typographique et la clarté de l'information, et non en essayant de remplir chaque centimètre carré de cartes. L'espace blanc qui dirige le focus est un design authentique.

Typographie et écriture

Grotesk sans objectif : Helvetica Neue, Neue Haas Grotesk, Arial, Inter ou système sans. Titres : 48–72 px desktop (poids 700–800, letter-spacing: -0.03em); sous-titres : 24–32 px; corps : 16–18 px (hauteur de ligne 1.55–1.65); chiffres d'index et légendes : 12–14 px majuscules (letter-spacing: 0.08em).

Direction des couleurs

• Mode clair (Papier blanc galerie net) :
  • Base toile : Blanc papier (#FFFFFF ou blanc galerie chaud #FBFBFA).
  • Encre / Typographie : Noir obsidienne profond (#111111).
  • Filets de séparation : Trait capillaire solide (#111111 ou #D1D5DB).
  • Gris secondaire : Neutre éditorial (#6B7280).
• Mode sombre (Monolithe sombre dramatique) :
  • Base toile : Toile obsidienne noire (#0D0D0D).
  • Encre / Typographie : Typographie d'affichage blanc os (#F5F5F5).
  • Filets de séparation : Trait capillaire blanc translucide (rgba(255, 255, 255, 0.20) ou #2A2A2A).
  • Gris secondaire : Gris pierre (#9CA3AF).
• Accent de signal unique : Rouge suisse (#E3000F clair / #EF4444 sombre) ou Bleu International Klein (#002FA7 clair / #3B82F6 sombre).
• Règle d'inversion de thème : En suisse éditorial, le mode sombre/clair est un basculement de polarité typographique faisant autorité. En mode sombre, la toile est #0D0D0D et la typographie est #F5F5F5. Les boutons primaires s'inversent proprement (mode clair : bloc noir uni avec texte blanc ; mode sombre : bloc blanc uni avec texte noir). Le texte noir sur toile sombre ou le texte blanc sur toile blanche est strictement interdit.

Mise en page et géométrie

Les coins sont parfaitement droits (0px border-radius par défaut, jusqu'à 2px max); marges extérieures généreuses; alignement strict sur une grille de 12 colonnes. Des filets horizontaux structurels de 1px encadrent les blocs de contenu.

Surfaces, profondeur, texture

Les surfaces sont complètement plates, sans ornement et nettes comme de l'encre. Zéro ombre portée, zéro dégradé d'arrière-plan, zéro flou. La profondeur est communiquée purement par l'échelle typographique, le poids et la juxtaposition spatiale.

Anatomie des composants et interaction

• CTA Primaire Éditorial : Bloc noir uni net avec typographie blanche, ou lien texte souligné propre avec décalage de trait de 2px.
• Balise d'index numérotée : Petite balise majuscule : [ 01 / ARCHITECTURE ].
• Règle de division : border-top: 1px solid #111111; padding-top: 1.5rem; margin-top: 2rem;.
• Métadonnées tabulaires : Paires clé-valeur à deux colonnes séparées par des séparateurs capillaires.

Animation

Minimale, instantanée ou transitions linéaires propres de 120 à 160 ms. Pas de rebond élastique, pas de parallaxe flottante. Concentrez-vous sur les changements d'état nets.

Recette facultative Anime.js v4

• Décision d'animation : Fondu d'opacité du texte propre ou expansion de règle horizontale au défilement.
• Durée de départ : 140 ms (0 = immédiat) ; ajustez à la tâche et à la préférence de l'utilisateur.
• Éviter : Mouvement élastique, rotations 3D, oscillations ludiques.
• Dépendance : CSS/natif par défaut. Utilisez Anime.js v4 uniquement si l'interaction demandée le justifie. Suivez references/motion-engine.md du Taste Engine lorsqu'il est disponible ; la compétence autonome suit les principes de mouvement réduit et de pas de boucle décorative ci-dessus.

Rédaction UI et microcopie

Cultivée, concise et articulée. Exemples : « Selected Works 2026 », « Index », « Read Documentation », « 01 / Overview ». Évitez l'argot familier ou le battage publicitaire enthousiaste.

Jetons de départ (suggestions, pas un thème complet)

Jeton	Défaut mode clair	Défaut mode sombre
--taste-swiss-bg	#ffffff	#0d0d0d
--taste-swiss-ink	#111111	#f5f5f5
--taste-swiss-accent	#e3000f	#ef4444
--taste-swiss-muted	#6b7280	#9ca3af
--taste-swiss-rule	1px solid #111111	1px solid rgba(255, 255, 255, 0.20)
--taste-swiss-radius	0px	0px
--taste-swiss-font-heading	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-font-body	'Helvetica Neue', Inter, system-ui, sans-serif	'Helvetica Neue', Inter, system-ui, sans-serif
--taste-swiss-motion-duration	120ms	120ms

Les jetons représentent une direction et ne sont pas garantis copier-coller pour chaque palette/plateforme. Définissez --taste-swiss-* au niveau du projet, assurez le contraste des couleurs et adaptez via les jetons de thème plutôt que de disperser des valeurs littérales.

Composition Hero (première fenêtre complète)

Lorsqu'un portfolio/landing/page d'accueil publique a un hero : utilisez une composition d'en-tête+hero d'un écran visible. Basez la hauteur sur min-height: 100svh avec repli 100vh, en soustrayant l'en-tête réel uniquement lorsqu'il est dans le flux normal ; laissez le hero s'étendre pour l'accessibilité et les écrans mobiles courts. Ne l'appliquez pas aux tableaux de bord privés ou autres écrans de tâche ; les préférences directes de l'utilisateur l'emportent. Direction spécifique au style : Ancrez l'écran d'ouverture avec un titre d'affichage massif faisant autorité, une numérotation de section claire et une répartition asymétrique de la grille entre le récit du hero et la navigation clé. L'espace blanc doit sembler délibéré et composé, pas vide. Voir references/hero-layout.md du routeur lorsqu'il est présent. L'utilisation autonome suit les mêmes principes réactifs et anti-bâclé.

Contrôle de qualité spécifique au style

• À faire : Vérifiez l'alignement strict sur une grille de 12 colonnes ; maintenez un rapport d'échelle dramatique entre le titre et le corps ; assurez-vous que les filets de 1px séparent proprement les sections ; gardez la couleur d'accent strictement unique ; vérifiez le changement de mode sombre/clair afin que la typographie, la toile, les filets et les actions principales s'inversent proprement sans collision de couleurs (contraste minimum 4.5:1).
• À ne pas faire : N'ajoutez pas d'ombres portées, de bulles arrondies ou de dégradés décoratifs ; n'encombrez pas l'espace blanc avec des badges insignifiants ; évitez le texte gris à faible contraste sur les petites étiquettes ; ne laissez pas de typographie noire sur une toile obsidienne sombre.
• Confirmez la cohérence desktop et mobile ; le focus clavier visible (:focus-visible) ; les états de chargement, vide, désactivé, erreur et succès ; le comportement de mouvement réduit (prefers-reduced-motion).
• N'injectez pas d'hypothèses spécifiques au style dans des projets non liés. Lorsque vous combinez des styles, nommez explicitement le style principal et les fonctionnalités empruntées.

Contrôle universel anti-bâclé (autonome)

Chaque élément doit gagner sa place. Contenu avant décoration. Ne décorez pas l'incertitude. N'inventez pas de bilans, de mesures, de témoignages, d'utilisateurs, de logos, d'approbation, de statut vérifié/en ligne, d'activité fictive ou de confirmations de succès ; utilisez des états vides/chargement/erreur honnêtes à la place. Les données de démonstration sont acceptables uniquement si elles sont demandées et clairement étiquetées.

N'ajoutez pas de couches carte-dans-carte décoratives : une surface imbriquée doit représenter une interaction distincte ou une limite d'information. Évitez les grilles à 3 fonctionnalités générées automatiquement, les tableaux de bord à 4 statistiques, les fausses affirmations de hero, les graphiques sans objet, le spam de badges/chips/icônes, l'art décoratif non lié et les boucles aléatoires simplement pour remplir la fenêtre. Préférez le regroupement avec la typographie, l'espacement, l'alignement et les séparateurs. Les pairs égaux ont besoin d'un équilibre visuel intentionnel.

Rédaction anti-bâclé : pas de « Libérez votre potentiel », « Vivez le futur », « Boostez votre flux de travail », revendications « seamless » ou équivalents traduits génériques. Les titres doivent communiquer le contenu réel, les CTA doivent nommer l'action, et le texte vide/erreur/succès doit décrire les états réels et les prochaines étapes. Évitez l'urgence fictive, les décomptes inventés, le battage médiatique vague sur l'IA, les emojis gratuits et les murs de majuscules inaccessibles. Adaptez le libellé à ce style et à la langue de l'utilisateur sans changer la vérité.

Intégrité du contraste du thème et du mode : Lorsqu'un utilisateur demande le mode sombre ou clair (ou construit un sélecteur de thème), les couleurs d'arrière-plan et de premier plan DOIVENT basculer par paires synchronisées sur toutes les surfaces, textes, bordures, entrées et badges sémantiques. Ne laissez jamais de texte noir sur fond sombre, de texte blanc sur fond blanc ou de pastilles de statut illisibles à faible contraste. Tous les états doivent respecter le contraste WCAG AA (minimum 4.5:1 pour le texte normal/corps, 3:1 pour les grands titres et les limites interactives).

Responsif et animation : composez le mobile délibérément, vérifiez les étiquettes longues, les états de focus et le contraste accessible ; pas de coupure de texte pour s'adapter à une mise en page tendance. Statique par défaut ; utilisez l'animation pour les interactions significatives, respectez les préférences de mouvement réduit, évitez la décoration rebondissante/flottante/pulsante sans état réel.

Bloc de complétion des résultats critiques/élevés : le statut/les données fabriqués, les actions cassées, les contrôles inaccessibles/clippés, la copie trompeuse, les collisions de contraste de thème ou les défaillances mobiles importantes doivent être corrigés. Signalez ce qui a été réellement vérifié ; ne prétendez pas avoir effectué des tests qui n'ont pas été exécutés.

Pas un veto esthétique : les couleurs expressives, les ombres, les dégradés, les mises en page de cartes ou les traitements décoratifs sont légitimes lorsqu'ils font partie intentionnellement de l'esthétique sélectionnée et réussissent les vérifications d'utilisabilité. N'imposez pas silencieusement le minimalisme.

Anti-bâclé : spécifique au style

Autorité typographique, pas minimalisme générique.

• Rejeter : Titres faibles, wrappers de cartes décoratives autour du texte, plusieurs couleurs d'accent concurrentes, légendes petites à faible contraste et collisions de thème (telles que la typographie noire restant sur une toile éditoriale sombre).
• À la place : Reposez-vous sur le contraste d'échelle, l'alignement précis des colonnes, le signal d'accent unique et l'inversion de polarité sombre/clair synchronisée.
• Vérification de la copie : Le texte doit se lire comme une publication éditoriale — articulée, structurée et intentionnelle.
• Audit : Exécutez le but universel anti-bâclé, la vérité, la surface imbriquée, la rédaction, le responsive...