Color System
Color enhances visual design, guides users to perform tasks, and creates a seamless user experience. Our colors are delivered through design tokens, ensuring consistency and flexibility across all products.
Color Palettes
Branding Colors
Occam uses Zuora’s full branding palette as the foundation for our design system, ensuring consistency with the corporate identity.
System Colors
Our system colors are a streamlined, software-focused adaptation of the branding palette, carefully selected to ensure clarity and usability across all user interfaces.
Page Background
Cool Gray 050
Main Container
White 100%
Emphasis High
Black 90%
Emphasis Med
Black 60%
Emphasis Low
Black 40%
Context High
Black 12%
Context Med
Black 08%
Context Low
Black 04%
Border
Black 24%
Link Enabled
Blue 500 100%
Link Hover
Blue 500 80%
Link Pressed
Blue 500 60%
Link Visited
Purple 500
Link Disabled
#5E8BE5
Info
Blue 400
Ok
Green 500
Warning
Yellow 300
Error
Red 500
System colors on light background
Page Background
Brand Navy 900
Main Container
Brand Navy 800
Emphasis High
White 100%
Emphasis Med
White 80%
Emphasis Low
White 60%
Context High
White 24%
Context Med
White 16%
Context Low
White 08%
Link Enabled
Blue 200 100%
Link Hover
Blue 200 80%
Link Pressed
Blue 200 60%
Link Visited
Purple 200
Fills-Ok
Green 400
Fills-Warning
Yellow 300
Fills-Error
Red 400
Stroke/Text-Ok
Green 300
Stroke/Text-Warning
Yellow 300
Stroke/Text-Error
Red 300
System colors on dark background
Themes
Occam has three themes to ensure a visually cohesive and engaging user experience. Each theme includes light and dark mode variations, ensuring a consistent look and feel across different contexts.
Nebula (Default theme)
Nebula sparks ideas, bringing clarity from complexity and helping users easily navigate vast information.
Cosmos
Cosmos refines ideas into a structured experience, making even the most complex systems seamless and intuitive.
Horizon
Horizon ensures adaptability across all touchpoints, keeping design fluid, consistent, and always moving forward.
Primary Call-to-Action Color
Our primary call-to-action colors are designed to grab attention and encourage user engagement:
Button
Link
Light Background: Blue 500
Button
Link
Dark Background: Dark Theme/Contained
Usage: Applied to buttons and links to emphasize actions, signal them clearly, and guide users to engage with the platform.
Reserved Colors
Light Background
Negative
Warning
Positive
Info
Dark Background
Negative
Warning
Positive
Info
Error Indication color
Color: Negative
Usage: Used to indicate errors. Apply to error messages, error icons, and critical alerts to quickly notify users of issues that need attention.
Warning Indication color
Color: Warning
Usage: Used to signify warnings. Utilize in warning messages, caution icons, and non-critical alerts to draw attention to potential problems or cautionary information.
Positive Indication color
Color: Positive
Usage: Used to represent confirmations. Utilize in success messages, confirmation icons, and positive feedback to provide positive reinforcement for successful actions.
Info Indication color
Color: Info
Usage: This blue is reserved for conveying informational messages, providing users with clear and easily distinguishable cues for non-critical content or notifications.
Accessibility
Proper contrast ensures readability and usability for all users, including those with visual impairments. To create accessible, legible interfaces, refer to WCAG Level AA contrast requirements.
Exceptions
Decorative text, incidental content, and logos may have different contrast requirements because they do not impact usability or core readability.
Example (Theme background): Because it is a decorative element, it does not have to meet accessible contrast ratios.
Tools
To help you meet accessibility standards, we recommend using these tools:
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Color System
Color enhances visual design, guides users to perform tasks, and creates a seamless user experience. Our colors are delivered through design tokens, ensuring consistency and flexibility across all products.
Color Palettes
Branding Colors
Occam uses Zuora’s full branding palette as the foundation for our design system, ensuring consistency with the corporate identity.
System Colors
Our system colors are a streamlined, software-focused adaptation of the branding palette, carefully selected to ensure clarity and usability across all user interfaces.
Page Background
Cool Gray 050
Main Container
White 100%
Emphasis High
Black 90%
Emphasis Med
Black 60%
Emphasis Low
Black 40%
Context High
Black 12%
Context Med
Black 08%
Context Low
Black 04%
Border
Black 24%
Link Enabled
Blue 500 100%
Link Hover
Blue 500 80%
Link Pressed
Blue 500 60%
Link Visited
Purple 500
Link Disabled
#5E8BE5
Info
Blue 400
Ok
Green 500
Warning
Yellow 300
Error
Red 500
System colors on light background
Page Background
Brand Navy 900
Main Container
Brand Navy 800
Emphasis High
White 100%
Emphasis Med
White 80%
Emphasis Low
White 60%
Context High
White 24%
Context Med
White 16%
Context Low
White 08%
Link Enabled
Blue 200 100%
Link Hover
Blue 200 80%
Link Pressed
Blue 200 60%
Link Visited
Purple 200
Fills-Ok
Green 400
Fills-Warning
Yellow 300
Fills-Error
Red 400
Stroke/Text-Ok
Green 300
Stroke/Text-Warning
Yellow 300
Stroke/Text-Error
Red 300
System colors on dark background
Themes
Occam has three themes to ensure a visually cohesive and engaging user experience. Each theme includes light and dark mode variations, ensuring a consistent look and feel across different contexts.
Nebula (Default theme)
Nebula sparks ideas, bringing clarity from complexity and helping users easily navigate vast information.
Cosmos
Cosmos refines ideas into a structured experience, making even the most complex systems seamless and intuitive.
Horizon
Horizon ensures adaptability across all touchpoints, keeping design fluid, consistent, and always moving forward.
Primary Call-to-Action Color
Our primary call-to-action colors are designed to grab attention and encourage user engagement:
Button
Link
Light Background: Blue 500
Button
Link
Dark Background: Dark Theme/Contained
Usage: Applied to buttons and links to emphasize actions, signal them clearly, and guide users to engage with the platform.
Reserved Colors
Light Background
Negative
Warning
Positive
Info
Dark Background
Negative
Warning
Positive
Info
Error Indication color
Color: Negative
Usage: Used to indicate errors. Apply to error messages, error icons, and critical alerts to quickly notify users of issues that need attention.
Warning Indication color
Color: Warning
Usage: Used to signify warnings. Utilize in warning messages, caution icons, and non-critical alerts to draw attention to potential problems or cautionary information.
Positive Indication color
Color: Positive
Usage: Used to represent confirmations. Utilize in success messages, confirmation icons, and positive feedback to provide positive reinforcement for successful actions.
Info Indication color
Color: Info
Usage: This blue is reserved for conveying informational messages, providing users with clear and easily distinguishable cues for non-critical content or notifications.
Accessibility
Proper contrast ensures readability and usability for all users, including those with visual impairments. To create accessible, legible interfaces, refer to WCAG Level AA contrast requirements.
Exceptions
Decorative text, incidental content, and logos may have different contrast requirements because they do not impact usability or core readability.
Example (Theme background): Because it is a decorative element, it does not have to meet accessible contrast ratios.
Tools
To help you meet accessibility standards, we recommend using these tools:
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
Color System
Color enhances visual design, guides users to perform tasks, and creates a seamless user experience. Our colors are delivered through design tokens, ensuring consistency and flexibility across all products.
Color Palettes
Branding Colors
Occam uses Zuora’s full branding palette as the foundation for our design system, ensuring consistency with the corporate identity.
System Colors
Our system colors are a streamlined, software-focused adaptation of the branding palette, carefully selected to ensure clarity and usability across all user interfaces.
Page Background
Cool Gray 050
Main Container
White 100%
Emphasis High
Black 90%
Emphasis Med
Black 60%
Emphasis Low
Black 40%
Context High
Black 12%
Context Med
Black 08%
Context Low
Black 04%
Border
Black 24%
Link Enabled
Blue 500 100%
Link Hover
Blue 500 80%
Link Pressed
Blue 500 60%
Link Visited
Purple 500
Link Disabled
#5E8BE5
Info
Blue 400
Ok
Green 500
Warning
Yellow 300
Error
Red 500
System colors on light background
Page Background
Brand Navy 900
Main Container
Brand Navy 800
Emphasis High
White 100%
Emphasis Med
White 80%
Emphasis Low
White 60%
Context High
White 24%
Context Med
White 16%
Context Low
White 08%
Link Enabled
Blue 200 100%
Link Hover
Blue 200 80%
Link Pressed
Blue 200 60%
Link Visited
Purple 200
Fills-Ok
Green 400
Fills-Warning
Yellow 300
Fills-Error
Red 400
Stroke/Text-Ok
Green 300
Stroke/Text-Warning
Yellow 300
Stroke/Text-Error
Red 300
System colors on dark background
Themes
Occam has three themes to ensure a visually cohesive and engaging user experience. Each theme includes light and dark mode variations, ensuring a consistent look and feel across different contexts.
Nebula (Default theme)
Nebula sparks ideas, bringing clarity from complexity and helping users easily navigate vast information.
Cosmos
Cosmos refines ideas into a structured experience, making even the most complex systems seamless and intuitive.
Horizon
Horizon ensures adaptability across all touchpoints, keeping design fluid, consistent, and always moving forward.
Primary Call-to-Action Color
Our primary call-to-action colors are designed to grab attention and encourage user engagement:
Button
Link
Light Background: Blue 500
Button
Link
Dark Background: Dark Theme/Contained
Usage: Applied to buttons and links to emphasize actions, signal them clearly, and guide users to engage with the platform.
Reserved Colors
Light Background
Negative
Warning
Positive
Info
Dark Background
Negative
Warning
Positive
Info
Error Indication color
Color: Negative
Usage: Used to indicate errors. Apply to error messages, error icons, and critical alerts to quickly notify users of issues that need attention.
Warning Indication color
Color: Warning
Usage: Used to signify warnings. Utilize in warning messages, caution icons, and non-critical alerts to draw attention to potential problems or cautionary information.
Positive Indication color
Color: Positive
Usage: Used to represent confirmations. Utilize in success messages, confirmation icons, and positive feedback to provide positive reinforcement for successful actions.
Info Indication color
Color: Info
Usage: This blue is reserved for conveying informational messages, providing users with clear and easily distinguishable cues for non-critical content or notifications.
Accessibility
Proper contrast ensures readability and usability for all users, including those with visual impairments. To create accessible, legible interfaces, refer to WCAG Level AA contrast requirements.
Exceptions
Decorative text, incidental content, and logos may have different contrast requirements because they do not impact usability or core readability.
Example (Theme background): Because it is a decorative element, it does not have to meet accessible contrast ratios.
Tools
To help you meet accessibility standards, we recommend using these tools:
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
On This Page
Color System
Color enhances visual design, guides users to perform tasks, and creates a seamless user experience. Our colors are delivered through design tokens, ensuring consistency and flexibility across all products.
Color Palettes
Branding Colors
Occam uses Zuora’s full branding palette as the foundation for our design system, ensuring consistency with the corporate identity.
System Colors
Our system colors are a streamlined, software-focused adaptation of the branding palette, carefully selected to ensure clarity and usability across all user interfaces.
Page Background
Cool Gray 050
Main Container
White 100%
Emphasis High
Black 90%
Emphasis Med
Black 60%
Emphasis Low
Black 40%
Context High
Black 12%
Context Med
Black 08%
Context Low
Black 04%
Border
Black 24%
Link Enabled
Blue 500 100%
Link Hover
Blue 500 80%
Link Pressed
Blue 500 60%
Link Visited
Purple 500
Link Disabled
#5E8BE5
Info
Blue 400
Ok
Green 500
Warning
Yellow 300
Error
Red 500
System colors on light background
Page Background
Brand Navy 900
Main Container
Brand Navy 800
Emphasis High
White 100%
Emphasis Med
White 80%
Emphasis Low
White 60%
Context High
White 24%
Context Med
White 16%
Context Low
White 08%
Link Enabled
Blue 200 100%
Link Hover
Blue 200 80%
Link Pressed
Blue 200 60%
Link Visited
Purple 200
Fills-Ok
Green 400
Fills-Warning
Yellow 300
Fills-Error
Red 400
Stroke/Text-Ok
Green 300
Stroke/Text-Warning
Yellow 300
Stroke/Text-Error
Red 300
System colors on dark background
Themes
Occam has three themes to ensure a visually cohesive and engaging user experience. Each theme includes light and dark mode variations, ensuring a consistent look and feel across different contexts.
Nebula (Default theme)
Nebula sparks ideas, bringing clarity from complexity and helping users easily navigate vast information.
Cosmos
Cosmos refines ideas into a structured experience, making even the most complex systems seamless and intuitive.
Horizon
Horizon ensures adaptability across all touchpoints, keeping design fluid, consistent, and always moving forward.
Primary Call-to-Action Color
Our primary call-to-action colors are designed to grab attention and encourage user engagement:
Button
Link
Light Background: Blue 500
Button
Link
Dark Background: Dark Theme/Contained
Usage: Applied to buttons and links to emphasize actions, signal them clearly, and guide users to engage with the platform.
Reserved Colors
Light Background
Negative
Warning
Positive
Info
Dark Background
Negative
Warning
Positive
Info
Error Indication color
Color: Negative
Usage: Used to indicate errors. Apply to error messages, error icons, and critical alerts to quickly notify users of issues that need attention.
Warning Indication color
Color: Warning
Usage: Used to signify warnings. Utilize in warning messages, caution icons, and non-critical alerts to draw attention to potential problems or cautionary information.
Positive Indication color
Color: Positive
Usage: Used to represent confirmations. Utilize in success messages, confirmation icons, and positive feedback to provide positive reinforcement for successful actions.
Info Indication color
Color: Info
Usage: This blue is reserved for conveying informational messages, providing users with clear and easily distinguishable cues for non-critical content or notifications.
Accessibility
Proper contrast ensures readability and usability for all users, including those with visual impairments. To create accessible, legible interfaces, refer to WCAG Level AA contrast requirements.
Exceptions
Decorative text, incidental content, and logos may have different contrast requirements because they do not impact usability or core readability.
Example (Theme background): Because it is a decorative element, it does not have to meet accessible contrast ratios.
Tools
To help you meet accessibility standards, we recommend using these tools:
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.
Foundations
On This Page
Color System
Color enhances visual design, guides users to perform tasks, and creates a seamless user experience. Our colors are delivered through design tokens, ensuring consistency and flexibility across all products.
Color Palettes
Branding Colors
Occam uses Zuora’s full branding palette as the foundation for our design system, ensuring consistency with the corporate identity.
System Colors
Our system colors are a streamlined, software-focused adaptation of the branding palette, carefully selected to ensure clarity and usability across all user interfaces.
Page Background
Cool Gray 050
Main Container
White 100%
Emphasis High
Black 90%
Emphasis Med
Black 60%
Emphasis Low
Black 40%
Context High
Black 12%
Context Med
Black 08%
Context Low
Black 04%
Border
Black 24%
Link Enabled
Blue 500 100%
Link Hover
Blue 500 80%
Link Pressed
Blue 500 60%
Link Visited
Purple 500
Link Disabled
#5E8BE5
Info
Blue 400
Ok
Green 500
Warning
Yellow 300
Error
Red 500
System colors on light background
Page Background
Brand Navy 900
Main Container
Brand Navy 800
Emphasis High
White 100%
Emphasis Med
White 80%
Emphasis Low
White 60%
Context High
White 24%
Context Med
White 16%
Context Low
White 08%
Link Enabled
Blue 200 100%
Link Hover
Blue 200 80%
Link Pressed
Blue 200 60%
Link Visited
Purple 200
Fills-Ok
Green 400
Fills-Warning
Yellow 300
Fills-Error
Red 400
Stroke/Text-Ok
Green 300
Stroke/Text-Warning
Yellow 300
Stroke/Text-Error
Red 300
System colors on dark background
Themes
Occam has three themes to ensure a visually cohesive and engaging user experience. Each theme includes light and dark mode variations, ensuring a consistent look and feel across different contexts.
Nebula (Default theme)
Nebula sparks ideas, bringing clarity from complexity and helping users easily navigate vast information.
Cosmos
Cosmos refines ideas into a structured experience, making even the most complex systems seamless and intuitive.
Horizon
Horizon ensures adaptability across all touchpoints, keeping design fluid, consistent, and always moving forward.
Primary Call-to-Action Color
Our primary call-to-action colors are designed to grab attention and encourage user engagement:
Button
Link
Light Background: Blue 500
Button
Link
Dark Background: Dark Theme/Contained
Usage: Applied to buttons and links to emphasize actions, signal them clearly, and guide users to engage with the platform.
Reserved Colors
Light Background
Negative
Warning
Positive
Info
Dark Background
Negative
Warning
Positive
Info
Error Indication color
Color: Negative
Usage: Used to indicate errors. Apply to error messages, error icons, and critical alerts to quickly notify users of issues that need attention.
Warning Indication color
Color: Warning
Usage: Used to signify warnings. Utilize in warning messages, caution icons, and non-critical alerts to draw attention to potential problems or cautionary information.
Positive Indication color
Color: Positive
Usage: Used to represent confirmations. Utilize in success messages, confirmation icons, and positive feedback to provide positive reinforcement for successful actions.
Info Indication color
Color: Info
Usage: This blue is reserved for conveying informational messages, providing users with clear and easily distinguishable cues for non-critical content or notifications.
Accessibility
Proper contrast ensures readability and usability for all users, including those with visual impairments. To create accessible, legible interfaces, refer to WCAG Level AA contrast requirements.
Exceptions
Decorative text, incidental content, and logos may have different contrast requirements because they do not impact usability or core readability.
Example (Theme background): Because it is a decorative element, it does not have to meet accessible contrast ratios.
Tools
To help you meet accessibility standards, we recommend using these tools:
Crafted with ❤️ at Zuora
© 2025 Zuora Inc.