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
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.
Try out the Page Builder - a client-side app that builds lightweight, single-file pages >99% smaller than the median page weight.
🙌 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:
By contributing to the Design System, you agree to our Code of Conduct.
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.
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.
By following these guidelines, you help to ensure a smooth and efficient contribution process for everyone.
Accessibility
WAVE Web Accessibility Evaluation Tool
axe Accessibility Testing Tool
For Blind Internet Users, the Fix Can Be Worse Than the Flaws, NY Times
7 Things Every Designer Needs to Know about Accessibility
Code
Ethics
Government Resources
Gov.uk Government Design Principles
Native Guidelines
Apple Human Interface Guidelines
Research
Usability
Dark Patterns - Princeton Findings
Durability of Usability Guidelines
Top 10 Guidelines for Homepage Usability
Usability.gov User Interface Design Basics
Usability.gov Interaction Design Basics
Planning & Ops
Writing
Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert
Microcontent: A Few Small Words Have a Mega Impact on Business