
SAP Design System
open-source framework for consistent, accessible enterprise UI across SAP products.
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

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
open-source protocol for AI agents to generate secure, declarative UIs across platforms.

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