cool-style

Que fait cool-style ?

Distillé à partir d'un examen minutieux de centaines de sites web indépendants — sites personnels, net art, fonderies typographiques, archives, studios, petits outils, journaux — sauvegardés par des gens qui collectionnent les meilleurs coins du web (references/method.md). Rien ici n'est un rapport de tendances. C'est ce que ces sites font réellement, compté.

Un template répond à "à quoi ressemble un site web ?" Chacun de ces sites répond à "de quoi ce site parle-t-il ?" — puis laisse la réponse décider de la mise en page, de la typographie, de la couleur et de la seule chose qui bouge.

Le canon va du brut à l'exigeant — un sanctuaire Neocities avec un fond GIF carrelé et une fonderie typographique conçue au pixel près y sont tous les deux. Les deux sont cools. Ce qui manque, c'est le milieu : le site qui pourrait parler de n'importe quoi.

Avant de commencer

1. Trouvez l'idée d'abord (section suivante). Pas de mise en page, pas de palette, pas de police tant que vous ne pouvez pas dire l'idée en une phrase.
2. Choisissez un archétype dans le tableau ci-dessous et, pour une nouvelle construction, partez de son starter : node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetype> <dir>.
3. Regardez des vrais. node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag ou mot> affiche les sites étudiés qui font un move, les meilleurs en premier (--tags liste le vocabulaire ; --random 5 pour une secousse).
4. Si un autre style maison est en vigueur (par ex. magnus-style), il l'emporte sur les tokens — visages, couleurs, rythmes. Utilisez ce skill pour l'idée, la structure et les moves.

Trouver l'idée

Demandez (à vous-même, ou à la personne — une question à la fois) :

1. Qu'est-ce que c'est, en une phrase simple ? Pas à quoi ça sert. "Un journal de chaque chanson qu'un microphone sur un lampadaire a entendue." "Notes d'un magazine à énergie solaire."
2. À quoi cela ressemble-t-il ? L'objet, le lieu ou le système qu'il évoque déjà : un calendrier, un magasin avec des heures d'ouverture, un tableur, un jardin, une radio, un ex-libris, un anneau, un bureau. Cela devient le contenant (Loi 1).
3. Qu'est-ce qui est vrai à son sujet qu'un template cacherait ? Son poids, son âge, ses heures, ses données, la météo à l'endroit où il est fabriqué, le nombre de choses qu'il contient, qui l'a fabriqué.
4. Quelle est la seule chose qui bouge ou change ? Choisissez-en une. Le temps, une lecture, le curseur du visiteur, le hasard, d'autres visiteurs.
5. Qu'est-ce qui ferait que quelqu'un envoie le lien à un ami ? C'est le move signature. Tout le reste devient plus silencieux pour qu'il puisse être vu.

Écrivez les réponses en haut du projet (un commentaire dans index.html suffit). Si une réponse est "rien", le site n'est pas prêt pour le design — il a besoin de contenu.

Les douze lois

1. Faites agir la forme comme le sujet. Les sites les plus forts utilisent la propre forme de leur sujet comme contenant. Un essai sur les vagues défile indéfiniment, chaque paragraphe montant et redescendant (#214). Un guide sur les ensembles de données d'apprentissage automatique est présenté comme un tableur (#481). Une histoire des interfaces se trouve dans une fenêtre Mac 1984 reconstruite (#501). Un journal musical de surveillance est un écran LCD bicolore (#76). Les archives d'un comic quotidien sont un calendrier annuel (#21). Test : cette mise en page pourrait-elle contenir un sujet différent inchangé ? Alors c'est un template.
2. Une idée, portée à travers chaque couche. La métaphore atteint la navigation, les titres, les images, même le poids de la page. Our Networks (#232) imprime son plan de site comme une commande tree, dessine son ordinateur portable en ASCII et pèse 39 Ko. Souvent, l'idée entière est un mécanisme bon marché, totalement assumé : 36 tuiles CSS qui cachent un poème (#228), un espacement des lettres dicté par une journée de données de vent (#669).
3. Un site web est un lieu, pas un dépliant. Pièces, bureaux, villes, jardins, bibliothèques, cafés avec heures d'ouverture (#828), radios, kiosques. La navigation devient du mobilier : un panneau indicateur (#197), un anneau (#203), une bibliothèque (#652), un oignon que l'on pèle (#789). Même le domaine est un nom de lieu — environ 1 sur 6 utilise un TLD expressif (.world .garden .cafe .town .computer .zone).
4. Utilisez une seule encre. Une couleur sur un fond, et le travail fournit toutes les autres couleurs. Un quart des sites utilisent trois couleurs hexadécimales ou moins ; après les gris, les couleurs les plus utilisées dans tout le canon sont le #ffff00, #ff0000 et #0000ff purs. Prenez l'accent du sujet — le rouge de la couverture du livre archivé (#3). → colour.md
5. Typographie avec une raison — ou celle du navigateur, délibérément. 69 % auto-hébergent une police (Neue Haas, ABC Diatype, Monument Grotesk, Space Mono en tête) ; 23 % utilisent uniquement les polices système et 9 % n'en déclarent aucune — Times et bleu par défaut comme positionnement. Le monospace apparaît dans 55 % des piles. Les polices de template sont quasiment absentes (Inter ou Geist dans ~4 %). Les polices les plus déclarées par les exemples sont Arial, Times et Helvetica. L'échelle est un contraste : la moitié descend à 11 px ou moins, un quart monte au-delà de 100 px, un tiers utilise quatre tailles ou moins. → type.md
6. L'index est la page d'accueil. Les listes, tableaux, calendriers et décomptes battent les héros et les cartes. Des règles (fines, pointillées) au lieu de boîtes ; chaque élément dans les mêmes emplacements ; des métadonnées réelles comme colonnes ; des décomptes à côté des catégories ; des horodatages ; des poids de fichiers. Un cabinet d'architecture comme un tableur (#535), des données d'émissions avec une bande de ciel par ligne (#522), des scores comme du texte dessiné en boîtes (#288).
7. Dites-le en une phrase. L'interface écrite comme prose : la description est la navigation (#316, #282, #530), une bio avec des logos à la place des noms (#856), un rébus où les dessins remplacent les noms (#547), une page entière comme une phrase avec l'inscription comme sa dernière clause (#783). La voix est spécifique, humaine, souvent en minuscules, parfois drôle, toujours honnête — une heure de fermeture barrée (#828), un titre qui prévient que la page est lente (#504). → voice.md
8. Laissez une chose être vivante. La plupart des sites étudiés (86 %) font quelque chose — mais généralement une seule chose : l'heure colore le fond, la météo définit un dégradé (#832), les images d'une webcam sont notées comme un instrument (#12), les lettres dérivent avec le vent (#669), les visiteurs apparaissent comme des animaux anonymes (#95), le site ferme la nuit. Une horloge a besoin d'une raison (l'heure de qui ? jusqu'à quoi ?). → recipes.md
9. Les valeurs par défaut et les objets empruntés sont du matériau. Les contrôles de formulaire natifs comme strophes d'un poème (#123), un frameset comme mise en page (#616), un portail FAI des années 2000 pour un album (#631), un lecteur multimédia de 2005 pour un groupe (#116), Clippy comme bannière de cookies (#179). Citer un genre donne au site une voix gratuitement. La rugosité se lit comme une intention seulement quand l'idée est tranchante.
10. Récompensez les curieux. Quelque chose pour le curseur, le patient et la foule du code source : des révélations au survol, des mots qui s'estompent jusqu'à ce que vous les touchiez (#360), un filtre à boules (#479), une loupe que vous faites glisser (#254), des notes dans les commentaires HTML (#283), une page différente à chaque visite. Ne cachez jamais l'essentiel là-dedans.
11. Petit, statique, lié — construit pour durer. Environ un tiers des sites sauvegardés sont déjà morts, redessinés ou murés. Les pages autonomes simples (souvent sur GitHub Pages) ont survécu ; les coquilles JavaScript, les hébergeurs retirés et les domaines expirés sont morts en premier. Le poids médian propriétaire est d'environ 250 Ko et un quart fait moins de 50 Ko. Créez des liens : un quart porte dix liens sortants ou plus sur la première page — amis, webrings, répertoires, sources.
12. Cool, et gentil. Les angles morts du canon : seulement 17 % honorent le mouvement réduit, la couverture médiane des textes alternatifs est de 17 %, 56 % suppriment les contours de focus, 18 % bloquent le zoom, la moitié définit le texte à 11 px ou moins. Faites chaque move avec son garde-fou (never.md, recipes.md). Le cool qui exclut les gens est juste du bruit.

Choisir un archétype

Le contenant est la première décision. Descriptions complètes, moves définissants, exemples et pièges : references/archetypes.md.

archétype	le site web est…	pour	starter	regardez
carnet	un carnet tenu en public	essais, journaux, journaux de recherche, zines	notebook	#34 #124 #214 #362
index	un catalogue, un registre, une base de données	portfolios, archives, collections	index	#3 #522 #535 #288
phrase	une phrase que l'on peut cliquer	studios, bios, manifestes, petites organisations	sentence	#316 #282 #530 #783 #856
affiche	un écran, un mot, une encre	studios, labels, événements, sorties	poster	#7 #776 #201 #599
pièce	un lieu avec des choses dedans	sites personnels, boutiques, collections	room	#9 #277 #92 #793
almanach	un calendrier, une horloge, une saison	journaux, plannings, travaux datés	almanac	#21 #128 #243 #718
atlas	une carte, un jardin, un réseau	pages de liens, répertoires, recherche	atlas	#81 #139 #578 #284
instrument	quelque chose que l'on joue	spécimens typographiques, jouets, outils, générateurs	poster + recettes	#254 #615 #622 #353
diffusion	un flux en direct du monde	webcams, radios, données, capteurs	almanac + recettes	#12 #76 #51 #832
costume	une interface empruntée d'une autre époque	musique, archives, parodie, lancements	—	#501 #116 #631 #61
exposition	un numéro, un spectacle, un objet à tourner	revues, expositions de fin d'études, catalogues	index	#263 #838 #677 #865
spécimen	la police de caractères est l'interface	fonderies, lettrage, projets typographiques	poster	#776 #195 #254 #352
communs	fait par ses visiteurs	livres d'or, anthologies, communautés	notebook	#654 #423 #92 #249
sanctuaire	une lettre d'amour au vieux web	sites de fans, collages, pages personnelles	room	#586 #265 #441 #751

Les archétypes se combinent (un almanach qui est aussi un commun), mais un seul mène.

Faire des moves, pas de la décoration

Un move est une décision que vous pouvez nommer ("la navigation est la phrase", "le fond suit l'heure"). La décoration est tout ce que vous ne pouvez pas. references/moves.md liste 70+ moves par dimension — idée, structure, typographie, couleur, image, interaction, temps, voix, détails — chacun avec les sites qui le font.

• Un move signature, porté tout du long (Loi 2). Deux ou trois moves de soutien, plus silencieux. Tout le reste simple. Les sites étudiés en empilent rarement plus.
• Préférez les moves qui viennent du contenu (la météo là où vous êtes, le nombre de choses, la forme du sujet) aux moves qui viennent d'une bibliothèque.
• Un move qui fonctionnerait à l'identique sur n'importe quel site est de la décoration.

Flux de travail

1. Idée. Répondez aux cinq questions. Écrivez la phrase unique en haut de index.html.
2. Contenant. Choisissez l'archétype ; scripts/new.mjs si vous partez de zéro. Construisez d'abord la structure en HTML simple — les starters montrent le niveau de balisage (vraies listes, tableaux, <time>, <details>).
3. Contenu avant le style. Mettez les vrais mots, vraies images (texte alternatif écrit maintenant), vrais décomptes et dates. Les sites cools sont composés à 80 % de contenu.
4. Typographie et encre. Choisissez une police avec une raison (ou celle du système, délibérément) et une encre sur un fond. Quatre tailles ou moins, dont une très grande si l'archétype le demande. type.md, colour.md.
5. Le move signature. Construisez-le correctement à partir de recipes.md — avec le chemin clavier, le chemin tactile et la variante mouvement réduit.
6. Détails. Favicon, titre, couleur de sélection, un colophon, dernière mise à jour, liens sortants, une 404 qui reste dans le personnage. moves.md § détails.
7. Audit. node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <dir> — corrigez chaque erreur ; traitez les avertissements comme des questions. En CI : l'action GitHub cool-check (README).
8. Regardez-le. Bureau, téléphone 390px, clavier seulement, mouvement réduit activé, réseau lent. Puis la question qui compte : est-ce que quelqu'un enverrait ce lien à un ami ? Que dirait-il que c'est ?

Liste de vérification

• L'idée tient en une phrase et la mise en page ne pourrait pas contenir un sujet différent inchangé.
• Un move signature, fait complètement ; les moves de soutien plus silencieux ; aucune décoration que vous ne pouvez pas nommer.
• Une encre sur un fond (ou une palette fournie par le contenu) ; la couleur signifie quelque chose.
• Typographie : une police avec une raison ou celle du système délibérément ; ≤ 4 tailles ; le texte petit est toujours en pleine encre.
• Les mots sont réels, spécifiques et dans une voix humaine ; pas de verbes de dépliant, pas de titre d'échafaudage.
• Quelque chose est vrai et vivant (temps, données, nombre, lieu) — ou l'immobilité est délibérée.
• Liens sortants. Un favicon propre. Un colophon ou un "à propos" qui ressemble à une personne.
• Clavier : chaque move est accessible ; focus visible. Tactile : rien ne dépend du survol. Mouvement réduit : une variante fixe existe.
• Chaque image a un texte alternatif (ou alt="" si décoration). Le zoom fonctionne. lang est défini.
• Léger : HTML+CSS+JS propriétaire sous ~250 Ko sauf si l'idée nécessite plus ; ça fonctionne (ou dit quelque chose) sans JavaScript.
• audit.mjs passe sans erreurs.

Références

fichier	lire quand
references/canon.md	vous voulez les preuves : ce que les sites ont en commun, en chiffres
references/archetypes.md	choisir ou développer le contenant
references/moves.md	choisir le move signature et les moves de soutien
references/recipes.md	construire un move — 30 extraits prêts à copier avec leurs garde-fous
references/type.md	choisir les polices, les tailles et le rôle de la typographie
references/colour.md	choisir l'encre, le fond, et quand la couleur bouge
references/voice.md	écrire les titres, la navigation, les bios, les pages "à propos", les colophons, les erreurs
references/never.md	réviser : les signes de template et les mauvaises habitudes du canon
references/catalogue.md	parcourir les sites les plus forts par archétype
references/method.md	d'où cela vient et à quel point en être sûr
data/sites.json	les notes de chaque site (interroger avec scripts/examples.mjs)