Digital experience.
Eine Karte, die wie ein Interface-Baustein und nicht wie ein Template wirkt.
Explore ↗Story Preview
1080 × 1920 · p5 Editorial Layout.
Story Builder
Bild, Text und Stil wählen. Der Export entsteht lokal als JPG.
P5 UI / BUILD SYSTEM
Glass Builder.
Interface-Material live einstellen, direkt testen und als sauberes CSS kopieren.
V20 · UI WORKBENCH · LOCAL FIRST
Bild
Zieh ein JPG, PNG oder WebP hier hinein.
Drop image hereoder klicken, um eine Datei auszuwählen
Output
Preset wählen oder eigene Größe verwenden.
Preview
Safe-Zone für vertikale Social-Formate simulieren.
Noch kein Bild geladen.
Format
Der Export nutzt ein zentriertes Cover-Crop.
Original
Kompression für JPG/WebP. PNG wird verlustfrei als PNG exportiert.
Drop image herelokale Verarbeitung
Compression
Noch kein Bild geladen.
Datei
Grundlegende Metadaten des Bildes anzeigen. Kamera-EXIF hängt vom Browserformat ab.
Choose imageJPG eignet sich am besten
Metadata
Datei
—
Typ
—
Größe
—
Pixel
—
Modified
—
Source image
Dominante Farben werden aus einem verkleinerten Canvas extrahiert.
Drop image herePalette wird automatisch erzeugt
Palette
Klick auf einen Farbwert zum Kopieren.
Live Material
Glassmorphism mit Material-Tiefe statt nur Blur.
LIVE PREVIEW
P5 / MATERIAL
P5 GLASS
Interface material, not decoration.
Material Controls
CSS
Button Preview
States, Material und Motion direkt testen.
HOVER ME
Button Controls
Card Preview
Surface, spacing und hover depth als System bauen.
Card Controls
Shadow Preview
Zwei Shadow-Layer statt einer matschigen Standardkante.
P5 / DEPTH
Shadow Layers
LAYER 01
LAYER 02
Grid Preview
Responsive Raster direkt als CSS-System definieren.
Grid Controls
Type Scale
Eine konsistente typografische Hierarchie aus zwei Werten.
Scale Controls
Fluid Preview
Die Headline wächst stufenlos zwischen zwei Viewports.
PREVIEW WIDTH
Ideas into things.
Clamp Generator
Spacing Tokens
Ein Basissystem, das Abstände logisch statt zufällig macht.
Spacing Controls
Brand Scale
Aus einer Farbe wird ein kompletter UI-Tonwertfächer.
Color Controls
Contrast Preview
WCAG-Kontrast direkt an realen UI-Elementen prüfen.
Readable?
Good interfaces do not make people fight the typography.
P5 / ACCESSIBILITYContrast Checker
—contrast ratio
Motion Preview
Motion Tokens testen, bevor sie in die Seite wandern.
PLAYGROUND
P5 / MOTION
Motion Controls
Component Preview
Ein Baustein, mehrere UI-Richtungen, direkt als HTML + CSS.
Component Controls
HTML + CSS
Hero Preview
Editorial Hero-Layouts mit typografischer Kontrolle.
P5.MEDIA / CREATIVE SYSTEM
Ideas into things.
Photography, motion and digital experiences — designed as one coherent system.
Hero Controls
Layout Preview
Page-Raster und Sidebar-Verhältnis als visuelle Fläche testen.
Layout Controls
Filter Preview
Looks, Rahmen und Gimmicks für Social-Media-Bilder.
Filter, Overlays und Export laufen lokal im Browser.
Styling Studio
Bild hochladen, Look wählen und mit Linien, Rahmen oder Labels veredeln.
Reel Cover
Vertikales Cover mit Feed-Safe-Preview.
Cover Setup
Das Cover bleibt 9:16. Die Safe-Zone hilft beim Platzieren der Typografie.
Feed Preview
Bis zu 12 geplante Posts ansehen und direkt umsortieren.
Noch keine Posts geladen.
Grid Setup
Mehrere Bilder gleichzeitig wählen. Die Reihenfolge bleibt nur in dieser Browser-Session.
0 / 12 Posts
Panorama Source
Ein breites Bild wird in nahtlose 4:5-Carousel-Slides zerlegt.
Drop panorama hereideal: breites Landscape-Foto
Split
Pro Slide1080 × 1350
Übergangnahtlos / center crop
Master Image
Ein Bild rein — mehrere Social-Formate raus.
Drop master imageJPG, PNG oder WebP
Export Set
Jedes Format nutzt einen zentrierten Cover-Crop.
Instagram Post1080 × 1350
Story / Reel1080 × 1920
Square1080 × 1080
Landscape1200 × 675