1---2name: sap-fiori-guidelines3description: SAP Fiori design guidelines for building enterprise applications. Use this skill when designing, building, or reviewing SAP Fiori applications, implementing SAPUI5 or UI5 Web Components, working with SAP enterprise UX patterns, or needing guidance on buttons, forms, tables, object pages, list reports, navigation, messaging, colors, typography, accessibility, AI/Joule integration, or any SAP Fiori UI element. Triggers on mentions of Fiori, SAPUI5, UI5, SAP UX, SAP design system, or enterprise application design following SAP standards.4---5
6# SAP Fiori Design Guidelines
7
8Comprehensive guidance for designing and building SAP Fiori applications following official SAP design system standards.
9
10## When to Use This Skill
11
12- Designing or building SAP Fiori applications
13- Implementing SAPUI5 or UI5 Web Components
14- Following SAP enterprise UX patterns
15- Choosing UI elements for SAP applications
16- Implementing navigation, messaging, or data visualization
17- Ensuring accessibility and inclusive design
18- Applying colors, typography, or visual styling
19- Designing AI-powered features, Joule integration, or guided prompts
20
21## Core Principles
22
23SAP Fiori is built on five principles:
24
251. **Role-based** - Designed for specific user roles and tasks
262. **Adaptive** - Works across devices and screen sizes
273. **Coherent** - Consistent experience across all SAP applications
284. **Simple** - Focused on essential tasks, reduces complexity
295. **Delightful** - Engaging and intuitive user experience
30
31## Technology Options
32
33| Technology | Use Case |
34|------------|----------|
35| SAPUI5 | Full SAP Fiori applications, SAP BTP, S/4HANA |
36| UI5 Web Components | Framework-agnostic, React/Vue/Angular integration |
37| SAP Fiori Elements | Metadata-driven apps with OData services |
38
39## Reference Documentation
40
41Read the appropriate reference file based on your task:
42
43### UI Elements
44
45| Reference | Contents |
46|-----------|----------|
47| `references/ui-actions.md` | Buttons, links, toggle buttons, menu buttons |
48| `references/ui-inputs.md` | Input fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar |
49| `references/ui-containers.md` | Panels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center |
50| `references/ui-display.md` | Avatars, progress indicators, busy indicators, illustrated messages |
51| `references/ui-lists-tables.md` | Responsive tables, grid tables, analytical tables, grid lists, lists |
52| `references/ui-navigation.md` | Icon tab bar, segmented button, side navigation, shell search |
53| `references/ui-messages.md` | Message strips, message strip web component |
54| `references/ui-ai.md` | AI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner |
55| `references/ui-upload.md` | Upload set with table plugin |
56
57### Page Types & Floorplans
58
59| Reference | Contents |
60|-----------|----------|
61| `references/page-types.md` | Object page, list report, analytical list page, overview page, dynamic page layout, page header |
62
63### Foundations
64
65| Reference | Contents |
66|-----------|----------|
67| `references/foundations-visual.md` | Colors, typography, iconography, theming, content density |
68| `references/foundations-interaction.md` | States, cursors, screen reader support |
69| `references/foundations-writing-and-wording.md` | UX writing, UI text guidelines |
70| `references/foundations-best-practices.md` | Navigation, messaging, object handling, action placement |
71| `references/foundations-ai-and-joule-design.md` | AI design patterns, Joule assistant, situation handling, AI guidelines |
72| `references/foundations-integration-and-services.md` | Fiori launchpad, integration patterns |
73
74### SAP Fiori Elements & S/4HANA
75
76| Reference | Contents |
77|-----------|----------|
78| `references/fiori-elements.md` | Smart templates, list report, object page, table features, AI input assistance |
79| `references/sap-s4hana.md` | S/4HANA specific design: navigation menu, product home page, AI error explanation |
80
81## Quick Reference
82
83### Button Types and Usage
84
85| Type | Usage |
86|------|-------|
87| Emphasized | Primary action - **one per page/dialog** |
88| Default/Ghost | Secondary actions |
89| Transparent | Toolbar actions, low emphasis |
90| Accept (green) | Positive semantic actions (Approve, Accept) |
91| Reject (red) | Negative semantic actions (Reject, Delete) |
92
93### Semantic Colors
94
95| Color | Meaning | Usage |
96|-------|---------|-------|
97| Neutral | Default state | Regular UI elements |
98| Positive (Green) | Success, good status | Approval, completion |
99| Critical (Orange) | Warning | Needs attention |
100| Negative (Red) | Error, bad status | Rejection, errors |
101| Information (Blue) | Informational highlight | Neutral information |
102
103### Message Types
104
105| Type | Usage |
106|------|-------|
107| Error | Prevents task completion, requires user action |
108| Warning | Potential issue, user can proceed |
109| Success | Confirms completed action |
110| Information | Neutral information |
111
112### Navigation Patterns
113
114| Pattern | When to Use |
115|---------|-------------|
116| Drill-down | Navigate to object details with back navigation |
117| Full-screen | Replace current view entirely |
118| Flexible Column Layout | Master-detail views in columns |
119| Dialog/Popover | Temporary overlay for quick tasks |
120
121### AI Components
122
123| Component | When to Use |
124|-----------|-------------|
125| AI Button | Trigger AI-powered actions |
126| AI Acknowledgment | Show AI contribution transparency |
127| Guided Prompts | Help users formulate AI requests |
128| Quick Prompts | Provide predefined AI interaction shortcuts |
129| Regenerate | Allow users to request new AI-generated content |
130| AI Writing Assistant | Inline AI text assistance |
131| Local AI Notice | Inform users about on-device AI processing |
132
133## Implementation Checklist
134
135When building a Fiori application:
136
137- [ ] Single emphasized button per page/dialog
138- [ ] Proper semantic colors for status indication
139- [ ] Message handling with Message Popover
140- [ ] Accessible labels and ARIA attributes
141- [ ] Responsive layout for different screen sizes
142- [ ] Consistent navigation patterns
143- [ ] Form validation with value states
144- [ ] Loading indicators for async operations
145- [ ] AI features follow Joule design patterns where applicable
146
147## Key Guidelines
148
149### Buttons
150- Use text buttons for primary, secondary, and semantic actions
151- Icon-only buttons only for universally recognized metaphors
152- Always provide tooltips for icon buttons
153- Button text: imperative verb (Save, Edit, Create)
154
155### Forms
156- Group related fields logically
157- Use proper field labels (always visible)
158- Show validation errors with value states
159- Provide clear error messages
160
161### Tables
162- Use responsive table for most cases
163- Grid table for complex data analysis
164- Analytical table for aggregation needs
165- Always provide column headers
166
167### Messages
168- Message Popover for multiple messages
169- Message Box only for interrupting errors
170- Toast for transient success confirmations
171- Inline validation for form fields
172
173### AI Integration
174- Use AI Button for AI-triggered actions
175- Show AI Acknowledgment for transparency
176- Provide Guided Prompts to help users interact with AI
177- Always include Local AI Notice when processing happens on-device
178- Follow responsible AI principles in all AI-powered features
179
180## External Resources
181
182- SAP Fiori Design Guidelines: https://experience.sap.com/fiori-design-web/
183- SAPUI5 SDK: https://ui5.sap.com/
184- UI5 Web Components: https://sap.github.io/ui5-webcomponents/
185
186---
187
188When implementing specific components, always read the relevant reference file for detailed guidance and examples.
sap