- Get link
- X
- Other Apps
🌐 SAP Fiori 3 :
Horizon Theme & Fluid Appearance
SAP Fiori 3 is SAP’s modern design system for enterprise applications. It delivers a consistent, intuitive, and responsive user experience across SAP products—focused on clarity, accessibility, and productivity.
🔑 Core Concepts
| Concept | Role | Example |
|---|---|---|
| Theme | Controls visual styling (colors, typography, iconography) | Horizon (Morning/Evening/High Contrast) |
| Appearance | Controls layout behavior & responsiveness | Fluid (dynamic, adaptive) |
Analogy: Theme = “paint & style”; Appearance = “container behavior”.
🎨 Horizon Theme
- Visual identity: Rounded shapes, fresh color palettes, updated icons.
- Accessibility: WCAG-aligned with high-contrast options.
- Variants: Morning (light), Evening (dark), High-Contrast Light, High-Contrast Dark.
- Consistency: Harmonized across SAPUI5/OpenUI5, desktop, and mobile.
💧 Fluid Appearance
Fluid is not a separate theme; it’s an appearance (layout mode) that complements any theme, including Horizon:
- Dynamic & responsive: Apps stretch and adapt to available screen space.
- Device-agnostic: Seamless across desktop, tablet, and mobile.
- Performance-minded: Lightweight and adaptable.
- Complementary: Use with Horizon for modern visuals + responsive behavior.
🔍 How Horizon & Fluid Work Together
| Element | Horizon Theme | Fluid Appearance |
|---|---|---|
| Purpose | Defines look & feel | Defines layout behavior |
| Focus | Colors, typography, icons | Responsiveness, adaptive containers |
| Scope | Visual branding & aesthetics | Screen adaptation & usability |
| Relationship | Applied at UI level (style) | Applied at layout/system level (behavior) |
🚀 Getting Started
- Adopt Horizon in SAPUI5/OpenUI5 or via Fiori Launchpad for consistent branding.
- Enable Fluid appearance so apps adapt to varying screen sizes.
- Customize with SAP Theme Designer to match enterprise brand guidelines.
- Future-proof: Horizon is SAP’s recommended default theme going forward.
Use Horizon for the modern look & accessibility, and layer Fluid on top to make layouts adapt fluidly across devices.
Comments