Resources

At its core, Occam is a design system built to simplify complexity, bringing clarity, beauty, and adaptability to every product experience. To support this, we provide a comprehensive set of resources that ensure consistency and high-quality implementation across Zuora’s products. These resources help you align with the system’s principles, maintain cohesion, and deliver intuitive, impactful user experiences.

Guidelines for Core Assets

Typography System Guidelines

Defines how typography is applied in Occam to support clarity, visual hierarchy, and a consistent user experience.

Color System Guidelines

Establishes the use of color in Occam to enhance usability, express brand identity, and guide user attention.

Iconography Guidelines

Outlines how icons are used to communicate meaning quickly, support actions, and maintain a cohesive visual language.

Accessibility

Details how Occam supports inclusive design through accessibility best practices, ensuring usable experiences for all users.

Component Library

UI Components

A complete library of reusable interface elements with usage guidelines to help you design and build consistently across Occam.

Tools

Figma Files

Design System Library

Figma libraries for components, patterns, and foundations.

Developer Tools: View Code Resources

Web Components

Explore interactive examples of Occam’s Web Components in Storybook for easy reference and usage.

React Components

View interactive examples of Occam’s React components in Storybook for quick implementation insights.

Accessibility

Sim Daltonism

Color blindness simulator

Colour Contrast Analyser

Test the contrast of visual elements in your designs

Silktide

Accessibility Checker for Chrome

 

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Resources

At its core, Occam is a design system built to simplify complexity, bringing clarity, beauty, and adaptability to every product experience. To support this, we provide a comprehensive set of resources that ensure consistency and high-quality implementation across Zuora’s products. These resources help you align with the system’s principles, maintain cohesion, and deliver intuitive, impactful user experiences.

Guidelines for Core Assets

Typography System Guidelines

Defines how typography is applied in Occam to support clarity, visual hierarchy, and a consistent user experience.

Color System Guidelines

Establishes the use of color in Occam to enhance usability, express brand identity, and guide user attention.

Iconography Guidelines

Outlines how icons are used to communicate meaning quickly, support actions, and maintain a cohesive visual language.

Accessibility

Details how Occam supports inclusive design through accessibility best practices, ensuring usable experiences for all users.

Component Library

UI Components

A complete library of reusable interface elements with usage guidelines to help you design and build consistently across Occam.

Tools

Figma Files

Design System Library

Figma libraries for components, patterns, and foundations.

Developer Tools: View Code Resources

Web Components

Explore interactive examples of Occam’s Web Components in Storybook for easy reference and usage.

React Components

View interactive examples of Occam’s React components in Storybook for quick implementation insights.

Accessibility

Sim Daltonism

Color blindness simulator

Colour Contrast Analyser

Test the contrast of visual elements in your designs

Silktide

Accessibility Checker for Chrome

 

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Foundations

Overview

Accessibility

Color System

Content Strategy

Elevations

Iconography

Layout and Spacing

Logo

Motion

Resources

Shapes and Styling

Themes

Typography

Resources

At its core, Occam is a design system built to simplify complexity, bringing clarity, beauty, and adaptability to every product experience. To support this, we provide a comprehensive set of resources that ensure consistency and high-quality implementation across Zuora’s products. These resources help you align with the system’s principles, maintain cohesion, and deliver intuitive, impactful user experiences.

Guidelines for Core Assets

Typography System Guidelines

Defines how typography is applied in Occam to support clarity, visual hierarchy, and a consistent user experience.

Color System Guidelines

Establishes the use of color in Occam to enhance usability, express brand identity, and guide user attention.

Iconography Guidelines

Outlines how icons are used to communicate meaning quickly, support actions, and maintain a cohesive visual language.

Accessibility

Details how Occam supports inclusive design through accessibility best practices, ensuring usable experiences for all users.

Component Library

UI Components

A complete library of reusable interface elements with usage guidelines to help you design and build consistently across Occam.

Tools

Figma Files

Design System Library

Figma libraries for components, patterns, and foundations.

Developer Tools: View Code Resources

Web Components

Explore interactive examples of Occam’s Web Components in Storybook for easy reference and usage.

React Components

View interactive examples of Occam’s React components in Storybook for quick implementation insights.

Accessibility

Sim Daltonism

Color blindness simulator

Colour Contrast Analyser

Test the contrast of visual elements in your designs

Silktide

Accessibility Checker for Chrome

 

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Foundations

Overview

Accessibility

Color System

Content Strategy

Elevations

Iconography

Layout and Spacing

Logo

Motion

Resources

Shapes and Styling

Themes

Typography

On This Page

Resources

At its core, Occam is a design system built to simplify complexity, bringing clarity, beauty, and adaptability to every product experience. To support this, we provide a comprehensive set of resources that ensure consistency and high-quality implementation across Zuora’s products. These resources help you align with the system’s principles, maintain cohesion, and deliver intuitive, impactful user experiences.

Guidelines for Core Assets

Typography System Guidelines

Defines how typography is applied in Occam to support clarity, visual hierarchy, and a consistent user experience.

Color System Guidelines

Establishes the use of color in Occam to enhance usability, express brand identity, and guide user attention.

Iconography Guidelines

Outlines how icons are used to communicate meaning quickly, support actions, and maintain a cohesive visual language.

Accessibility

Details how Occam supports inclusive design through accessibility best practices, ensuring usable experiences for all users.

Component Library

UI Components

A complete library of reusable interface elements with usage guidelines to help you design and build consistently across Occam.

Tools

Figma Files

Design System Library

Figma libraries for components, patterns, and foundations.

Developer Tools: View Code Resources

Web Components

Explore interactive examples of Occam’s Web Components in Storybook for easy reference and usage.

React Components

View interactive examples of Occam’s React components in Storybook for quick implementation insights.

Accessibility

Sim Daltonism

Color blindness simulator

Colour Contrast Analyser

Test the contrast of visual elements in your designs

Silktide

Accessibility Checker for Chrome

 

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.

Overview

Accessibility

Color System

Content Strategy

Elevations

Iconography

Layout and Spacing

Logo

Motion

Resources

Shapes and Styling

Themes

Typography

Foundations

On This Page

Resources

At its core, Occam is a design system built to simplify complexity, bringing clarity, beauty, and adaptability to every product experience. To support this, we provide a comprehensive set of resources that ensure consistency and high-quality implementation across Zuora’s products. These resources help you align with the system’s principles, maintain cohesion, and deliver intuitive, impactful user experiences.

Guidelines for Core Assets

Typography System Guidelines

Defines how typography is applied in Occam to support clarity, visual hierarchy, and a consistent user experience.

Color System Guidelines

Establishes the use of color in Occam to enhance usability, express brand identity, and guide user attention.

Iconography Guidelines

Outlines how icons are used to communicate meaning quickly, support actions, and maintain a cohesive visual language.

Accessibility

Details how Occam supports inclusive design through accessibility best practices, ensuring usable experiences for all users.

Component Library

UI Components

A complete library of reusable interface elements with usage guidelines to help you design and build consistently across Occam.

Tools

Figma Files

Design System Library

Figma libraries for components, patterns, and foundations.

Developer Tools: View Code Resources

Web Components

Explore interactive examples of Occam’s Web Components in Storybook for easy reference and usage.

React Components

View interactive examples of Occam’s React components in Storybook for quick implementation insights.

Accessibility

Sim Daltonism

Color blindness simulator

Colour Contrast Analyser

Test the contrast of visual elements in your designs

Silktide

Accessibility Checker for Chrome

 

Crafted with ❤️ at Zuora

© 2025 Zuora Inc.