SAP Fiori

# SAP Fiori — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by SAP. "SAP Fiori" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** SAP Fiori
**Owner:** SAP
**Official documentation:** https://www.sap.com/design-system
**Visual character:** Horizon-theme enterprise calm: the custom '72' typeface, morning-light neutrals, and semantic colors auditors can reconcile.

---

## Summary

SAP's enterprise design language and guidelines, implemented through UI5 web components for consistent business application interfaces.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| SAP Blue / Brand | `#0070f2` | `--sapBrandColor` | Brand and primary actions (Horizon) |
| Text | `#1d2d3e` | `--sapTextColor` | Primary text (Horizon) |
| Secondary Text | `#556b82` | `--sapContent_LabelColor` | Labels and secondary text |
| White | `#ffffff` | `--sapBaseColor` | Control surfaces |
| Shell Background | `#f5f6f7` | `--sapShellColor` | Application shell background |
| Border | `#d9d9d9` | `--sapField_BorderColor` | Field borders |
| Negative Red | `#d20a0a` | `--sapNegativeColor` | Errors |
| Positive Green | `#30914c` | `--sapPositiveColor` | Success |
| Critical Orange | `#e76500` | `--sapCriticalColor` | Warnings |
| Informative Blue | `#0057d2` | `--sapInformativeColor` | Information |

## Typography

- **Body:** 72 — weights 400, 600, 700 — `'72', '72full', Arial, Helvetica, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| header-1 | `36px` | `48px` |
| header-3 | `20px` | `28px` |
| header-5 | `16px` | `22px` |
| body | `14px` | `20px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `8px (0.5rem)`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| default | `8px` |
| large | `12px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| level-1 | `0 2px 8px 0 rgba(34,54,73,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease` |

## Quick start (CSS)

```css
/* SAP Fiori — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.sap.com/design-system */

:root {
  /* Color */
  --sapBrandColor: #0070f2; /* Brand and primary actions (Horizon) */
  --sapTextColor: #1d2d3e; /* Primary text (Horizon) */
  --sapContent_LabelColor: #556b82; /* Labels and secondary text */
  --sapBaseColor: #ffffff; /* Control surfaces */
  --sapShellColor: #f5f6f7; /* Application shell background */
  --sapField_BorderColor: #d9d9d9; /* Field borders */
  --sapNegativeColor: #d20a0a; /* Errors */
  --sapPositiveColor: #30914c; /* Success */
  --sapCriticalColor: #e76500; /* Warnings */
  --sapInformativeColor: #0057d2; /* Information */

  /* Typography */
  --font-body: '72', '72full', Arial, Helvetica, sans-serif;

  /* Type scale */
  --text-header-1: 36px /* line-height 48px */;
  --text-header-3: 20px /* line-height 28px */;
  --text-header-5: 16px /* line-height 22px */;
  --text-body: 14px /* line-height 20px */;
  --text-small: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 8px;
  --radius-large: 12px;

  /* Elevation */
  --shadow-level-1: 0 2px 8px 0 rgba(34,54,73,0.15);

  /* Motion */
  --motion-default: 200ms ease;
}
```

## Engineering profile

- **Ships for:** Web Components, React
- **Token pipeline:** Custom
- **Source model:** Open source
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of SAP Fiori by SAP — SAP's enterprise design language and guidelines, implemented through UI5 web components for consistent business application interfaces. Character: Horizon-theme enterprise calm: the custom '72' typeface, morning-light neutrals, and semantic colors auditors can reconcile. Use a primary colour near #0070f2, the typeface "72" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px (0.5rem) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [SAP Fiori documentation](https://www.sap.com/design-system)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/sap-fiori) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._