Techné is the name of the UI design guidelines for YaaS. And it defines the principles and components for mobile-first, user-centered UX design on YaaS. Techné design patterns focus on delivering an experience that reflects what we call “the consumerization of business user tooling.” It’s an ethos that says an experience designed for those working in any kind of development, administrative or “back office” type scenario should drop the utilitarian design mentality and embrace the same interactions, visualizations, and flows to accomplish their tasks as any consumer-facing experience.


Three important aspects of Techné

Mobile first

Techné is built on the premise of mobile first and responsive design. Today, mobile first has become a kind of design slogan, and for good reason. The growing mobile usage, highly diverse devices and different places and situations to interact with a website, service or application led to the situation that people began to worry that they were focusing on the wrong devices. With this in mind, Techné took a different approach to designing for mobile right from the start. Techné and the underlying Bootstrap is mobile first in the sense that the code starts by targeting smaller screens, and then increases components and grids for larger screens.


User-centered user experience design

Techné provides a consistent and holistic user experience for YaaS. By creating visually pleasing designs with a strong focus on ease-of-use, the experience is intuitive and simple across all devices. With its simple and plain interaction patterns, Techné provides a powerful and consistent look and feel across YaaS and its microservices.


Freedom of technology

Techné is NOT another UI framework. It’s not a MVC (Model-View-Controller) framework and does not prescribe a data-binding language. Techné gives developers the freedom to use the technology they’re most comfortable with. There’s no technology baked into our components and patterns. Techné is open-source and meant to be community-driven.
To find the latest code and build personal projects please visit .


Learn more about Techné’s design principles:




Basics and design elements of Techné

Techné’s responsive design approach makes the development easy by offering UI controls that automatically adjust to different form factors and interaction styles. The advantage of Techné’s responsive design approach is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.

Techné provides:

  1. Components
  2. Patterns
  3. Starter Pages


1. Components

Components are the basic building blocks – such as labels, input fields, or buttons. They range from A as in Alerts to Z as in Zoom. Components can also include more abstract elements like color palettes, fonts and even more dynamic aspects of an interface like animations.

Here are examples for components


Input field:

UX article - input field



UX article - pagination




2. Patterns

Patterns are groups of components which are bound together and are the smallest fundamental units of a compound. Patterns take on their own properties and serve as the backbone of the Techné design.


Here are example for patterns



UX article - form and input fields


Toolbar and one part is the pagination, mentioned before:

UX article - toolbar




3. Starter Pages

Patterns give us some building blocks to work with, and we can now combine them together to form UIs for Yaas. The section ‘Starter Pages’ shows illustrative examples – groups of patterns joined together to form a relatively complex, distinct section of an interface for YaaS.

Here is an example for a Starter Page

Table and one part is the toolbar, mentioned before:

UX article - starter page


Learn more about the Techné’s Design Elements:




The personas of Techné

Techné focus on four persons



The Consumer

A consumer expects a unified experience across channels and devices; how they want it, where they want it, when they want it.


The Creator

Our Marketers, Merchandisers, Product Managers and other Designer people


The Enabler

Our IT, Operations, Customer Service, Order Management people


The Developer

The heart of YaaS. They need stability, community and tools that don’t get in their way


Learn more about the Techné’s Personas:
Learn more about personas and what a persona is:



Techné and the interplay with UI5

Techné is also designed to be complementary to the UI5 component library and UX designers and UI developers can mix and match components from either library to achieve the experience needed for their target users. Techné is, however, the standard for YaaS.



If you would like to know more about YaaS please visit or this blog on the SAP Community.



Not logged in
  • Mustafa Bensan   4 years ago

    Hi Holger,

    SAP’s UX Strategy states that all products will converge to the Fiori UX design. Techné therefore appears to be a new UX design guideline which is independent of the overall SAP UX Strategy. Can you clarify?



    • Holger Maassen   4 years ago

      Dear Mustafa

      Techné is a Visual Guideline and Component Library: Without a specific Framework – one of the main differences with Fiori/UI5.

      Techné is actually more fitted to develop YaaS modules – meaning Techné is the Visual Guideline and Component Library (Without a specific Framework – one of the main differences with Fiori/UI5) to build consistency across UIs for the builder on YaaS (The builder ( is the integrated backoffice space of YaaS where the subscriber can use and maintain the YaaS’ packages to which they subscribed).

      It is possible to use Fiori controls within Builder to add an interaction or pattern that doesn’t already exist in Techne
      – UI5 and Techne are meant to be complementary – not in competition.

      SAP Fiori is the UX for SAP apps, software and cloud solutions. That means if you do not develop an UI for the YaaS builder – Fiori was, is and will be your UX, and the SAP Fiori Design Guidelines should be followed.

      In this context I’d like to point you to the article on the SAP Community – where you can find the article about YaaS:

      I want to thank you for taking the time to write your comment – especially as there might be one or two who has the same question in mind – Thank you !

      Best Holger