Styleguide

Überschriften

Textgrößen

Schriftstärken

Textfarben

Ausrichtung

Sonderformen

So werden die Größen benutzt

Jede Größe gibt es als Innenabstand, Außenabstand, Lücke und Abstandhalter. Statt xxsmall steht jede Größe aus der Liste oben.

<div class="container-large">
  <div class="sektion-schmal is-eng"> ... </div>
</div>

Inhaltsbreiten

Seitenrand

Überschrift und Inhalt

Zwischen dem Kopf eines Abschnitts – Überschrift und Einleitung – und seinem Inhalt steht überall derselbe Abstand:sektion-inhalt. Er kommt aus einer eigenen Variablen,--space-kopf, und ist damit an einer Stelle einstellbar.

Warum dafür eine eigene Variable und nicht einfachmargin-top-large: Dieser eine Abstand entscheidet mehr über den Eindruck einer Seite als jeder andere. Ist er zu klein, klebt alles aneinander und die Seite wirkt gedrängt – auch dann, wenn jeder Abschnitt für sich in Ordnung ist. Auf schmalen Bildschirmen wird er automatisch eine Stufe kleiner; dort sind 4 rem nicht großzügig, sondern Scrollarbeit.

Abstände zwischen Abschnitten

Raster mit automatischer Spaltenzahl

Raster mit fester Spaltenzahl

Reihen und Spalten

Maximalbreiten

Seitenverhältnisse

Halten den Platz für ein Bild frei, bevor es geladen ist. Das verhindert, dass die Seite beim Laden springt.

Schaltflächen

Warum die zweite Schaltfläche grau gefüllt ist und nicht nur umrandet: Sie hat denselben Rahmen wie die erste, nur in der Farbe ihrer eigenen Fläche. Dadurch sind beide exakt gleich groß und stehen sauber nebeneinander.

Die graue Fläche hebt sich von Weiß nur mit 1,17:1 ab. Das ist erlaubt und kein Versehen: Die Barrierefreiheitsrichtlinie verlangt die 3:1 nur für das, was zum Erkennen des Bedienelements nötig ist. Bei einer Schaltfläche mit sichtbarer Beschriftung übernimmt das die Schrift – und die steht hier mit 14,7:1 da.npm run kontrast prüft genau das.

Schaltflächen auf dunklem Grund

Auf dunklem oder farbigem Grund hat die normale Schaltfläche dieselbe Farbe wie der Hintergrund – sie ist dann buchstäblich unsichtbar. Deshalb gibt es die umgekehrte Fassung.

Das passiert von selbst. In jedem Abschnitt mitgrund="dunkel" oder grund="farbig", in Aufmachern mit Hintergrundbild und in der dunklen Fußzeile werden Schaltflächen automatisch umgekehrt. Man kann es also nicht vergessen.

npm run kontrast rechnet alle diese Kombinationen nach – auch die umgekehrten. Wer die Hauptfarbe ändert, sieht sofort, ob es noch reicht.

Karte

Beim Überfahren hebt sich eine anklickbare Karte an und bekommt einen Schatten. Weder Rahmen noch Schrift werden eingefärbt – auch die Überschrift nicht. Eine Karte wird nicht wichtiger, nur weil der Zeiger darüber steht, und der Farbblitz macht die Seite unruhig. Ist die Karte selbst ein Link, braucht sie dafür text-style-nolink.

Etikett, Trennlinie, Hinweis

Liste mit Haken

Für Aufzählungen, bei denen jeder Punkt eine Zusage ist: was im Preis enthalten ist, was mitzubringen ist, was der Betrieb übernimmt.

Der Haken ist gezeichnet, nicht getippt: zwei Rahmenlinien eines gedrehten Kästchens. Damit gibt es kein Zeichen, das Vorleseprogramme mitlesen könnten – „Häkchen Feste Termine" will niemand hören. Auf dunklem und farbigem Grund kehrt er sich automatisch um.

Formularfeld

Platzhalter für gesperrte Fremdinhalte

Steht dort, wo ohne Einwilligung ein Video, eine Karte oder ein Terminkalender erscheinen würde. Die Technik dazu kommt in Phase 7.

Fließtext aus dem CMS

Die Dateien liegen in src/components/sektionen/. Eine Seite besteht dann nur noch aus einer Handvoll Zeilen: Sektionen untereinander, jede mit ihren Texten.

Aufmacher

Zum Aufmacher mit Hintergrundbild: Zwischen Bild und Text liegt immer eine dunkle Schicht mit fester Deckkraft. Ob heller Text auf einem Foto lesbar ist, hängt sonst vom Foto ab – und das kann kein Prüfskript vorher wissen. Der Wert ist nachgerechnet:npm run kontrast prüft den ungünstigsten Fall, ein rein weißes Bild.

Inhalt

Abläufe

Der Unterschied: Schritte beschreiben etwas, das jemand durchläuft – vom Anruf bis zum Protokoll. DerZeitstrahl beschreibt eine Folge in der Zeit, etwa die Geschichte des Betriebs. Bei beiden wächst die Linie beim Scrollen mit und zeigt die Richtung.

Menschen und Kontakt

Zeichen

Hintergründe

Fast jede Sektion nimmt die Eigenschaft grund. Damit heben sich Abschnitte voneinander ab, ohne dass man Farben von Hand setzt.

So sieht eine Seite damit aus

<HeroBild
  titel="Wallbox-Montage"
  text="Wir prüfen den Anschluss und melden beim Netzbetreiber an."
  bild="/medien/wallbox.webp"
  bildAlt="Wallbox an einer Garagenwand"
  bildSeite="rechts"
/>

<SektionSchritte titel="So läuft es ab" schritte={schritte} grund="hell" />

<SektionFragen titel="Häufige Fragen" fragen={fragen} />

<SektionAufruf
  titel="Wallbox geplant?"
  schaltflaecheText="Anfrage schreiben"
  schaltflaecheZiel="/kontakt/"
/>

Alle Eigenschaften stehen im Kopf der jeweiligen Datei, mit Erklärung. Claude kennt sie – es genügt zu sagen, was auf die Seite soll.

26 Icons vorhanden. Ein Klick kopiert den fertigen Aufruf.

Größen

Farbe

Ein Icon übernimmt immer die Textfarbe seiner Umgebung. Man färbt es also nicht selbst ein, sondern setzt eine Textfarbe auf das Elternelement.

Barrierefreiheit

Ein neues Icon holen

Icons werden einzeln geholt, nicht als ganze Bibliothek. Den Original-Namen findet man auf der Website der jeweiligen Bibliothek.

npm run icon -- lucide sun sonne

Vorhandene Icons stammen aus: Lucide (ISC), Simple Icons (CC0-1.0). Die vollständigen Lizenzangaben stehen in DRITTANBIETER-LIZENZEN.md.

Markenlogos

Die Zeichen sozialer Netzwerke liegen getrennt insrc/icons/marken/ und werden über eine eigene Komponente eingebunden. Die Trennung ist Absicht, nicht Ordnungsliebe.

Markenrecht gilt unabhängig von der Lizenz der Bilddatei.Die Dateien stehen unter CC0, das Zeichen selbst bleibt die eingetragene Marke seines Inhabers. Erlaubt ist der Hinweis auf das eigene Profil bei diesem Dienst. Nicht erlaubt ist alles, was nach Partnerschaft oder Empfehlung aussieht – und jede Veränderung des Logos. Einzelheiten insrc/icons/marken/LIESMICH.md.

Eckenradien

Drei Stufen, jede doppelt so groß wie die vorige: 2, 4 und 8 Pixel. Angegeben in rem, damit die Rundung mitwächst, wenn jemand im Browser die Schrift größer stellt.

Diese Werte darfst Du ändern – dafür stehen sie invariables.css. Was Du nicht tun solltest: einzelnen Bausteinen eigene Werte geben. Die Rundung ist eines der Dinge, an denen man einen einheitlich gestalteten Auftritt erkennt.

Runde Ecken ineinander: Sitzt ein runder Kasten in einem runden Kasten, wäre der äußere Radius eigentlich der innereplus der Innenabstand – sonst wirkt die äußere Ecke enger als die innere. Bei 8 Pixeln sieht das aber niemand; die Regel greift erst ab etwa 20 Pixeln. Im Kit gibt es deshalb keine Stelle, die so rechnet. Wer die Radien deutlich vergrößert, sollte daran denken.

Schatten

Alle drei sind weich und weit gestreut: kleine Deckkraft, großer Weichzeichner. Ein harter, enger Schatten sieht nach aufgeklebt aus – das ist der häufigste Grund, warum eine Oberfläche billig wirkt, ohne dass man sagen kann, woran es liegt. Wer einen Schatten braucht, nimmt einen von hier und erfindet keinen neuen.

Icon-Größen

Schriftgrößen als Werte

Weitere Werte