Skip to main content

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.

This layout might be suited for non-social clients.