kamper.dev · Design System

Klare Strukturen,
wenig Ballast.

Die visuelle Sprache von kamper.dev, destilliert in eine knappe, semantische Token-Schicht — direkt nutzbar in Code, AI-Tools und Figma Make.

tokens.css

01 Komponenten

Das System in Aktion — gebaut aus genau diesen Tokens. So sieht „warm-refined-minimal“ aus: ein Teal-Akzent, Haarlinien statt Schatten, viel Ruhe.

Buttons
Tags / Pills
Live Design Entwurf
Eingabe
Hinweis
Haarlinien trennen, Schatten bleiben subtil.
Karte
Projekt-TitelKurze Beschreibung in Grau.
Link & Text

Fließtext in Ink, dazu ein eleganter Link mit dezentem Unterstrich.

02 Farben

Zwei Teals tragen die Marke: #009689 aus dem Logo, das hellere #00bba6 für UI-Akzente, dazu Tiefe in #005f5a. Warme Stone-Neutrale statt kühlem Grau. Klicken kopiert den Wert.

03 Typografie

Switzer, variabel. Ausdrucksstarke, untypische Gewichtsstufen (240 · 360 · 580) geben den charakteristischen, optisch fein justierten Look.

Switzerlight · 240
Switzerregular · 360
Switzermedium · 500
Switzersemibold · 580
Switzerbold · 800
4xl 3.4Klare Strukturen
2xl 2.0Wenig Ballast, präziser Satz
xl 1.6Überschrift, halbfett
lg 1.2Lead-Text, etwas größer gesetzt
base 1.0Fließtext für längere Absätze und Inhalte.
sm 0.82Meta, Bildunterschriften, Hilfetexte.
xs 0.72Label · Uppercase · Tracking 0.14em

„Gutes Design fällt nicht auf — es trägt.“

Der Body-Satz läuft in Ink (#202020) bei Gewicht 360 mit einer Zeilenhöhe von 1.55. Überschriften setzen auf 580, die Wortmarke und Labels auf 800. Kursiv steht ebenfalls über die ganze Achse zur Verfügung — etwa für Betonungen wie diese.

04 Maße

Eine 9-stufige Spacing-Skala und vier Radien. Großzügig, ruhig, konsistent.

sm · .25
md · .375
lg · .625
pill

05 Fonts & Assets

Switzer ist self-hosted (woff2/woff/ttf, variabel, normal + kursiv). Logo als SVG. Alles direkt herunterladbar.

06 Vorlagen

Fertige, markenkonforme Generatoren — direkt im Browser ausfüllen und als PDF, Text, HTML oder AI-Handover ausgeben.

Kopiert