Sawyer Hollenshead edited this page Aug 5, 2017 · 1 revision

How is the design system different from the U.S. Web Design Standards?

The design system is a variation and extension of the U.S. Web Design Standards. If you're familiar with the Standards, then the visual style of the design system should look familiar. This is deliberate and part of our goal to promote consistency and accessibility across federal government websites, a goal we share with the Standards. Whenever possible, we use the same markup, styling, and guidance as the U.S. Web Design Standards and link to related Standards components from our documentation.

However, the design system differs from the U.S. Web Design Standards in the following ways:

  • Code conventions - The design system follows a different naming convention in order to avoid conflicts with existing CSS and to deliver clarity and resilience.
  • Utilities - The design system includes granular utility classes for forming a variety of UI patterns.
  • Flexbox grid - The design system's responsive grid framework uses the flexbox layout mode, enabling functionality that would be non-trivial using floats.
  • Responsive classes - The design system provides the ability to quickly and easily adjust the layout and typography based on viewport size.
  • React support - The design system includes React components for the majority of UI components.

Credits to 18F and GSA for the hard work and care put into the Standards. We're excited to contribute back any learnings and progress.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.