SAP Fiori Fundamentals
v1.5.4-rc.1 GitHub Support
  • Submit an issue
  • Email Us
    • getting started

    • foundation
      • Colors
      • Grid
      • Spacing
      • Type

    • layouts
      • Application Shell
      • Page
      • Section
      • Panel
      • Columns

    • components
      • Action Bar
      • Alert
      • Button
      • Breadcrumb
      • Calendar
      • Combobox Input
      • Contextual Menu
      • Date Picker
      • Dropdown
      • Forms
      • Identifier
      • Icon
      • Image
      • Input Group
      • Inline Help
      • List Group
      • Link
      • Loading Spinner
      • Localization Editor
      • Mega Menu
      • Menu
      • Modal
      • Multi Input
      • Pagination
      • Popover
      • Search Input
      • Shellbar
      • Side Navigation
      • Status Indicators
      • Table
      • Tabs
      • Tile
      • Tile Grid
      • Time
      • Time Picker
      • Token
      • Toggle
      • Tree

    • resources
      • How to use SCSS
      • Design System Utilities
      • UI Kit
      • SAP Fiori Fundamentals Implementation Libraries
      • Office Hours

    Foundation

    Fiori Fundamentals is a unified, flexible design system that solves complex problems in a meaningful way and creates simple intuitive experience.

    Colors

    Colors bring designs to life. It is used in a meaningful way to express emotions and tone, and promotes a distinct and consistent look and feel throughout all application.

    Grid

    Fiori Fundamentals uses responsive grid system that achieves flexible 12-column flow layout. It is used to create flexible layouts for various screen sizes and device types.

    Spacing

    Spacing helps content to breathe as well as create hierarchy and depth.

    Type

    Fiori Fundamentals uses a set of sans-serif system fonts.

    Have a question? Email us. © Copyright SAP 2019