🥳 You're one of the 6.6% of people in the world using Firefox!

Skip to Navigation Skip to Main Content

Stop reinventing the wheel

🔬 A research-based framework for building durable web experiences.

View Component Code

Scroll Down

🏴‍☠️

The Simple Design System is built on the idea that good design should be free. With a focus on human-centered design, this resource will be updated as data changes and trends evolve.

Design Resources

Figma Kit

Use the design system and other resources through the Figma kit.

Use it Now

Primary Content

Standard

This is a basic side-by-side layout for a content item.

View Component Code
#

Parent

Flipped

When using multiple standard content components in sequence, you can flip the layout for a more dynamic presentation.

View Component Code
#

Mobile

Coming Soon

Use this content when you're showing a mobile screen. Include badges to communicate project status to visitors.

View Component Code
#

Featured

This layout puts more prominence on the image being displayed. Use it for high-priority callouts.

View Component Code
#

In The Wild

🧅

OnionShare

OnionShare is an open source tool that lets you securely and anonymously share files, host websites, and chat with friends using the Tor network.

View Site
OnionShare Homepage

🔐

Normal Security

Easy ways to secure your digital life.

View Site
Normal Security Homepage

Secondary Content

Row Item with Images

Use this when secondary content needs a supporting image.

View Component Code
#

Row Item with Images

Use this when secondary content needs a supporting image.

View Component Code
#

Tertiary Content

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

🍄

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

Row Item

For secondary or tertiary content that doesn't need a lot of space.

View Component Code

Basic Content

Metadata

US20200097481A1

A simple content with added metadata for secondary information.

View Component Code

Button

Another simple content item that includes a button. Only use one primary button per page, and everywhere else use a secondary button.

View Component Code

Simple

On wide viewports this content item appears centered and becomes left-aligned on smaller screens.

View Component Code

Parent

Centered

🎁 Badge 1

🎉 Badge 2

✌️Badge 3

This content item stays centered on all viewport sizes. You can also include emojis in your badges for a fun presentation.

View Component Code

About

This is a good layout for an "About" section where you might want to include a larger avatar. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View Component Code

Contact

✌️

Use this for a contact section where you'll need to content out the channels where you can be reached.