● ONLINE
SAP Design System

SAP Design System

Design Systems

open-source framework for consistent, accessible enterprise UI across SAP products.

FreeDesign Systems
VISIT_WEBSITE >>

Product Overview

SAP Design System, primarily SAP Fiori for SAP applications, is an open-source design system providing guidelines, components, and tools for building consistent, user-centric, and accessible enterprise experiences across SAP's ecosystem (S/4HANA, SuccessFactors, Ariba, etc.). It follows human-centered design principles with Fiori guidelines for web and mobile, offering reusable UI patterns, theming, and accessibility standards. The system includes Figma kits, code libraries (Fundamental Library for React/Angular/Vue), and extensive documentation for designers and developers. Fiori Guidelines: Core principles for UX in SAP apps, focusing on role-based, delightful, and coherent experiences. Component Library: Reusable elements like tables, forms, charts, and navigation with variants for themes (light/dark/high-contrast). Theming & Tokens: Quartz Light/Dark, Horizon themes; semantic colors, typography, spacing. Tools: Figma UI Kit for prototyping; openUI5 and Fundamental Styles for implementation. Accessibility: WCAG 2.1 AA compliance, keyboard navigation, screen reader support.

label.best_for

Teams building scalable, consistent digital products.

Key Features

  • Fiori Guidelines: Core principles for UX in SAP apps, focusing on role-based, delightful, and coherent experiences.
  • Component Library: Reusable elements like tables, forms, charts, and navigation with variants for themes (light/dark/high-contrast).
  • Theming & Tokens: Quartz Light/Dark, Horizon themes; semantic colors, typography, spacing.
  • Tools: Figma UI Kit for prototyping; openUI5 and Fundamental Styles for implementation.
  • Accessibility: WCAG 2.1 AA compliance, keyboard navigation, screen reader support.

Pros

  • +Open source
  • +Color palette generation
  • +Accessibility contrast checking
  • +Comprehensive design system

Cons

  • -Adoption requires team alignment
  • -Customization can be complex

/// SPECS

  • Pricing:free
  • Platform:
    Browser / iOS / Android
ASSETS_DIRECTORY
figma
/// Similar Tools
Vuetify

Vuetify

Vuetify is a complete Vue.js UI framework that strictly adheres to Material Design guidelines, offering a rich set of components and powerful customization capabilities.

A2UI

A2UI

open-source protocol for AI agents to generate secure, declarative UIs across platforms.

Watt Design System

Watt Design System

Holaluz's Figma-based UI kit for consistent, accessible renewable energy interfaces.