magholmes/cool-style

Was macht cool-style?

Destilliert aus der genauen Betrachtung hunderter unabhängiger Websites – persönliche Seiten, Netzkunst, Schriftgießereien, Archive, Studios, kleine Werkzeuge, Journale – gespeichert von Menschen, die die besten Ecken des Webs sammeln (references/method.md). Nichts davon ist ein Trendreport. Es ist das, was diese Seiten tatsächlich tun, gezählt.

Eine Vorlage antwortet auf die Frage „Wie sieht eine Website aus?“ Jede dieser Seiten antwortet auf die Frage „Worum geht es auf dieser Website?“ – und lässt dann die Antwort über Layout, Schrift, Farbe und das eine Ding, das sich bewegt, entscheiden.

Der Kanon reicht von grob bis akribisch – ein Neocities-Schrein mit einem gekachelten GIF-Hintergrund und eine bis aufs Pixel durchgestaltete Schriftgießerei sind beide darin enthalten. Beide sind cool. Was fehlt, ist die Mitte: die Seite, die über alles Mögliche handeln könnte.

Bevor du anfängst

1. Finde zuerst die Idee (nächster Abschnitt). Kein Layout, keine Palette, keine Schriftart, bis du die Idee in einem Satz sagen kannst.
2. Wähle einen Archetyp aus der folgenden Tabelle und starte für einen Neubau von dessen Starter: node ${CLAUDE_SKILL_DIR}/scripts/new.mjs <archetyp> <verzeichnis>.
3. Schau dir echte an. node ${CLAUDE_SKILL_DIR}/scripts/examples.mjs <tag oder wort> gibt untersuchte Seiten aus, die einen Move machen, sortiert nach Relevanz (--tags listet das Vokabular auf; --random 5 für einen Impuls).
4. Wenn ein anderer Hausstil gilt (z.B. magnus-style), hat dieser Vorrang bei Token-Schriftarten, Farben, Timings. Nutze dieses Skill für die Idee, die Struktur und die Moves.

Finde die Idee

Frage (dich selbst oder die Person – eine Frage nach der anderen):

1. Was ist es, in einem einfachen Satz? Nicht, wofür es da ist. „Ein Logbuch jedes Liedes, das ein Mikrofon an einem Laternenpfahl gehört hat.“ „Notizen aus einem solarbetriebenen Magazin.“
2. Woran erinnert es? Das Objekt, der Ort oder das System, dem es bereits ähnelt: ein Kalender, ein Laden mit Öffnungszeiten, eine Tabelle, ein Garten, ein Radio, ein Buchzeichen, ein Ring, ein Schreibtisch. Dies wird zum Container (Gesetz 1).
3. Was ist wahr darüber, was eine Vorlage verbergen würde? Sein Gewicht, sein Alter, seine Öffnungszeiten, seine Daten, das Wetter, wo es gemacht wird, die Anzahl der Dinge darin, wer es gemacht hat.
4. Was ist das Eine, das sich bewegt oder verändert? Wähle eines aus. Zeit, ein Messwert, der Mauszeiger des Besuchers, Zufall, andere Besucher.
5. Was würde jemanden dazu bringen, den Link einem Freund zu schicken? Das ist der Signatur-Move. Alles andere wird leiser, damit es gesehen werden kann.

Schreibe die Antworten oben im Projekt auf (ein Kommentar in index.html ist in Ordnung). Wenn eine Antwort „nichts“ ist, ist die Seite nicht bereit fürs Design – sie braucht Inhalt.

Die zwölf Gesetze

1. Lasse die Form das Thema nachspielen. Die stärksten Seiten verwenden die eigene Form ihres Themas als Container. Ein Essay über Wellen scrollt ewig, jeder Absatz steigt auf und kehrt zurück (#214). Ein Leitfaden zu Machine-Learning-Datensätzen ist als Tabelle angelegt (#481). Eine Geschichte der Schnittstellen sitzt in einem nachgebauten 1984er Mac-Fenster (#501). Ein Überwachungs-Musik-Logbuch ist ein Zweifarb-LCD (#76). Das Archiv eines täglichen Comics ist ein Jahreskalender (#21). Test: Könnte dieses Layout ein anderes Thema unverändert aufnehmen? Dann ist es eine Vorlage.
2. Eine Idee, die durch jede Ebene getragen wird. Die Metapher reicht bis zur Navigation, den Überschriften, den Bildern, sogar der Seitengröße. Our Networks (#232) druckt seine Sitemap als tree-Befehl, zeichnet seinen Laptop in ASCII und wiegt 39 KB. Oft ist die ganze Idee ein billiger Mechanismus, der vollständig durchgezogen wird: 36 CSS-Kacheln, die ein Gedicht verstecken (#228), Buchstabenabstand, der von einem Tag Winddaten gesteuert wird (#669).
3. Eine Website ist ein Ort, keine Broschüre. Räume, Schreibtische, Städte, Gärten, Bücherregale, Cafés mit Öffnungszeiten (#828), Radios, Kioske. Navigation wird zu Möbeln: ein Wegweiser (#197), ein Ring (#203), ein Bücherregal (#652), eine Zwiebel, die man schält (#789). Sogar die Domain ist ein Ortsname – etwa 1 von 6 verwendet eine ausdrucksstarke TLD (.world .garden .cafe .town .computer .zone).
4. Halte eine Tinte. Eine Farbe auf einem Grund, und die Arbeit liefert jede andere Farbe. Ein Viertel der Seiten verwendet drei Hex-Farben oder weniger; nach den Grautönen sind die am häufigsten verwendeten Farben im gesamten Kanon reines #ffff00, #ff0000 und #0000ff. Nimm den Akzent aus dem Thema – das Rot des Buchumschlags, das archiviert wird (#3). → colour.md
5. Schrift mit einem Grund – oder dem Browsereigenen, absichtlich. 69% hosten eine Schriftart selbst (Neue Haas, ABC Diatype, Monument Grotesk, Space Mono führen); 23% verwenden nur Systemschriften und 9% deklarieren gar keine – Times und Standardblau als Statement. Monospace erscheint in 55% der Schriftstapel. Vorlagen-Schriftarten sind nahezu abwesend (Inter oder Geist auf ~4%). Die am häufigsten deklarierten Schriftarten der Beispiele sind Arial, Times und Helvetica. Maßstab ist Kontrast: die Hälfte geht runter auf 11px oder kleiner, ein Viertel geht hoch über 100px, ein Drittel verwendet vier Größen oder weniger. → type.md
6. Das Inhaltsverzeichnis ist die Startseite. Listen, Tabellen, Kalender und Zählungen schlagen Helden und Karten. Linien (Haar-, Punktlinien) statt Kästchen; jedes Element in denselben Slots; echte Metadaten als Spalten; Zählungen neben Kategorien; Zeitstempel; Dateigewichte. Ein Architekturbüro als Tabelle (#535), Emissionsdaten mit einem Himmelsstreifen pro Zeile (#522), Spielergebnisse als Box-Drawing-Text (#288).
7. Sag es in einem Satz. Die Schnittstelle als Prosa geschrieben: die Beschreibung ist die Navigation (#316, #282, #530), eine Bio mit Logos anstelle von Namen (#856), ein Rebus, bei dem Zeichnungen für Substantive stehen (#547), eine ganze Seite als ein Satz mit der Anmeldung als letztem Satzteil (#783). Die Stimme ist spezifisch, menschlich, oft kleingeschrieben, manchmal lustig, immer ehrlich – eine durchgestrichene Schließzeit (#828), eine Überschrift, die warnt, dass die Seite langsam ist (#504). → voice.md
8. Lass ein Ding lebendig sein. Die meisten untersuchten Seiten (86%) tun etwas – aber normalerweise eine Sache: die Stunde färbt den Hintergrund, das Wetter setzt einen Farbverlauf (#832), die Bilder einer Webcam werden wie ein Instrument gespielt (#12), Buchstaben treiben mit dem Wind (#669), Besucher erscheinen als anonyme Tiere (#95), die Seite schließt nachts. Eine Uhr braucht einen Grund (wessen Zeit? bis wann?). → recipes.md
9. Standardwerte und geliehene Objekte sind Material. Native Formularelemente als Strophen eines Gedichts (#123), ein Frameset als Layout (#616), ein ISP-Portal der 2000er für ein Album (#631), ein Media-Player von 2005 für eine Band (#116), Clippy als Cookie-Banner (#179). Ein Genre zu zitieren, gibt der Seite kostenlos eine Stimme. Rauheit wird nur dann als Absicht gelesen, wenn die Idee scharf ist.
10. Belohne die Neugierigen. Etwas für den Mauszeiger, die Geduldigen und die View-Source-Menge: Hover-Enthüllungen, Wörter, die verblassen, bis du sie berührst (#360), ein Bällebad-Filter (#479), eine Lupe, die du ziehst (#254), Notizen in den HTML-Kommentaren (#283), eine andere Seite bei jedem Besuch. Verstecke niemals das Wesentliche dort.
11. Klein, statisch, verlinkt – gebaut, um zu bleiben. Etwa ein Drittel der gespeicherten Seiten sind bereits tot, umgestaltet oder hinter Mauern. Einfache eigenständige Seiten (oft auf GitHub Pages) haben überlebt; JavaScript-Shells, ausgemusterte Hosts und abgelaufene Domains starben zuerst. Mittleres Gewicht der Erstanbieterinhalte ist ~250 KB und ein Viertel sind unter 50 KB. Verlinke nach außen: ein Viertel trägt zehn oder mehr ausgehende Links auf der ersten Seite – Freunde, Webringe, Verzeichnisse, Quellen.
12. Cool und freundlich. Die blinden Flecken des Kanons: nur 17% berücksichtigen prefers-reduced-motion, die Abdeckung von Alt-Texten liegt im Median bei 17%, 56% entfernen Fokusumrandungen, 18% blockieren Zoom, die Hälfte setzt Text auf 11px oder kleiner. Mache jeden Move mit seiner Leitplanke (never.md, recipes.md). Cool, das Menschen ausschließt, ist einfach nur laut.

Wähle einen Archetyp

Der Container ist die erste Entscheidung. Vollständige Beschreibungen, definierende Moves, Beispiele und Fallstricke: references/archetypes.md.

Archetyp	die Website ist…	geeignet für	Starter	schau dir an
notebook	ein öffentlich geführtes Notizbuch	Essays, Tagebücher, Forschungstagebücher, Zines	notebook	#34 #124 #214 #362
index	ein Katalog, ein Hauptbuch, eine Datenbank	Portfolios, Archive, Sammlungen	index	#3 #522 #535 #288
sentence	ein Satz, auf den du klicken kannst	Studios, Biografien, Manifeste, kleine Organisationen	sentence	#316 #282 #530 #783 #856
poster	ein Bildschirm, ein Wort, eine Tinte	Studios, Labels, Events, Veröffentlichungen	poster	#7 #776 #201 #599
room	ein Ort mit Dingen darin	Persönliche Seiten, Shops, Sammlungen	room	#9 #277 #92 #793
almanac	ein Kalender, eine Uhr, eine Jahreszeit	Tagebücher, Zeitpläne, datierte Arbeiten	almanac	#21 #128 #243 #718
atlas	eine Karte, ein Garten, ein Netzwerk	Linkseiten, Verzeichnisse, Forschung	atlas	#81 #139 #578 #284
instrument	etwas zum Spielen	Schriftmuster, Spielzeuge, Werkzeuge, Generatoren	poster + Rezepte	#254 #615 #622 #353
broadcast	ein Live-Feed der Welt	Webcams, Radios, Daten, Sensoren	almanac + Rezepte	#12 #76 #51 #832
costume	eine geliehene Schnittstelle aus einer anderen Ära	Musik, Archive, Parodien, Lancierungen	—	#501 #116 #631 #61
exhibition	eine Ausgabe, eine Show, ein Objekt zum Drehen	Journale, Abschlussausstellungen, Kataloge	index	#263 #838 #677 #865
specimen	die Schriftart ist die Schnittstelle	Gießereien, Lettering, Schriftprojekte	poster	#776 #195 #254 #352
commons	von seinen Besuchern gemacht	Gästebücher, Anthologien, Communities	notebook	#654 #423 #92 #249
shrine	ein Liebesbrief an das alte Web	Fanseiten, Collagen, persönliche Seiten	room	#586 #265 #441 #751

Archetypen können kombiniert werden (ein Almanach, der auch ein Gemeingut ist), aber einer führt.

Mach Moves, keine Dekoration

Ein Move ist eine Entscheidung, die du benennen kannst („Die Navigation ist der Satz“, „Der Hintergrund folgt der Stunde“). Dekoration ist alles, was du nicht benennen kannst. references/moves.md listet über 70 Moves nach Dimensionen auf – Idee, Struktur, Typografie, Farbe, Bild, Interaktion, Zeit, Stimme, Details – jeweils mit den Seiten, die sie umsetzen.

• Ein Signatur-Move, ganz durchgezogen (Gesetz 2). Zwei oder drei unterstützende Moves, leiser. Alles andere schlicht. Die untersuchten Seiten stapeln selten mehr.
• Bevorzuge Moves, die aus dem Inhalt kommen (das Wetter, wo du bist, die Anzahl der Dinge, die Form des Themas) gegenüber Moves, die aus einer Bibliothek kommen.
• Ein Move, der auf jeder Seite identisch funktionieren würde, ist Dekoration.

Arbeitsablauf

1. Idee. Beantworte die fünf Fragen. Schreibe den einen Satz oben in index.html.
2. Container. Wähle den Archetyp; scripts/new.mjs für einen Neuanfang. Baue die Struktur zuerst in einfachem HTML – die Starter zeigen das Auszeichnungsniveau (echte Listen, Tabellen, <time>, <details>).
3. Inhalt vor Stil. Setze die echten Wörter, echten Bilder (Alt-Text jetzt schreiben), echten Zählungen und Daten ein. Coole Seiten bestehen zu 80% aus Inhalt.
4. Schrift und Tinte. Wähle eine Schriftart mit einem Grund (oder die Systemschrift, absichtlich) und eine Tinte auf einem Hintergrund. Vier Größen oder weniger, eine davon sehr groß, wenn der Archetyp es will. type.md, colour.md.
5. Der Signatur-Move. Baue ihn ordentlich aus recipes.md – mit der Tastaturvariante, Touch-Variante und Variante für reduzierte Bewegung.
6. Details. Favicon, Titel, Auswahlfarbe, ein Kolophon, letztes Update, ausgehende Links, eine 404-Seite, die im Charakter bleibt. moves.md § Details.
7. Audit. node ${CLAUDE_SKILL_DIR}/scripts/audit.mjs <verzeichnis> – behebe jeden Fehler; behandle Warnungen als Fragen. In CI: die cool-check GitHub Action (README).
8. Schau es dir an. Desktop, ein 390px Telefon, nur Tastatur, reduzierte Bewegung an, langsames Netzwerk. Dann die Frage, die zählt: Würde jemand diesen Link einem Freund schicken? Was würden sie sagen, was es ist?

Checkliste

• Die Idee passt in einen Satz und das Layout könnte kein anderes Thema unverändert aufnehmen.
• Ein Signatur-Move, ganz durchgezogen; unterstützende Moves leiser; keine Dekoration, die du nicht benennen kannst.
• Eine Tinte auf einem Hintergrund (oder eine Palette, die der Inhalt liefert); Farbe bedeutet etwas.
• Schrift: eine Schriftart mit Grund oder die Systemschrift absichtlich; ≤ 4 Größen; kleiner Text immer noch mit voller Tinte.
• Die Wörter sind echt, spezifisch und in einer menschlichen Stimme; keine Broschürenverben, kein Gerüsttitel.
• Etwas ist wahr und lebendig (Zeit, Daten, Anzahl, Ort) – oder die Stille ist beabsichtigt.
• Verlinke nach außen. Ein eigenes Favicon. Ein Kolophon oder ein Über-mich, das sich nach einer Person anhört.
• Tastatur: jeder Move erreichbar; Fokus sichtbar. Touch: nichts hängt vom Hover ab. Reduzierte Bewegung: eine unbewegte Variante existiert.
• Jedes Bild hat einen Alt-Text (oder alt="" wenn Dekoration). Zoom funktioniert. lang ist gesetzt.
• Leichtgewicht: Erstanbieter-HTML+CSS+JS unter ~250 KB, es sei denn, die Idee erfordert mehr; es funktioniert (oder sagt etwas) ohne JavaScript.
• audit.mjs läuft ohne Fehler durch.

Referenzen

Datei	Lesen, wenn
references/canon.md	du die Beweise willst: was die Seiten gemeinsam haben, in Zahlen
references/archetypes.md	bei der Wahl oder Entwicklung des Containers
references/moves.md	bei der Wahl des Signatur- und der unterstützenden Moves
references/recipes.md	beim Bauen eines Moves – 30 kopierfertige Snippets mit ihren Leitplanken
references/type.md	bei der Wahl von Schriftarten, Größen und der Aufgabe der Schrift
references/colour.md	bei der Wahl der Tinte, des Hintergrunds und wann Farbe sich bewegt
references/voice.md	beim Schreiben von Titeln, Navigation, Biografien, Über-mich-Seiten, Kolophonen, Fehlern
references/never.md	beim Überprüfen: Vorlagen-Tells und die eigenen schlechten Angewohnheiten des Kanons
references/catalogue.md	beim Durchstöbern der stärksten Seiten nach Archetyp
references/method.md	woher das kommt und wie sicher man sein kann
data/sites.json	Notizen zu jeder Seite (abfragbar mit scripts/examples.mjs)