Karte
Rahmen, Radius und Innenabstand kommen aus den Tokens.
Pattern Library
Bausteine dieser Website
Farben, Schrift und Komponenten des Designs, gezeigt mit den echten Klassen. Umschalten auf den dunklen Modus (Symbol oben rechts) zeigt, wie sich die Farben ändern.
Farben
Alle Farben sind CSS-Variablen (Tokens). Die Werte wechseln mit dem Modus, die Namen bleiben.
Typografie
Überschriften in Quicksand, Text in Noto Sans, beide lokal ausgeliefert (keine Google-Fonts-Abfrage).
Eyebrow, Überzeile
Überschrift 2 für Abschnitte
Überschrift 3 für Karten und Schritte
Lead-Text: etwas größer, für die Einleitung einer Seite.
Fließtext in Noto Sans, 17 Pixel, mit viel Zeilenabstand für gute Lesbarkeit. So sieht ein Link im Text aus.
Gedämpfter Text, 14 Pixel, für Bildunterschriften und Hinweise.
Buttons
Varianten
.button .button--secondary .button--outline .button--small
Links mit Pfeil
.project-link .more-link chevron_icon() ext_icon()
Chips und Badges
- PHP
- Täglich
- Je nach Projekt
.chip .chip--strong .chip--outline .badge--client .badge--own
Karten
Leistungskarte
Mit Nummer und optionaler Werkzeugzeile.
Figma · HTML · CSS
.card .service-card
Formularfelder
Hilfetext direkt unter dem Feld.
Hinweis unter dem Formular, z. B. zur Antwortzeit.
.form-field .form-hint .form-note
Bausteine der Projektseiten
Alle Projektseiten bauen aus denselben PHP-Funktionen (includes/case-study.php). Darunter zwei davon als Vorschau.
Auf einen Blick
Schnell
Eckdaten stehen mit Icon im dunklen Band.
30
Ein Wert, ein kurzer Text.
Pflegbar
Bis zu vier Einträge nebeneinander.
Tech-Stack
- PHP
- SQLite
- CSS
Vorgehen
Erster Schritt
Nummerierte Schritte auf hellgrauer Fläche, mit Überschrift und kurzem Text.
Zweiter Schritt
Die Nummer entsteht automatisch aus der Reihenfolge.
„So sieht eine Kundenstimme aus.“
Icons
Linien-Icons im 24er Raster, eingebettet als SVG (case_icon()). Dazu die Pfeile chevron_icon() und ext_icon().
Radien
control 10
badge 12
image 14
card 16
portrait 20
pill