Referenz · Bausteine
Komponenten
Die wiederverwendbaren Bausteine des Kits — Feature-Grid, Karten, Callouts, FAQ, Formulare und mehr. Jeder Baustein zeigt links seine Klasse und einen kurzen Hinweis, rechts eine lebende Vorschau. Alles passt sich auf Mobile automatisch einspaltig an.
Baustein
Feature-Grid
Klassen .feature-grid,
.feature und .feature__icon. Icon,
Headline, Text — dreispaltig, wie auf der Startseite. Das sind die
„Karten mit Icon“; Spaltenzahl per --feature-cols.
Kein Build-Step
Reines HTML, CSS und JS. Läuft per Doppelklick.
Alles über Tokens
Drei Markenfarben bilden die Basis für das System.
Denkt in Sektionen
Wiederverwendbare Bausteine statt Copy-Paste.
Baustein
Cards
Klassen .cards und
.card. Klickbare Kacheln (ohne Icon) für Übersichten
und Hub-Seiten. Das Raster stellt sich responsiv von einer auf zwei
bis --cards-cols Spalten.
Baustein
Callout
Klasse .callout. Ein
hervorgehobener Absatz für Beispiel-Prompts, Zitate aus dem Prozess
oder wichtige Hinweise. Mehrere .callout stapeln sich mit
ruhigem Abstand untereinander.
„Ich habe ein Logo und erste Texte, aber noch keine Seitenstruktur. Hilf mir, den nächsten sinnvollen Schritt zu klären.“
„Diese Entscheidung ist bestätigt. Halte sie im Projektstand fest und setze zunächst nur den ersten Viewport um.“
Baustein
FAQ
Klassen .faq und
.faq__item auf nativen
<details>-Elementen. Auf- und zuklappbar ganz
ohne JavaScript; jeder Eintrag öffnet unabhängig.
Brauche ich einen Server?
Wie ändere ich Farbe, Schrift oder Abstände?
styles.css
— eine Stelle, die auf alle Seiten wirkt.Wie füge ich eine neue Seite hinzu?
Baustein
Kennzahlen
Klassen .stats,
.stat, .stat__value und
.stat__label. Drei knappe Zahlen mit Beschriftung —
Fakten auf einen Blick.
Baustein
Schritte
Klassen .steps,
.step und .step__num. Ein nummerierter
Ablauf in drei Spalten, auf Mobile einspaltig.
01
Ziel beschreiben
Ein kurzer Satz genügt für den Anfang.
02
Kitty klärt
Die KI fragt nach und hält Entscheidungen fest.
03
Umsetzung
Tokens und Bausteine werden zu Dateien kombiniert.
Baustein
Kontaktformular
Klassen .form und
.form__row, zweispaltige Felder über
.form__columns. Barrierearme Labels, ein Honeypot gegen
Spam und die technische Basis fürs Versenden.
Baustein
Vollbild-Bild
Klasse .media. Ein Bild mit
festem Seitenverhältnis (Standard 16:9, per
--media-ratio änderbar). Auf einer echten Seite läuft es
über die volle Contentbreite — hier in der Vorschau auf
Spaltenbreite.
Baustein
Dunkles Band
Klasse .section--dark. Ein
bewusst immer dunkles Band — unabhängig vom Theme — für
CTA-Abschnitte und den Footer. Primary/Secondary poppen, Ghost
schaltet auf helle Kanten.
Loslegen
Sieh dir an, was drinsteckt.
Ein dunkler Abschnitt als Blickfang oder Abschluss einer Seite.
Weiterstöbern
Mehr Referenz
Die Section-Layouts zum Anordnen — oder die Typografie, aus der alles gesetzt ist.