NRCS Design System

A design system produced for our partners at NRCS.

An adaptation of the FPAC Design System and its inherent roots from the U.S. Web Design System

A resource with specifics and expanded documentation meant as a compliment to the FPAC Design System documentation, all to support the current needs of coordinated efforts building apps at NRCS.

If you are working on a project with FPAC or its related agencies, it is suggested you consider starting FPAC design system first.

• Designed with clean simple styles, high color contrast, and accessible components for accessibilty.
• Provides color, typography, iconography, components and examples with documentation for how to use them.
• Provides two sizing scales for typography and components for different use cases, for example in larger public website to more compact and data-heavy web applications.
• The intent is to provide a solution for our development teams to converge upon for consistent implementation in design and style.
• Provides a React UI component library in two sizes, Default and Small out-of-the-box for use with different use cases (website vs compact data application). It covers implementations of most FPAC components, a handful of custom complex components, and some use of Reactstrap components for layout and forms.
• The NRCS Design System and this website is built with React (via Create React App), Storybook, using Reactstrap, and based on a custom Bootstrap theme. The source for this project can serve as an example implementation of the NRCS Design System components and styles as well as a rough application skeleton.