SAP Fiori Design Guidelines
Comprehensive guidance for designing and building SAP Fiori applications following official SAP design system standards.
When to Use This Skill
- Designing or building SAP Fiori applications
- Implementing SAPUI5 or UI5 Web Components
- Following SAP enterprise UX patterns
- Choosing UI elements for SAP applications
- Implementing navigation, messaging, or data visualization
- Ensuring accessibility and inclusive design
- Applying colors, typography, or visual styling
- Designing AI-powered features, Joule integration, or guided prompts
Core Principles
SAP Fiori is built on five principles:
- Role-based - Designed for specific user roles and tasks
- Adaptive - Works across devices and screen sizes
- Coherent - Consistent experience across all SAP applications
- Simple - Focused on essential tasks, reduces complexity
- Delightful - Engaging and intuitive user experience
Technology Options
| Technology | Use Case |
|---|---|
| SAPUI5 | Full SAP Fiori applications, SAP BTP, S/4HANA |
| UI5 Web Components | Framework-agnostic, React/Vue/Angular integration |
| SAP Fiori Elements | Metadata-driven apps with OData services |
Reference Documentation
Read the appropriate reference file based on your task:
UI Elements
| Reference | Contents |
|---|---|
references/ui-actions.md | Buttons, links, toggle buttons, menu buttons |
references/ui-inputs.md | Input fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar |
references/ui-containers.md | Panels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center |
references/ui-display.md | Avatars, progress indicators, busy indicators, illustrated messages |
references/ui-lists-tables.md | Responsive tables, grid tables, analytical tables, grid lists, lists |
references/ui-navigation.md | Icon tab bar, segmented button, side navigation, shell search |
references/ui-messages.md | Message strips, message strip web component |
references/ui-ai.md | AI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner |
references/ui-upload.md | Upload set with table plugin |
Page Types & Floorplans
| Reference | Contents |
|---|---|
references/page-types.md | Object page, list report, analytical list page, overview page, dynamic page layout, page header |
Foundations
| Reference | Contents |
|---|---|
references/foundations-visual.md | Colors, typography, iconography, theming, content density |
references/foundations-interaction.md | States, cursors, screen reader support |
references/foundations-writing-and-wording.md | UX writing, UI text guidelines |
references/foundations-best-practices.md | Navigation, messaging, object handling, action placement |
references/foundations-ai-and-joule-design.md | AI design patterns, Joule assistant, situation handling, AI guidelines |
references/foundations-integration-and-services.md | Fiori launchpad, integration patterns |
SAP Fiori Elements & S/4HANA
| Reference | Contents |
|---|---|
references/fiori-elements.md | Smart templates, list report, object page, table features, AI input assistance |
references/sap-s4hana.md | S/4HANA specific design: navigation menu, product home page, AI error explanation |
Quick Reference
Button Types and Usage
| Type | Usage |
|---|---|
| Emphasized | Primary action - one per page/dialog |
| Default/Ghost | Secondary actions |
| Transparent | Toolbar actions, low emphasis |
| Accept (green) | Positive semantic actions (Approve, Accept) |
| Reject (red) | Negative semantic actions (Reject, Delete) |
Semantic Colors
| Color | Meaning | Usage |
|---|---|---|
| Neutral | Default state | Regular UI elements |
| Positive (Green) | Success, good status | Approval, completion |
| Critical (Orange) | Warning | Needs attention |
| Negative (Red) | Error, bad status | Rejection, errors |
| Information (Blue) | Informational highlight | Neutral information |
Message Types
| Type | Usage |
|---|---|
| Error | Prevents task completion, requires user action |
| Warning | Potential issue, user can proceed |
| Success | Confirms completed action |
| Information | Neutral information |
Navigation Patterns
| Pattern | When to Use |
|---|---|
| Drill-down | Navigate to object details with back navigation |
| Full-screen | Replace current view entirely |
| Flexible Column Layout | Master-detail views in columns |
| Dialog/Popover | Temporary overlay for quick tasks |
AI Components
| Component | When to Use |
|---|---|
| AI Button | Trigger AI-powered actions |
| AI Acknowledgment | Show AI contribution transparency |
| Guided Prompts | Help users formulate AI requests |
| Quick Prompts | Provide predefined AI interaction shortcuts |
| Regenerate | Allow users to request new AI-generated content |
| AI Writing Assistant | Inline AI text assistance |
| Local AI Notice | Inform users about on-device AI processing |
Implementation Checklist
When building a Fiori application:
- Single emphasized button per page/dialog
- Proper semantic colors for status indication
- Message handling with Message Popover
- Accessible labels and ARIA attributes
- Responsive layout for different screen sizes
- Consistent navigation patterns
- Form validation with value states
- Loading indicators for async operations
- AI features follow Joule design patterns where applicable
Key Guidelines
Buttons
- Use text buttons for primary, secondary, and semantic actions
- Icon-only buttons only for universally recognized metaphors
- Always provide tooltips for icon buttons
- Button text: imperative verb (Save, Edit, Create)
Forms
- Group related fields logically
- Use proper field labels (always visible)
- Show validation errors with value states
- Provide clear error messages
Tables
- Use responsive table for most cases
- Grid table for complex data analysis
- Analytical table for aggregation needs
- Always provide column headers
Messages
- Message Popover for multiple messages
- Message Box only for interrupting errors
- Toast for transient success confirmations
- Inline validation for form fields
AI Integration
- Use AI Button for AI-triggered actions
- Show AI Acknowledgment for transparency
- Provide Guided Prompts to help users interact with AI
- Always include Local AI Notice when processing happens on-device
- Follow responsible AI principles in all AI-powered features
External Resources
- SAP Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
- SAPUI5 SDK: https://ui5.sap.com/
- UI5 Web Components: https://sap.github.io/ui5-webcomponents/
When implementing specific components, always read the relevant reference file for detailed guidance and examples.
