Design systemy serwisów społecznościowych
Design systemy wyodrębnione z serwisów społecznościowych, platform dla społeczności i stron osobistych. Definiują je feedy, profile, awatary i kontrolki publikowania, często z jednym zabawnym kolorem marki i zaokrąglonymi, przyjaznymi komponentami.
2 przykłady DESIGN.md w tej kategorii, ze stron: Dribbble i Snapchat. Wyodrębnione z publicznych stron każdej witryny, to nie są oficjalne wytyczne marek. Nie znasz tego formatu? Przeczytaj, czym jest DESIGN.md.
Dribbble
Design system Dribbble opiera się na głębokim, niemal czarnym granacie (#0d0c22) zestawionym z czystą białą powierzchnią. Sygnaturowy gorąco różowy akcent (#ea4c89) jest używany oszczędnie, do wyróżnień redakcyjnych i podkreślania elementów interaktywnych. Cały system typograficzny opiera się wyłącznie na kroju Mona Sans we wszystkich wagach, a hierarchię buduje samą wagą i rozmiarem. Językiem geometrii są przyciski w kształcie pigułki (border-radius: 1e+07px) i zaokrąglone karty (promień 12px). Układ jest przestronny, oparty na siatce bazowej 8px, a elewację sygnalizują subtelne cienie zamiast ciężkiego nakładania warstw.
Snapchat
Internetowa prezencja Snapchata opiera się na jasnym motywie o wysokim kontraście, z ikonicznym żółtym kolorem marki #FFFC00, prawie czarnymi powierzchniami podstawowymi (#121314) i czystym białym tłem strony. Projekt łączy krój Avenir Next (podstawowy) z Graphik (pomocniczym), tworząc przyjazną, a zarazem uporządkowaną hierarchię typograficzną. Elementy interaktywne, takie jak przyciski, pigułki i znaczniki, mają w pełni zaokrąglone narożniki (100px), natomiast pola wprowadzania używają subtelnego zaokrąglenia 5px. Nawigacja to unoszący się pasek w kształcie pigułki z delikatnym miękkim cieniem. Treści prezentowane są w dużych kartach z mediami i białym tekstem nałożonym na obraz, co tworzy immersyjny układ eksponujący podgląd aplikacji. Ogólna gęstość jest umiarkowana, z przestronnymi odstępami i wyraźną hierarchią wizualną, która łączy konwencje materiałów marketingowych z interfejsem produktu.
Nie ma tu strony, której potrzebujesz?
Wklej URL dowolnej strony i wygeneruj jej DESIGN.md. Kolory, typografia, odstępy i tokeny, gotowe dla twojego workflow z AI.