Komponenten
Hairline-Cards, Mono-Kicker, Daten-Figuren. Die wiederkehrenden Motive, getaggt nach Herkunftsprojekt.
Die Komponenten-Galerie
Unsere wiederkehrenden Motive, live in der Designsprache gerendert. Hairlines, Mono-Labels, Glow und Spring, alles interaktiv. Klicken, schalten und hovern, um sie zu fühlen.
Ein stimmiges System aus Farbe, Schrift, Bewegung und Komponenten, geteilt über alle Projekte.
1px-Rahmen mit geringem Alpha und leisem Inset-Glow oben. Die Grundkachel des Systems.
Moderne Patterns
Die Ideen auf Komponenten-Ebene hinter Produkt-UI, die sich 2026 aktuell anfühlt.
Command-Palette
Eine tastatur-erste ⌘K-Fläche für Suche und Aktionen. Signalisiert ein Power-User-Produkt und nimmt Chrome weg.
Optimistische UI
Das Interface sofort aktualisieren, bei Fehler abgleichen oder zurückrollen. Die App fühlt sich schwerelos an.
Skeletons statt Spinner
Platzhalter, die das finale Layout spiegeln. Gefühlte Geschwindigkeit und Ruhe statt drehender Leere.
Headless-Komponenten
Verhalten und Barrierefreiheit von Radix oder Ark, das Styling rein in meinen Tokens. Korrekt und markentreu.
Varianten aus Tokens
Ein Token-Satz steuert Grösse, Intent und Zustand. Konsistenz und ein sofortiges globales Re-Skin.
Gestaltete Focus-Ringe
Kontrastreich, abgesetzt, konsistenter Radius auf jedem interaktiven Element. Premium heisst durchdacht, nicht Browser-Default.
Dichte-Modi
Ein Spacing-Token-Schalter für datendichte Ansichten, sodass jedes Element seinen Platz verdient.
View-Transitions
Shared-Element-Morphs zwischen Zuständen mit Layout-Animation. Bewegung lenkt den Blick, dekoriert nie.
Handwerks-Details
Die kleinen Konventionen, die eine premium Komponente von einer generischen unterscheiden.
- 1px-Hairline-Rahmen mit geringem Alpha und leisem Inset-Glow oben, nie der Standard-Browser-Rahmen.
- Ein gestalteter Focus-Ring auf jedem interaktiven Element, konsistent über das System.
- Ein leichtes Zusammenschrumpfen beim Druck mit Spring-Release, mit Rücksicht auf reduced-motion.
- Mono- oder Kapitälchen-Labels für Metadaten, Shortcuts, Zähler und Einheiten.
- Tabellenziffern, damit Zahlen nicht zittern, und eine Radius-Skala über alle Komponenten.