NFP Design System
A centralized resource for designing and building consistent, accessible, and scalable digital experiences.
The NFP Design System provides the foundations, components, patterns, and guidance needed to create cohesive experiences across products and platforms. Whether you're a designer, developer, content author, or product team member, you'll find the tools and standards needed to build with confidence.
From Foundation to Experience
The NFP Design System is organized into three interconnected layers. Foundations establish the core principles, Components provide reusable building blocks, and Patterns & Guidance demonstrate how those pieces work together to solve real user needs.
Foundations
Foundations define the visual, interaction, and accessibility principles that create consistency across every experience.
Components
Components are reusable UI elements that enable teams to build experiences faster while maintaining consistency.
Patterns
Patterns provide proven solutions for common workflows, page structures, and user experiences.
Accessibility by Design
Accessibility is integrated throughout the NFP Design System—from foundations and components to patterns and documentation. By embedding accessibility considerations into every solution, teams can create more inclusive experiences with confidence.
Highlights
- WCAG-aligned guidance
- Keyboard interaction support
- Semantic implementation recommendations
- Accessible color usage
- Screen reader considerations
Help Shape the System
The NFP Design System is an evolving ecosystem built through collaboration. Share ideas, request enhancements, report issues, and help improve the experience for everyone.
Actions
- Submit Feedback
- Request a Component
- Suggest a Pattern
- Contact the Team
Design System
-
Foundations
-
Foundations
-
Foundations
Design System
-
Foundations
-
Foundations
-
Foundations
Design System
-
Foundations
-
Foundations
-
Foundations
Design System
-
Foundations
-
Foundations
-
Foundations