Sap Fiori Guidelines

SAP/ai-skills-library/skills/sap-fiori-guidelines

by SAP3a38db714d6fbc7083771bc8065c18e5cfde98a3No licenseListed Oct 9, 2026Updated Oct 9, 2026

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.

Instructions onlyDesign & CreativeSoftware Development
AI-generated overview

Provides SAP Fiori design guidelines for building and reviewing enterprise applications with SAPUI5, UI5 Web Components and Fiori Elements.

What it does
This instruction-only skill supplies SAP Fiori design system guidance across UI elements, page types and floorplans, visual and interaction foundations, UX writing, and AI/Joule design patterns. It routes the agent to bundled reference files covering buttons, inputs, containers, tables, navigation, messaging, upload, object pages, list reports, S/4HANA specifics and Fiori Elements. It also includes quick-reference tables for button types, semantic colors, message types, navigation patterns and AI components, plus an implementation checklist.
When to use it
Use it when designing, building or reviewing SAP Fiori applications, or when implementing SAPUI5 or UI5 Web Components. It also fits work involving SAP enterprise UX patterns, Fiori Elements templates, S/4HANA design, accessibility, theming, or AI and Joule integration in SAP interfaces.
Requirements
No scripts or runtime dependencies; it is instructions plus markdown reference files. The agent reads the relevant reference file for the component or topic at hand. External SAP documentation links are listed but no credentials or network access are required to use the guidance.

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:

  1. Role-based - Designed for specific user roles and tasks
  2. Adaptive - Works across devices and screen sizes
  3. Coherent - Consistent experience across all SAP applications
  4. Simple - Focused on essential tasks, reduces complexity
  5. Delightful - Engaging and intuitive user experience

Technology Options

TechnologyUse Case
SAPUI5Full SAP Fiori applications, SAP BTP, S/4HANA
UI5 Web ComponentsFramework-agnostic, React/Vue/Angular integration
SAP Fiori ElementsMetadata-driven apps with OData services

Reference Documentation

Read the appropriate reference file based on your task:

UI Elements

ReferenceContents
references/ui-actions.mdButtons, links, toggle buttons, menu buttons
references/ui-inputs.mdInput fields, selects, checkboxes, radio buttons, sliders, date/time pickers, filter bar
references/ui-containers.mdPanels, cards, dialogs, popovers, toolbars, forms, shell bar, user menu, notification center
references/ui-display.mdAvatars, progress indicators, busy indicators, illustrated messages
references/ui-lists-tables.mdResponsive tables, grid tables, analytical tables, grid lists, lists
references/ui-navigation.mdIcon tab bar, segmented button, side navigation, shell search
references/ui-messages.mdMessage strips, message strip web component
references/ui-ai.mdAI button, AI notice, AI writing assistant, AI acknowledgment, guided prompts, quick prompts, regenerate, home page banner
references/ui-upload.mdUpload set with table plugin

Page Types & Floorplans

ReferenceContents
references/page-types.mdObject page, list report, analytical list page, overview page, dynamic page layout, page header

Foundations

ReferenceContents
references/foundations-visual.mdColors, typography, iconography, theming, content density
references/foundations-interaction.mdStates, cursors, screen reader support
references/foundations-writing-and-wording.mdUX writing, UI text guidelines
references/foundations-best-practices.mdNavigation, messaging, object handling, action placement
references/foundations-ai-and-joule-design.mdAI design patterns, Joule assistant, situation handling, AI guidelines
references/foundations-integration-and-services.mdFiori launchpad, integration patterns

SAP Fiori Elements & S/4HANA

ReferenceContents
references/fiori-elements.mdSmart templates, list report, object page, table features, AI input assistance
references/sap-s4hana.mdS/4HANA specific design: navigation menu, product home page, AI error explanation

Quick Reference

Button Types and Usage

TypeUsage
EmphasizedPrimary action - one per page/dialog
Default/GhostSecondary actions
TransparentToolbar actions, low emphasis
Accept (green)Positive semantic actions (Approve, Accept)
Reject (red)Negative semantic actions (Reject, Delete)

Semantic Colors

ColorMeaningUsage
NeutralDefault stateRegular UI elements
Positive (Green)Success, good statusApproval, completion
Critical (Orange)WarningNeeds attention
Negative (Red)Error, bad statusRejection, errors
Information (Blue)Informational highlightNeutral information

Message Types

TypeUsage
ErrorPrevents task completion, requires user action
WarningPotential issue, user can proceed
SuccessConfirms completed action
InformationNeutral information

Navigation Patterns

PatternWhen to Use
Drill-downNavigate to object details with back navigation
Full-screenReplace current view entirely
Flexible Column LayoutMaster-detail views in columns
Dialog/PopoverTemporary overlay for quick tasks

AI Components

ComponentWhen to Use
AI ButtonTrigger AI-powered actions
AI AcknowledgmentShow AI contribution transparency
Guided PromptsHelp users formulate AI requests
Quick PromptsProvide predefined AI interaction shortcuts
RegenerateAllow users to request new AI-generated content
AI Writing AssistantInline AI text assistance
Local AI NoticeInform 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

When implementing specific components, always read the relevant reference file for detailed guidance and examples.

Source and attribution

Source:SAP/ai-skills-libraryinskills/sap-fiori-guidelinesat commit3a38db7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

More in Design & Creative

Theme Factory

anthropics

Featured

Offers 10 preset color-and-font themes, plus custom theme generation, for styling slide decks, documents, reports and HTML pages.

Design & Creative180Kupdated today

Slack Gif Creator

anthropics

Featured

Creates animated GIFs sized and optimized for Slack, with PIL drawing helpers, easing and validation utilities.

Includes scripts
Design & Creative180Kupdated today

Frontend Design

anthropics

Featured

Guidance for distinctive, intentional visual design when building or reshaping a user interface.

Design & Creative180Kupdated today

Canvas Design

anthropics

Featured

Creates original visual art as PNG or PDF from a written design philosophy, for posters, artworks and other static pieces.

Design & Creative180Kupdated today

Brand Guidelines

anthropics

Featured

Applies Anthropic's official brand colors and typography to artifacts that should carry the Anthropic look-and-feel.

Design & Creative180Kupdated today

Frontend Design

anthropics

Featured

Guides an agent through distinctive, intentional visual design for new or redesigned user interfaces.

Design & Creative149Kupdated today