# SAP Fiori (SAP Fiori)

> SAP's role-based design language reduces enterprise processes to the information and actions each person needs, then carries them consistently across devices.

- IndexStyle No.556 — https://indexstyle.org/styles/sap-fiori
- Kind: Style · Family: Platform Screen Languages · Era: 2013–
- Mood: Trust, Technique, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- Role-based launchpad tiles
- Shell bar and object pages
- Compact tables and semantic status
- Calm blue on pale work surfaces

## Best used for

- Enterprise workflows that differ by user role
- Connecting overview, object detail and task completion

## Composition recipe

- Typography & lettering: Use concise business labels and expose status with words as well as color.
- Layout & structure: Move from overview to object page to focused task, preserving context throughout.
- Material & texture: Use pale layers, restrained blue and semantic colors for status only.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #F5F6F7
- The colour it is remembered by: #0A6ED1
- Text and outlines: #32363A

## What to avoid

Putting every enterprise function on one screen defeats the role-based premise. Remove what the current task does not need.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Role-based launchpad tiles
- [ ] Visible in the piece: Shell bar and object pages
- [ ] Visible in the piece: Compact tables and semantic status
- [ ] Visible in the piece: Calm blue on pale work surfaces
- [ ] The layout follows: Move from overview to object page to focused task, preserving context throughout.
- [ ] The lettering follows: Use concise business labels and expose status with words as well as color.
- [ ] The material and surface follow: Use pale layers, restrained blue and semantic colors for status only.
- [ ] The colour relation holds: #F5F6F7 as ground, #0A6ED1 carrying the style, #32363A for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Ant Design (Ant Design)** — A design system that keeps enterprise web applications at low entropy through reusable components and page patterns. Its values — Natural, Certain, Meaningful and Growing — systematize tables, forms, hierarchy and state without reducing information density. → https://indexstyle.org/styles/ant-design
- **Carbon Design System (Carbon Design System)** — IBM's system for data-heavy enterprise products, combining a strict grid, IBM Plex type and compact components so complex work remains legible. → https://indexstyle.org/styles/carbon-design-system

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=sap-fiori+ant-design

## Further study

- Fiori design principles
- Launchpad and object page
- Role-based adaptive design

## Reference works

- SAP Fiori for Web — Design Principles — https://experience.sap.com/fiori-design-web/design-principles/

## Source of record

- SAP Fiori for Web — Design Principles — https://experience.sap.com/fiori-design-web/design-principles/

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/sap-fiori
- Image-generation prompt (legally clean): https://indexstyle.org/styles/sap-fiori/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)