Simple Design System

About the Simple Design System

This design system provides a research-based framework for quickly building durable web experiences.

Use it as a starter kit that you can build on top of, or as a complete, living solution.

👨‍🏫 Overview Deck

👨‍💻 Deployment Guide

👉 Try it out!

🧰 Page Builder

Using The Design System

The design system can be thought about in two layers: the visual and the interface layers.

Interaction Layer: The flow for how someone completes a task.

Interface Layer: The components of a website or app. These are well-established, scalable patterns.

Visual Layer: The skin of a website or app. This layer is thematic, can change annually, seasonally, or for one-off occasions. Anything on this layer can be modified without affecting the interface layer.

Page Builder

Try out the Page Builder - a client-side app that builds lightweight, single-file pages >99% smaller than the median page weight.

Contribution Guidelines

🙌 We're excited that you're interested in contributing to the Design System. To maintain the quality of our codebase and ensure the best experience for everyone, we ask that you follow these guidelines:

Code of Conduct

By contributing to the Design System, you agree to our Code of Conduct.

Reporting Bugs

If you find a bug in the software, we appreciate your help in reporting it. To report a bug:

Check Existing Issues: Before creating a new issue, please check if it has already been reported. If it has, you can add any new information you have to the existing issue.
Create a New Issue: If the bug hasn't been reported, create a new issue and provide as much detail as possible, including:
- A clear and descriptive title.
- Steps to reproduce the bug.
- Expected behavior and what actually happens.
- Any relevant screenshots or error messages.
- Your operating system, browser, and any other relevant system information.

Submitting Pull Requests

Contributions to the codebase are submitted via pull requests (PRs). Here's how to do it:

Create a New Branch: Always create a new branch for your changes.
Make Your Changes: Implement your changes in your branch.
Follow Coding Standards: Ensure your code adheres to the coding standards set for this project.
Write Good Commit Messages: Write concise and descriptive commit messages. This helps maintainers understand and review your changes better.
Test Your Changes: Before submitting your PR, test your changes thoroughly.
Create a Pull Request: Once you are ready, create a pull request against the main branch of the repository. In your pull request description, explain your changes and reference any related issue(s).
Review by Maintainers: Wait for the maintainers to review your pull request. Be ready to make changes if they suggest any.