Foundations

Foundations establish the visual and interaction standards that guide how products are designed and built. They provide the shared language that connects design, development, accessibility, and content—ensuring a cohesive experience across platforms, products, and teams.

The Building Blocks of Consistency

Every great experience starts with a strong foundation. These standards help teams make informed decisions by providing reusable principles for visual design, interaction design, accessibility, and implementation.

Together, they create a scalable framework that supports efficiency, consistency, and long-term growth.

Foundation Categories

Color

Create meaningful visual hierarchy while strengthening brand recognition.

Color tokens provide consistent usage across interfaces, helping teams communicate status, actions, emphasis, and accessibility requirements effectively.

Includes

• Brand Colors
• Semantic Colors
• Status Colors
• Color Accessibility
• Color Tokens

CTA Explore Color →

Typography

Create clear and readable experiences through consistent text styles and hierarchy.

Typography establishes rhythm, improves comprehension, and supports accessibility across all digital experiences.

Includes

• Type Scale
• Font Weights
• Headings
• Body Text
• Links
• Responsive Typography

Explore Typography →

Spacing

Create balance, structure, and consistency throughout the interface.

Spacing standards help maintain alignment, improve usability, and establish visual rhythm across layouts and components.

Includes

• Spacing Scale
• Margins
• Padding
• Layout Spacing
• Responsive Spacing

CTA Explore Spacing →

Layout & Grid

Provide a predictable framework for organizing content and components.

Grid systems help teams create responsive experiences that scale across devices and screen sizes.

Includes

• Responsive Grid
• Breakpoints
• Containers
• Columns
• Alignment Rules

CTA Explore Layout →

Iconography

Support understanding and wayfinding through a consistent visual language.

Icons should be recognizable, accessible, and aligned with the broader design system.

Includes

• Icon Library
• Usage Guidelines
• Sizes
• Accessibility Considerations

CTA Explore Iconography →

Accessibility

Build inclusive experiences that work for everyone.

Accessibility is integrated into every foundation and component to ensure usability across devices, abilities, and assistive technologies.

Includes

• WCAG Standards
• Color Contrast
• Keyboard Navigation
• Focus States
• Screen Reader Support

CTA Explore Accessibility →

Designed for Scale

The NFP Design System foundations are designed to evolve alongside our products and teams. By establishing shared standards, we reduce duplication, strengthen collaboration, and create experiences that remain consistent regardless of where they are built.

Highlights

• Consistent experiences across products
• Faster design and development workflows
• Accessible by default
• Shared language across teams
• Scalable for future growth

How Foundations Work Together

Foundations do not exist in isolation. Together, they provide the standards that power every component, pattern, and experience within the NFP Design System.