Designsysteme für Social Media und Communitys
Designsysteme, extrahiert aus sozialen Netzwerken, Community-Plattformen und persönlichen Websites. Feeds, Profile, Avatare und Posting-Elemente prägen sie, oft mit einer verspielten Markenfarbe und abgerundeten, freundlichen Komponenten.
2 DESIGN.md-Beispiele in dieser Kategorie, von Dribbble und Snapchat. Aus den öffentlichen Seiten der jeweiligen Website extrahiert, keine offiziellen Markenrichtlinien. Neu beim Format? Lies, was eine DESIGN.md ist.
Dribbble
Das Designsystem von Dribbble basiert auf einem tiefen, nahezu schwarzen Marineton (#0d0c22), der mit einer klaren weißen Fläche kombiniert wird. Akzentuiert wird es durch das markante Pink (#ea4c89), das sparsam für redaktionelle Hervorhebungen und interaktive Elemente eingesetzt wird. Das gesamte Typografiesystem stützt sich ausschließlich auf Mona Sans in allen Schnitten und erzeugt Hierarchie allein über Gewicht und Größe. Pillenförmige Schaltflächen (border-radius: 1e+07px) und abgerundete Karten (12px Radius) prägen die geometrische Formensprache. Das Layout ist großzügig und folgt einem 8px-Grundraster. Die Elevation wird eher über dezente Schlagschatten als über starke Überlagerungen vermittelt.
Snapchat
Die Webpräsenz von Snapchat setzt auf ein kontrastreiches helles Design, das sich um das markante Markengelb #FFFC00 gruppiert. Dazu kommen nahezu schwarze Flächen in #121314 als primäre Oberflächen und ein klarer weißer Seitenhintergrund. Das Design kombiniert Avenir Next (primär) mit Graphik (sekundär) für eine freundliche, zugleich klar strukturierte typografische Hierarchie. Schaltflächen, Pills und Tags verwenden vollständig abgerundete Ecken mit 100px Radius, Eingabefelder hingegen einen dezenten Radius von 5px. Die Navigation ist eine schwebende Pill mit einem weichen Schatten. Inhalte werden in großen Medienkarten mit darüberliegendem weißem Text präsentiert, was ein immersives, app-vorschau-orientiertes Layout schafft. Die Informationsdichte ist moderat, mit großzügigen Abständen und einer klaren visuellen Hierarchie, die Marketing- und Produkt-UI-Konventionen miteinander verbindet.
Deine Website ist nicht dabei?
Füge eine beliebige URL ein und hol dir eine DESIGN.md von jeder Website. Farben, Typografie, Abstände und Tokens, bereit für deinen KI-Workflow.