Shells
All of the designs on this page can be found in the Reference Designs Figma File. Feel free to make a copy and use however you wish. This resource is open source without any limitations.
Centered Content with Floating Navigation
This layout makes use of the space around the content to display trending people and or trending notes.
Full Page - Multi-Purpose
This shell can be used in a variety of ways that makes use of the full page space. You'll want to limit the width of your content within the container or use it for multi-column layouts.
Full Page, Multi-Column
Desktop Social Feed Variation
One possible issue here is how to handle filtering while scrolling. You could fix it to the top and hide search, revealing only when scrolling up. We could also combine search and filters into one line with reveal effect on scrolling up.
Full Width Page with Top Navigation
This layout is great for media-focused clients such as streaming, image galleries, card lists etc... Pictured as 3 columns but can be any number.
Full Width, Right Aligned Search
This layout might be suited for non-social clients.
