Colors
Joule / Foundation / Colors
Intro
Color plays a significant role by setting the visual balance for iOS apps. Color is used to define the visual hierarchy of UI elements and to direct the user’s attention to the most important tasks.
Joule Brand
The Joule Brand color is a critical element in establishing Joule’s identity and emotional connection with its audience. It not only reflects Joule’s personality but also influences user perceptions and can drive recognition and loyalty. The vibrant purple and electric violet colors help Joule stand out amongst other SAP Fiori products.
Joule UI
Joule Color Palette
Joule’s color system builds on the Horizon visual theme to create cohesive experiences for the Joule copilot across SAP touchpoints.
UI colors serve as an intermediate layer within the user interface, categorized by their specific roles or purposes. SAP Fiori for iOS follows the iOS standard from the Human Interface Guidelines (HIG) to ensure a structured approach to maintain consistency and accessibility across different contexts and interfaces. These dynamic colors adapt seamlessly to system appearance changes, such as light and dark modes.
Joule Brand is the core color of the Joule theme. It is one of the variables in the Joule gradient and is used in the panel header, input field – button background and tapped state for the primary Joule button.
Accent 1 is the Joule theme color and the 2nd Joule gradient variable.
Accent 2 is used for user text message backgrounds.
Accent 3 is used in list cards in the check mark and the text button. It is also used in quick replies within the state layer with an opacity of 10%.
Joule Gradient is used for the quick replies stroke.
Persistent White is used in the header for text, icons, and icon background with an opacity of 20%. Its also used in the welcome messages for text and Joule icon logo, users text message text, and input field icon.
Joule follows the SAP Fiori for iOS UI Colors and standards for a cohesive in-app experience.
Joule color palette
Accessibility
The SAP Fiori for iOS design system is designed to be compliant with accessibility standards. Our components are flexible, readable, and adaptable for usage by a wide range of users, providing an optimal and user-friendly experience for everyone, including individuals with special needs due to visual, motor, auditory, speech, or cognitive impairments.
For more information, see SAP Fiori for iOS Accessibility.
Elevation
In iOS apps, elevation plays a key role in both light and dark modes. Shadow effects are used to suggest elevation — the perceived distance between an object and the surface behind it using shadows and light. UI elements can use shadow effects to create visual cues, aid scannability, and convey levels of importance. Generally, components closer to the base layer have sharper shadows, while components that are elevated have softer shadows. In Joule the card system also has an outline to create a stronger contrast.
For more information, see Elevation for SAP Fiori for iOS.
Light & Dark Mode
The SAP Fiori for iOS design system includes systemwide appearance settings for light and dark modes which use color consistently and sparingly.
For more information, see Light & Dark Mode.
Light Mode
Light mode is the default theme for the Joule design system. Touches of color are used to call attention to important information or show the relationship between parts of the interface.
Joule light mode
Dark Mode
The dark color palette was created to provide a comfortable viewing experience tailored for low-light environments, which includes dimmer background colors and brighter foreground colors.
Joule dark mode